Next.js에서는 next.config.js 라는 이름의 파일을 통해서 여러가지 옵션들을 간편하게 설정할 수 있습니다. next.config.js 파일은 프로젝트의 가장 최상위 경로에 위치하게 되며, 아래와 같은 형태로 작성하면 됩니다.

// next.config.js

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
    /* config options here */
};

module.exports = nextConfig;

만약 ECMAScript 모듈을 사용해야 할 경우에는 next.config.mjs 라는 이름으로 아래와 같이 작성하면 됩니다.

// next.config.mjs

// @ts-check

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    /* config options here */
};

export default nextConfig;

그리고 TypeScript를 사용할 경우 아래와 같이 next.config.ts 파일을 작성하면 됩니다.

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  /* config options here */
}
 
export default nextConfig;

next.config.js 파일을 통해 설정할 수 있는 옵션이 굉장히 많기 때문에, 이 책에서 전부 다루지는 못하고 가장 자주 사용되는 옵션들에 대해서만 살펴보도록 하겠습니다.

13.1.1 redirects

redirects 옵션은 특정 페이지 요청을 다른 경로로 보낼 수 있게 해주는 기능입니다. 우리가 흔히 리다이렉션(Redirection)이라고 부르는 기능을 위한 옵션이라고 이해하면 됩니다.

특정 경로에 대해 페이지를 리다이렉션 시키기 위해서는 아래와 같이 next.config.js 파일에 redirects 옵션을 사용하면 됩니다.

// next.config.js

module.exports = {
    async redirects() {
        return [
            {
                source: '/home',
                destination: '/',
                permanent: true,
            },
        ];
    },
};

여기서 redirects는 비동기 함수로, source, destination, permanent 속성을 가진 객체들이 포함된 배열을 반환해야 합니다. 여기서 source는 들어오는 요청 경로 패턴을 의미하고, destination은 리다이렉션 시킬 경로를 의미합니다. 그리고 permanent는 true 또는 false 값을 가지게 되는데, true인 경우 308 HTTP Status Code를 사용하여 클라이언트/검색 엔진이 리다이렉션을 영구적으로 캐시하도록 지시하며, false인 경우 임시 상태 코드인 307을 사용하고 캐시되지 않습니다.

기본 속성 이외에 추가로 basePath, locale, has, missing 속성을 사용해서 더 상세하게 리다이렉션 설정을 할 수 있습니다. basePath는 값이 false일 경우 경로를 매칭할 때 basePath를 포함하지 않으며, 외부 리다이렉션에서만 사용할 수 있습니다. 그리고 locale은 값이 false일 경우 경로를 매칭할 때 locale을 포함하지 않게 됩니다. 마지막으로 has와 missing은 type, key, value 속성을 가진 객체들의 배열로 구성되며, Header, Cookie, Query 등을 매칭시킬 때 사용하는 속성입니다.

아래 next.config.js 파일은 has와 missing 옵션을 사용하여 Header, Cookie의 값에 따라 선택적으로 리다이렉션을 적용한 예시입니다.

// next.config.js

module.exports = {
    async redirects() {
        return [
            // `x-redirect-me`라는 헤더가 존재할 경우 리다이렉션 됨
            {
                source: '/:path((?!another-page$).*)',
                has: [
                    {
                        type: 'header',
                        key: 'x-redirect-me',
                    },
                ],
                permanent: false,
                destination: '/another-page',
            },
            // `x-do-not-redirect`라는 헤더가 존재할 경우 리다이렉션 되지 않음
            {
                source: '/:path((?!another-page$).*)',
                missing: [
                    {
                        type: 'header',
                        key: 'x-do-not-redirect',
                    },
                ],
                permanent: false,
                destination: '/another-page',
            },
            // authorized=true가 cookie에 존재할 경우 리다이렉션 됨
            {
                source: '/specific/:path*',
                has: [
                    {
                        type: 'cookie',
                        key: 'authorized',
                        value: 'true',
                    },
                ],
                permanent: false,
                destination: '/another/:path*',
            },
        ];
    },
};

13.1.2 rewrites

rewrites 옵션은 특정 경로에 대한 요청을 다른 경로로 매핑할 수 있게 해주는 기능입니다. rewrites는 URL proxy로 작동하기 때문에 내부적으로만 다른 경로로 매핑시키고 사용자의 주소창에 나타나는 주소는 바뀌지 않게 됩니다. 하지만 앞에서 살펴본 redirects 옵션은 실제로 다른 경로로 보내는 것이기 때문에 주소창에 나타나는 주소가 바뀌게 됩니다. 즉, redirects 옵션은 실제로 다른 경로로 보내는 것이고, rewrites 옵션은 다른 경로로 매핑만 시키는 것입니다. 이 두 가지 옵션의 차이점을 잘 기억하고 사용하는 것이 중요합니다.

특정 경로에 대한 요청을 다른 경로로 매핑하기 위해서는 아래와 같이 next.config.js 파일에 rewrites 옵션을 사용하면 됩니다.

// next.config.js

module.exports = {
    async rewrites() {
        return [
            {
                source: '/home',
                destination: '/',
            },
        ];
    },
};

여기서 rewrites는 비동기 함수로, source, destination 속성을 가진 객체들이 포함된 배열을 반환해야 합니다. 여기서 source는 들어오는 요청 경로 패턴을 의미하고, destination은 라우팅 시킬 경로를 의미합니다. 그리고 기본 속성 이외에 추가로 basePath, locale, has, missing 속성을 사용해서 더 상세하게 Rewrite 설정을 할 수 있습니다. 해당 속셩들은 앞서 살펴본 redirects와 동일하다고 보면 됩니다.