[Next] next.config.js

next.config.js

next.config.js 는 JSON 파일이 아닌, NodeJS 모듈이다.

next.config.js는 파일명에서도 알 수 있듯 Next 프로젝트에서 추가적인 설정을 할 수 있도록 하는 NodeJS 모듈이며 프로젝트 루트에 생성해서 사용하면 된다.

해당 파일은 Next의 서버 및 빌드 단계에서 사용되며 브라우저 빌드에서는 포함되지 않는다.

기본적으로 아래와 같이 next config를 설정할 수 있으며 module.export로 export하여 사용할 수 있다.

const nextConfig = {
  // 옵션 코드...
};

module.exports = nextConfig;

이외에도 여러 상황마다의 적용방법이 있다.

// 1. ECMAScript 모듈의 경우
const nextConfig = {
  // 옵션 코드...
};

module.exports = nextConfig;

// 2. 함수형으로 사용하는 경우
module.exports = (phase, { defaultConfig }) => {
  const nextConfig = {
    // 옵션 코드...
  };
  return nextConfig;
};

// 3. Next.js 12.1.0 이상에서는 async 함수로 사용 가능
module.exports = async (phase, { defaultConfig }) => {
  const nextConfig = {
    // 옵션 코드...
  };
  return nextConfig;
};

// 4. next/constants의 phase를 참고하여 원하는 단계(phase)에만 적용할 수 있음
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      // 개발모드 전용 옵션 코드...
    };
  }
  return {
    // 개발모드를 제외한 모든 단계(phase)에서 적용할 옵션 코드
  };
};

사용 가능한 phase 

GitHub - vercel/next.js: The React Framework

Next.config.js의 설정은 모두 '옵션'이고 필수가 아니다.

따라서 필요한 설정만 찾아서 변경을 하는 것을 추천한다고 한다.

전체 옵션은 Github에서 확인할 수 있으나, 모든 옵션을 볼 필요는 없고 필요한 feature들만 검색해서 변경하면 된다.

Next.js 공식 문서에서 해당 내용들을 확인할 수 있다.

next.config.js: Introduction | Next.js

---

아래는 자주 사용하는 다섯가지 next.config.js 옵션들이다.

Redirects

Redirects를 사용하면 들어오는 request 경로를 다른 destination 경로로 Redirect할 수 있다.

Redirects을 사용하려면 next.config.js에서 redirects 키를 사용할 수 있다.

이때는 이름 그대로 Redirect 되는 것 이기 때문에 페이지 내용과 함께 url도 바뀐다.

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

위 코드의 경우, 사용자가 /about경로에 접근하면 바로 / 루트 페이지로 리다이렉트 시켜버린다.

넣을 수 있는 옵션은 source, destination, permanent 가 있다.

• source: 사용자가 접근하는 요청 경로 패턴
• destination: source 에 맞는 패턴 경로로 들어온 사용자들을 라우팅(Redirect)할 경로
• permanent(Boolean) : true면 클라이언트/검색 엔진에 리디렉션을 영구적으로 캐시하도록 지시하는 308 상태 코드를 사용하고, false면 307 임시 상태 코드를 사용해 캐시되지 않도록 한다.
• * : 이후에 어떤 url이라도 그대로 가져온다.

// pattern-matching X
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async redirects() {
    return [
      {
        source: '/sub',
        destination: '/detail',
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

// pattern-matching O
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async redirects() {
    return [
      {
        source: '/old/:path*',
        destination: '/new/:path*',
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

next.config.js: Redirects | Next.js

---

Rewrites

Rewrites는 Redirect와 매우 유사하다.

다만, Rewrites의 경우 url을 바꾸지 않고, 페이지 내용만 다른 경로의 페이지로 매핑해서 보여준다.

즉, redirect는 페이지 내용과 url이 모두 바뀌지만, rewrites는 url은 유지된 채 페이지 내용만 변경되는 것이 차이점이다.

const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/',
      },
    ];
  },
};

next.config.js: Rewrites | Next.js

---

Environment Variables

next.config.js 파일의 env 옵션에 환경 변수를 추가하여 사용할 수 있다.

module.exports = {
  env: {
    customKey: 'my-value',
  },
};

위와 같이 추가함 경우, 코드에서 바로 process.env.KEY 형식으로 환경 변수에 접근할 수 있다.

export default function Page(){
  return <h1>The value of customKey is : {ProcessingInstruction.env.KEY}</h1>
}

이렇게 설정을 해주면, Next는 빌드 시간에 process.env.KEY 를 my-value 라는 값으로 대체한다.

따라서, 빌드를 한 후 아래와 같이 나타난다:

return <h1>The value of KEY is: {'my-value'}</h1>;

---

Base Path

만약 Next 프로젝트를 서브도메인 혹은 서브 path로 배포하고 싶다면 basePath 옵션을 설정할 수 있다.

기본적으로 base path는 / 루트 path로 설정되어 있는데, 해당 옵션을 추가하여 내가 원하는 도메인을 루트 도메인으로 변경할 수 있다.

예를 들어 /docs 라는 basePath를 설정하면, 모든 페이지들이 /docs 라는 경로 아래에 추가된다.

module.exports = {
  basePath: '/docs',
};

해당 설정은 빌드 타임에 세팅 되므로 값을 변경하고 싶다면 꼭 re-building 단계를 거쳐야한다.

basePath를 설정하면 next/link 와 next/router 의 기본 루트 경로도 해당 basePath로 기본 설정이 된다.

예를 들어 <Link href="/about"> 라는 next/link 태그를 사용하면, 해당 링크는 /about가 아닌 /docs/about 경로로 적용된다.

import Link from 'next/link';

export default function HomePage() {
  return (
    <>
      <Link href='/about'>About Page</Link>
    </>
  );
}

위 페이지의 HTML결과

<a href='/docs/about'>About Page</a>;

---

Custom Webpack Config

next.config.js 파일에서 커스텀 Wepack 설정을 할 수도 있다.

예외 사항이 있으니 자세한 내용은 Next.js 공식 문서 : Custom Webpack Config를 참고하면 된다.

next.config.js: Custom Webpack Config | Next.js

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, wepack }) => {
    // 중요 : 수정된 config를 반환할 것
    return config;
  },
};

webpack 함수에 대한 두 번째 인수 객체는 아래과 같다

• buildId(String): 빌드 간의 고유 식별자로 사용되는 빌드 ID
• dev(Boolean): 컴파일을 개발 중에 수행할지 여부를 나타내는 필드
• isServer(Boolean): 서버 측 컴파일의 경우 true이고, 클라이언트 측 컴파일은 false로 적용
• nextRuntime(String | undefined): 서버 컴파일의 target 런타임. "edge" 또는 "nodejs"로 적용하고, 클라이언트 컴파일은 "undefined"로 적용
• defaultLoaders(Object): Next.js에서 내부적으로 사용하는 기본 로더babel(Object): 기본 babel-loader 구성

---

Redirect와 Rewirtes를 사용하여 API Key숨기기

API Key 를 숨겨야 하는 이유

• 유료 결제한 API Key 일 수 있다.
• API 사용 횟수가 제한되는 경우가 있다.
• API Key 를 누군가 남용할 수도 있다.

API를 요청할 때 네트워크에서 API key 가 쉽게 노출된다.

Redirect 사용

유저를 Redirect시켜 url을 변경한다.

API Key 자체를 숨기지는 않는다.

위와 동일한 코드다.( redirects 함수는 비동기적으로 동작하므로 async를 작성한다.)

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async redirects() {
    return [
      {
        source: '/sub',
        destination: '/detail',
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

Rewirtes 사용

유저를 Redirect 시키지만 url은 바뀌지 않아서 유저가 알 수 없다.

API Key를 직접 숨기는 방법이다.

Redirects와 대부분 동일하지만 Rewrites 를 활용해서 가짜 API url을 만들어 주고 컴포넌트에서 가짜 API url을 사용하면 API key를 숨길 수 있다.

추가로 API key를 .env파일에 작성해 관리하면 API Key를 숨기는 보다 나은 방법이다. (물론 이것도 털릴 수는 있다.)

// next.config.js
const API_KEY = process.env.NEXT_PUBLIC_API_KEY;

async rewrites() {
  return [
    {
      source: '/api/movies',
      destination: `https://...?api_key=${API_KEY}`,
    },
  ];
},

// .env
NEXT_PUBLIC_API_KEY=xxxxxxxxxxxxxxxxxxxxx