개발 서버 실행 및 기본 설정

 Next.js 프로젝트를 시작하고 개발하기 위해서는 개발 서버를 실행하고 기본 설정을 이해하는 것이 중요합니다. 이 절에서는 개발 서버 실행 방법과 주요 설정 옵션에 대해 알아보겠습니다.

개발 서버 실행

 Next.js 개발 서버를 실행하려면 프로젝트 루트 디렉토리에서 다음 명령어를 사용합니다.

npm run dev

 이 명령어는 기본적으로 http://localhost:3000에서 개발 서버를 시작합니다.

주요 npm 스크립트

 package.json 파일에는 다음과 같은 주요 npm 스크립트가 정의되어 있습니다.

• dev : 개발 서버를 실행합니다.
• build : 프로덕션용 애플리케이션을 빌드합니다.
• start : 프로덕션 모드에서 Next.js 서버를 시작합니다.
• lint : ESLint를 사용하여 코드를 검사합니다.

 예를 들어, 프로덕션 빌드를 생성하려면 다음 명령어를 사용합니다.

npm run build

next.config.js 파일

 next.config.js 파일은 Next.js 프로젝트의 고급 설정을 위해 사용됩니다. 이 파일의 기본 구조는 다음과 같습니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 설정 옵션들
}
 
module.exports = nextConfig

 자주 사용되는 설정 옵션의 예

1. 리디렉션 설정

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/new-blog/:slug',
        permanent: true,
      },
    ]
  },
}

2. 환경 변수 설정

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

3. 웹팩 설정 커스터마이징

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // 커스텀 웹팩 설정
    return config
  },
}

4. 이미지 최적화 도메인 설정

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

배포와의 연결

 이 절에서 다루는 개발 서버 실행과 기본 설정은 15장의 배포 부분과 밀접하게 연관됩니다. 개발 환경에서 설정한 내용들은 프로덕션 환경에서도 적용되며, next.config.js의 설정은 배포 시 중요한 역할을 합니다. 예를 들어, 환경 변수 설정이나 리디렉션 규칙은 배포된 애플리케이션의 동작에 직접적인 영향을 미칩니다.

실습 : 개발 서버 포트 및 환경 변수 설정

1. 특정 포트에서 개발 서버 실행하기 package.json 파일의 scripts 섹션을 다음과 같이 수정합니다.

"scripts": {
  "dev": "next dev -p 3001",
  "..."
}

 이제 npm run dev를 실행하면 개발 서버가 포트 3001에서 시작됩니다.

2. 환경 변수 설정하기

 프로젝트 루트에 .env.local 파일을 생성하고 다음 내용을 추가합니다.

API_URL=https://api.example.com

 그리고 next.config.js 파일에 다음 내용을 추가합니다.

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

 이제 애플리케이션 전체에서 process.env.API_URL을 통해 이 환경 변수에 접근할 수 있습니다.

 이러한 설정을 통해 개발 환경을 커스터마이즈하고, 프로젝트의 특정 요구사항에 맞게 Next.js를 구성할 수 있습니다.

 개발 서버 실행과 기본 설정을 잘 이해하면, 효율적인 개발 프로세스를 구축하고 원활한 배포를 준비할 수 있습니다.