Published On

Next.js Configuration: next.config.mjs

nextjs configuration

next.config.mjs는 Next.js 애플리케이션의 설정 파일로, 빌드 및 런타임 동작을 커스터마이즈할 수 있습니다. Next.js 14 버전에서는 다양한 기능이 포함되어 있습니다.

먼저 본론으로 들어가기 전에 확장자 .js와 .mjs에 대해서 비교하겠습니다.

mjs vs js

  • mjs 확장자는 ECMAScript 모듈(ES 모듈)을 명시적으로 사용하는 파일을 나타냅니다.

  • ES 모듈은 JavaScript의 최신 표준 모듈 시스템으로, import와 export 구문을 사용합니다.

특징.mjs 파일.js 파일
모듈 시스템ES 모듈 (ECMAScript Modules)CommonJS 모듈 시스템
사용 구문import / exportrequire / module.exports
로드 방식비동기 로드동기 로드
엄격 모드기본적으로 엄격 모드 적용 (strict mode)기본적으로 엄격 모드가 적용되지 않음
Node.js 설정Node.js에서 사용하려면 --experimental-modules 플래그 또는 package.json에 type: "module" 설정 필요별도의 설정 없이 기본적으로 지원
파일 확장자.mjs.js
브라우저 호환성브라우저에서 직접 사용 가능브라우저에서 직접 사용하려면 번들링 필요
스코프모듈 스코프모듈 스코프
사용 사례최신 JavaScript 표준을 따르는 모듈 시스템 필요 시전통적인 Node.js 환경에서 널리 사용
기능 공유 방법export로 내보내고, import로 가져옴module.exports로 내보내고, require로 가져옴
모듈 해석 방식파일 경로에서 확장자를 명시해야 함확장자를 명시하지 않아도 자동으로 해석 가능

주요 기능 및 설정 옵션들

Custom Webpack Config

Webpack 설정을 확장하거나 수정할 수 있습니다.

next.config.mjsjavascript
export default {
  webpack(config, options) {
    // custom webpack configurations
    return config;
  }
};

예를 들어, 특정 파일 형식을 처리하기 위한 로더를 추가할 수 있습니다.

next.config.mjsjavascript
export default {
  webpack(config, options) {
    config.module.rules.push({
      test: /\.mdx$/,
      use: [
        options.defaultLoaders.babel,
        '@mdx-js/loader'
      ]
    });

    return config;
  }
};

다국어 지원

  • Internationalization (i18n)

이 설정을 통해 다양한 언어로 웹사이트를 제공할 수 있으며, Next.js는 언어별 경로를 자동으로 처리해줍니다.

next.config.mjsjavascript
export default {
  i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
  }
};

Redirects

URL 리다이렉트를 설정할 수 있습니다.

리다이렉트는 사용자가 특정 URL로 접근할 때 다른 URL로 이동시키는 데 사용됩니다.

next.config.mjsjavascript
export default {
  async redirects() {
    return [
      {
        source: '/old-url',
        destination: '/new-url',
        permanent: true,
      },
    ];
  }
};

Rewrites

URL 재작성 설정.

리라이트는 URL을 변경하지 않고 내부적으로 다른 경로로 연결합니다.

next.config.mjsjavascript
export default {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/about-us',
      },
    ];
  }
};

Headers

커스텀 HTTP 헤더 설정.

특정 경로에 대해 HTTP 헤더를 추가할 수 있습니다.

next.config.mjsjavascript
export default {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Custom-Header',
            value: 'my custom header value',
          },
        ],
      },
    ];
  }
};

Image Optimization

이미지 최적화 설정.

next.config.mjsjavascript
export default {
  images: {
    domains: ['example.com'],
  }
};

React Strict Mode

React의 엄격 모드를 활성화하여 잠재적인 문제를 조기에 발견합니다.

  • 기본값은 true이며, 개발모드에서만 실핼되며, console.log()가 두 번씩 나오는 원인입니다.

  • false로 설정 시 console.log()가 1번만 나오나, 디버깅에 불리하여 추천드리진 않습니다.

next.config.mjsjavascript
export default {
  reactStrictMode: true,
};

다음 포스트

LocalStorage, SessionStorage, Cookie 비교

연관된 포스트 구경가기

1. Next.js 란?2. Next.js - middleware3. Next.js - route handler4. Next.js Pages Router5. Next.js(pages-router) - data fetching6. Next.js - dynamic import7. Next.js에서 Head 컴포넌트 사용 방법8. Next.js의 폴더 구조 분석9. Next.js에서 메타데이터 다루기10. Next.js(app-router) - data fetching11. Next.js runtime12. Next.js 패러렐 라우트, 인터셉팅 라우트13. Next.js에서 Font를 설정하는 방법14. Next.js - Server Actions15. Next.js Image 컴포넌트16. Next.js 빌드 과정과 Webpack, Babel17. Next.js Configuration: next.config.mjs18. Next.js 커스텀 서버19. Next.js의 렌더링 과정
간략히