Next.js로 프로젝트를 진행하다 보면 next.config.js의 설정을 바꿔야 할 때가 있다.

자주 사용하는 설정에 대해 정리하고자 한다.

reactStrictMode

application 내에서 문제가 일어날 수 있는 부분에 대한 경고를 알려주는 기능이다.

Nextjs 문서에서는 strict mode를 활성화하는 것을 추천한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;

swcMinifty

swcMinifty이란 Terser와 비슷한 역할을 한다. 필요 없는 공백이나, 주석을 삭제하여 용량을 줄이고, 해당 스크립트를 해석할 수 없도록 암호화 하는 역할을 한다. 이러한 역할에 대한 용어를 Minification이라고 한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = nextConfig;

⭐Minification 설명

웹 페이지와 스크립트 파일에서 코드와 마크업을 최소화하는 프로세스이다.

function hello(name){
	console.log("Hi" + name)
}
hello("Jin");

위 코드를 아래와 같이 한 줄로 최소화한다.

function hello(l){console.log("Hi"+l)}hello("Jin");

Redirect

Redirect는 a페이지에 방문하면 자동으로 b 페이지로 이동하는 기능이다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async redirects() {
    return [
      {
        source: "/login",
        destination: "/",
        permanent: true,
      },
      {
        source: "/error",
        destination: "/",
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

패턴 - :path

:path 패턴 사용 시 /news/… url에 접근하면 /new_news/… 경로로 이동 시킨다

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async redirects() {
    return [
      {
        source: "/news/:path",
        destination: "/new_news/:path",
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

패턴 - *

/news/:path 이후 경로까지 매칭 한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async redirects() {
    return [
      {
        source: "/news/:path*",
        destination: "/new_news/:path*",
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

Rewrites

Rewrites 는 목적지 경로를 마스킹하여 사이트에서 위치가 변화하지 않은 것으로(= url 변화가 보이지 않는다. ) 보이게 한다. ( Redirects는 새로운 페이지로 이동하고 url 변화를 보여준다. )

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {
    return [
      {
        source: "/news",
        destination: "/new_news",
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

참고

https://nextjs.org/docs/app/api-reference/next-config-js

https://www.imperva.com/learn/performance/minification/