[nextjs] next.config.js 기초 정리

nextjs에서 환경설정을 하고, custom한 설정(configuration of Next.js)을 하기위해서 next.config.js를 사용하면 된다. next.config.js에 대한 기초적인 지식부터 심화 부분까지 정리해 보자.

 

 

우선은 실무단계에서 기본적으로 크게 development 단계와 deployment 단계로 구분한다. 배포를 하는 setting과 개발 setting를 다르게 해야한다. dotenv를 많이 사용하여, env.dev와 env.prod 사용하여 환경변수 설정을 해도 되지만, frontend 개발자라면, 아래와 같이 next.config.js 로 설정하는 방법도 알아두자.

 

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

 

위의 코드를 처음본다면, 이 글을 정독하기 바란다.

 

0. nextjs.config.js 생성위치 및 기본 세팅

기본적인 생성위치는 package.json 과 같은 디렉토리에 생성을 한다. 기본적으로 애래와 같이 생성을 하면 된다.

// next.config.js

const nextConfig = {
  /* config options here */
}

module.exports = nextConfig

 

만약 ECMAScript modules로 개발을 한다면 아래와 같이 next.config.mjs 파일을 만들어주면된다.

// next.config.mjs

const nextConfig = {
  /* config options here */
}

export default nextConfig

 

위의 형식과 다르게 함수를 사용하여 구성하는 것도 아래와 같이 가능하다. 12.1.0 버전 부터는 async function을 사용하는 것도 가능해졌다. 따라서 구현 상황에 따라 구현은 진행하면 된다.

// 일반 함수 사용
module.exports = (phase, { defaultConfig }) => {
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

// async 함수 사용
module.exports = async (phase, { defaultConfig }) => {
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

 

인자로 들어오는 phase 에 대해 먼저 알아보자.

• phase : 설정이 세팅되는 환경을 가지고 있다. 즉, phase를 사용하면, 개발환경인지 배포 환경인지를 분기하는 것이 가능하다.

 

1. PHASE_DEVELOPMENT_SERVER 활용하기

phase를 사용하는 기본 세팅은 아래와 같다.

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* development only config options here */
    }
  }

  return {
    /* config options for all phases except development here */
  }
}

 

if 분기로 나눠진 위/아래의 return 중, 위의 return 부분을 보면 개발 환경에서의 설정(config)를 넣는 부분이다. 아래 return 부분은 배포 환경에서의 설정(config)이다. 우리가 이러한 것을 배웠다고 해서 반드시 사용해야할 필요는 없다. 즉, 필수적으로 이해해야하는 부분은 아니라는 말이다. next.config.js 설정이 필요한지 필요하지 않는지에 대한 고민을 한 후에 사용을 하자. (모르고 시작하면, 개발 시간이 더 길어질 수 있음...) 추가로 next.config.js는 webpack, babel, typescript들로 해석이(parse) 되지 않는다.

 

 

2. next.config.js 참고 실습

아래의 내용과 같이 사용가능하다. 그리고 개발/배포를 분리하려면 위의 방식처름 phase를 사용하여 분리하는 로직을 추가해 주면된다.

 

export const defaultConfig: NextConfig = {
  env: {},
  webpack: null,
  webpackDevMiddleware: null,
  eslint: {
    ignoreDuringBuilds: false,
  },
  typescript: {
    ignoreBuildErrors: false,
    tsconfigPath: 'tsconfig.json',
  },
  distDir: '.next',
  cleanDistDir: true,
  assetPrefix: '',
  configOrigin: 'default',
  useFileSystemPublicRoutes: true,
  generateBuildId: () => null,
  generateEtags: true,
  pageExtensions: ['tsx', 'ts', 'jsx', 'js'],
  target: 'server',
  poweredByHeader: true,
  compress: true,
  analyticsId: process.env.VERCEL_ANALYTICS_ID || '',
  images: imageConfigDefault,
  devIndicators: {
    buildActivity: true,
    buildActivityPosition: 'bottom-right',
  },
  onDemandEntries: {
    maxInactiveAge: 15 * 1000,
    pagesBufferLength: 2,
  },
  amp: {
    canonicalBase: '',
  },
  basePath: '',
  sassOptions: {},
  trailingSlash: false,
  i18n: null,
  productionBrowserSourceMaps: false,
  optimizeFonts: true,
  webpack5: undefined,
  excludeDefaultMomentLocales: true,
  serverRuntimeConfig: {},
  publicRuntimeConfig: {},
  reactStrictMode: false,
  httpAgentOptions: {
    keepAlive: true,
  },
  outputFileTracing: true,
  staticPageGenerationTimeout: 60,
  swcMinify: false,
  output: !!process.env.NEXT_PRIVATE_STANDALONE ? 'standalone' : undefined,
  experimental: {
    optimisticClientCache: true,
    runtime: undefined,
    manualClientBasePath: false,
    // TODO: change default in next major release (current v12.1.5)
    legacyBrowsers: true,
    browsersListForSwc: false,
    // TODO: change default in next major release (current v12.1.5)
    newNextLinkBehavior: false,
    cpus: Math.max(
      1,
      (Number(process.env.CIRCLE_NODE_TOTAL) ||
        (os.cpus() || { length: 1 }).length) - 1
    ),
    sharedPool: true,
    profiling: false,
    isrFlushToDisk: true,
    workerThreads: false,
    pageEnv: false,
    proxyTimeout: undefined,
    optimizeCss: false,
    nextScriptWorkers: false,
    scrollRestoration: false,
    externalDir: false,
    disableOptimizedLoading: false,
    gzipSize: true,
    swcFileReading: true,
    craCompat: false,
    esmExternals: true,
    appDir: false,
    // default to 50MB limit
    isrMemoryCacheSize: 50 * 1024 * 1024,
    incrementalCacheHandlerPath: undefined,
    serverComponents: false,
    fullySpecified: false,
    outputFileTracingRoot: process.env.NEXT_PRIVATE_OUTPUT_TRACE_ROOT || '',
    swcTraceProfiling: false,
    forceSwcTransforms: false,
    swcPlugins: undefined,
    swcMinifyDebugOptions: undefined,
    largePageDataBytes: 128 * 1000, // 128KB by default
    disablePostcssPresetEnv: undefined,
    amp: undefined,
    urlImports: undefined,
    modularizeImports: undefined,
  },
}

 

위의 내용이 전부다 이해가 되진 않을 것이다. 추가 내용을 통해 위의 셋팅을 조금씩 이해해 보자.

 

3. 실습하기

우선은 nextjs를 통해서 프로젝트를 만들자.

$ npx create-next-app@latest

 

자동으로 아래와 같은 next.config.js 파일이 생성되어 있을 것이다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

 

reactStrictMode : 관련 설명은 여기를 눌러서 확인하자.

swcMinifty : 관련 설명은 여기를 눌러서 확인하자.

 

 

 

 

 

4. next.config.js 추가 기능 넣기

여기서 부터는 3~7일 간격으로 계속해서 추가 예정이다.

3-1. next.config.js에서 환경변수(Environment Variables) 추가하기

 

3-2. next.config.js에서 base path 주소 추가하기 

 

3-3. next.config.js에서 요청 path를 다른 path로 변경하기

 

3-4. next.config.js에서 조건에 따라 redirects 시키기

 

3-5. next.config.js에서 Header/cookie 세팅하기