• CRA로 만든 프로젝트에서는 webpack config등을 커스텀 하려면, npm run eject 하거나 craco를 사용해야 했다.

next.config.js: Introduction | Next.js

next.conifg.js

• 프로젝트 root에 저장하고 설정들을 추가하면 된다.
• image-app
• server components

// next.config.js
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 */
  }
}

<aside> 💡 유의 사항 : next.config.js는 webpack, Babel, TS로 parse되지 않으니 최신 JS 문법을 쓰면 안된다.

</aside>

• 검색해서 기능을 enabled 시켜 사용할 수 있다.

종류들

1. 환경변수

// next.config.js
module.exports = {
  env: {
    customKey: 'my-value',
  },
}

// pages 실제 쓰는곳
<Title>{proccess.env.customKey}</Title>

• 서버나 빌드타임에도 사용가능하다.

2. BasePath

module.exports = {
  basePath: '/docs',
}