React & Next.js

Next 프로젝트의 필수 설정 파일 next.config.js 완벽 가이드

0

Next.js는 React 기반의 서버 사이드 렌더링(SSR) 프레임워크로, 성능 최적화와 SEO 개선에 매우 유리합니다. 이 프레임워크의 설정을 담당하는 핵심 파일이 바로 `next.config.js`입니다. 이번 가이드에서는 `next.config.js` 파일의 구조와 주요 설정 항목들을 쉽게 이해할 수 있도록 설명하겠습니다.

1. `next.config.js` 파일의 역할

`next.config.js`는 Next.js 애플리케이션의 설정을 관리하는 파일로, 다음과 같은 주요 역할을 수행합니다:

  • 빌드 및 개발 환경 설정
  • 웹팩(Webpack) 설정 확장
  • 환경 변수 설정
  • 리다이렉트 및 리라이트 규칙 정의
  • 이미지 최적화 설정

이 파일을 통해 애플리케이션의 다양한 동작 방식을 커스터마이징할 수 있습니다.

2. 기본 구조

`next.config.js` 파일의 기본 구조는 다음과 같습니다:

// next.config.js
module.exports = {
  reactStrictMode: true,
  // 추가 설정
}

`module.exports` 객체 내부에 다양한 설정을 추가하여 사용합니다.

3. 주요 설정 항목

1. React Strict Mode 활성화

React의 엄격 모드를 활성화하여 잠재적인 문제를 사전에 감지할 수 있습니다.

module.exports = {
  reactStrictMode: true,
}

2. 커스텀 웹팩 설정

Next.js의 기본 웹팩 설정을 확장하거나 수정할 수 있습니다.

module.exports = {
  webpack: (config, { isServer }) => {
    // 커스텀 웹팩 설정 추가
    return config;
  },
}

3. 환경 변수 설정

환경 변수를 사용하여 개발 및 배포 환경에서 필요한 설정 값을 관리할 수 있습니다.

module.exports = {
  env: {
    CUSTOM_API_ENDPOINT: process.env.CUSTOM_API_ENDPOINT,
  },
}

4. 리다이렉트 및 리라이트 설정

페이지 리다이렉트 및 URL 리라이트 규칙을 정의할 수 있습니다.

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-path',
        destination: '/new-path',
        permanent: true,
      },
    ]
  },
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://external-api.com/:path*',
      },
    ]
  },
}

5. 이미지 최적화 설정

Next.js의 이미지 최적화 기능을 사용하여 이미지 로딩 속도를 개선할 수 있습니다.

module.exports = {
  images: {
    domains: ['example.com'],
  },
}

4. 고급 설정 예제

1. 웹팩 플러그인 추가

추가적인 웹팩 플러그인을 사용하여 빌드 프로세스를 확장할 수 있습니다.

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');

module.exports = withPlugins([withImages], {
  webpack: (config) => {
    // 추가 웹팩 플러그인 설정
    return config;
  },
});

2. Custom Babel 설정

Next.js에서 Babel 설정을 확장하여 다양한 자바스크립트 기능을 사용할 수 있습니다.

module.exports = {
  babel: {
    presets: ['next/babel'],
    plugins: [['styled-components', { ssr: true }]],
  },
}

마무리

`next.config.js` 파일을 잘 이해하고 활용하면 Next.js 애플리케이션의 성능을 극대화하고 다양한 커스터마이징을 쉽게 할 수 있습니다. 이 가이드를 참고하여 여러분의 프로젝트에 필요한 설정을 적용해보세요.

Next.js 공식 문서에서 더 많은 정보를 확인할 수 있습니다.

Leave a Reply