Next.js는 React기반의 프레임워크로, 사용자 친화적인 개발 경험과 빠른 페이지 렌더링을 제공합니다. 하지만 때로는 Next.js의 기본 빌드 시스템이나 설정으로는 원하는 결과를 얻기 어려울 수 있습니다. 이럴 때는 Next.js의 빌드 시스템을 커스터마이징하여 필요한 변경을 수행할 수 있습니다.

1. next.config.js 파일 생성

먼저 프로젝트 루트 디렉토리에 next.config.js 파일을 생성합니다. 이 파일은 Next.js의 빌드 시스템을 커스터마이징하기 위해 사용됩니다.

2. 원하는 설정 추가

next.config.js 파일을 열고 필요한 설정을 추가합니다. 이 설정은 Next.js의 빌드 시스템이 동작하는 방식을 바꾸거나, 외부 모듈과의 통합을 위한 작업을 수행하는 등 다양한 용도로 사용할 수 있습니다. 예를 들어, CSS 모듈을 사용하기 위해 다음과 같은 설정을 추가할 수 있습니다:

// next.config.js

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.module.rules.push({
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      });
    }

    return config;
  },
};

이렇게 하면 다음과 같은 동작을 수행합니다:

• .css 확장자를 가진 파일에 대해서는 style-loader와 css-loader를 사용하여 CSS 모듈을 처리합니다.
• 서버(SSR)에서는 이러한 작업을 수행하지 않습니다.

3. 빌드 스크립트 실행

이제 next.config.js 파일에 원하는 설정을 추가했으므로, 빌드 스크립트를 실행해서 변경 사항을 적용시켜야 합니다. 터미널에서 다음 명령을 실행합니다:

$ yarn build

또는

$ npm run build

위 명령은 Next.js의 빌드 시스템을 실행하여 프로젝트를 빌드합니다. 설정한 변경 사항은 이 단계에서 적용됩니다.

마무리

이렇게 Next.js에서 빌드 시스템을 커스터마이징할 수 있습니다. next.config.js 파일을 사용하여 원하는 설정을 추가하고, 빌드 스크립트를 실행하여 변경 사항을 적용할 수 있습니다. 이를 통해 Next.js를 보다 유연하고 개인적인 요구에 맞게 사용할 수 있습니다.

더 자세한 내용은 Next.js 공식 문서를 참조하시기 바랍니다.

#nextjs #빌드시스템 #커스터마이징