next.config.js 커스터마이징

소개

Next.js 애플리케이션의 동작을 세부적으로 제어하고 싶으신가요? next.config.js 파일을 통해 애플리케이션을 원하는 대로 커스터마이징하는 방법을 알아보겠습니다.

next.config.js 기본 구조

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 기본 설정
  reactStrictMode: true,
  // 여기에 추가 설정
}

module.exports = nextConfig

런타임 구성 설정하기

런타임 구성에는 두 가지 유형이 있습니다:

서버 런타임 구성

const nextConfig = {
  serverRuntimeConfig: {
    userEndpoint: 'https://api.example.com/users',
    secretKey: process.env.SECRET_KEY,
  }
}

공개 런타임 구성

const nextConfig = {
  publicRuntimeConfig: {
    apiUrl: 'https://api.example.com',
    appName: 'My Next.js App',
  }
}

런타임 구성 사용하기

import getConfig from 'next/config'

function MyComponent() {
  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()

  // publicRuntimeConfig는 클라이언트와 서버 모두에서 접근 가능
  console.log(publicRuntimeConfig.apiUrl)

  // serverRuntimeConfig는 서버에서만 접근 가능
  if (typeof window === 'undefined') {
    console.log(serverRuntimeConfig.secretKey)
  }

  return <div>설정 테스트</div>
}

리다이렉트 설정하기

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true, // 308 상태 코드
      },
      {
        source: '/blog/:slug',
        destination: '/articles/:slug', // 동적 경로도 지원
        permanent: false, // 307 상태 코드
      },
      {
        // 와일드카드 패턴 사용
        source: '/docs/:path*',
        destination: '/documentation/:path*',
        permanent: false,
      }
    ]
  }
}

커스텀 헤더 추가하기

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*', // 모든 경로에 적용
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY'
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff'
          }
        ]
      },
      {
        source: '/api/:path*',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: '*'
          }
        ]
      }
    ]
  }
}

환경별 설정 관리하기

module.exports = (phase, { defaultConfig }) => {
  // 개발 환경과 프로덕션 환경 구분
  const isDev = phase === PHASE_DEVELOPMENT_SERVER
  const isProd = phase === PHASE_PRODUCTION_BUILD

  return {
    // 환경별 설정
    env: {
      API_URL: isDev 
        ? 'http://localhost:3000/api' 
        : 'https://api.production.com',
    },
    // 이미지 도메인 설정
    images: {
      domains: isDev 
        ? ['localhost'] 
        : ['production-cdn.com'],
    },
    // 기타 환경별 설정...
  }
}

주의사항

설정 유형	주의사항
런타임 구성	정적 최적화가 비활성화됨
리다이렉트	설정 변경 시 서버 재시작 필요
커스텀 헤더	보안 관련 헤더 신중히 설정
환경 변수	클라이언트에 노출되지 않도록 주의

실전 활용 예시

API 프록시 설정

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: `${process.env.API_URL}/:path*`
      }
    ]
  }
}

웹팩 설정 커스터마이징

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // 웹팩 설정 수정
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    })

    return config
  }
}

마치며

next.config.js는 Next.js 애플리케이션의 동작을 세밀하게 제어할 수 있는 강력한 도구입니다. 하지만 설정이 복잡해질수록 유지보수가 어려워질 수 있으므로, 필요한 설정만 신중하게 추가하는 것이 좋습니다.