Next.js 15 설정 가이드: 프로젝트 맞춤형 환경 구축하기

Next.js 15는 유연하고 강력한 기능을 제공하여 다양한 프로젝트에 맞춤형 환경을 구축할 수 있도록 지원합니다. 이번 글에서는 Next.js 15의 주요 설정 옵션과 예시를 통해 프로젝트에 최적화된 설정 방법을 안내해 드리겠습니다.

1. 환경 변수 (Environment Variables)

next.config.js 파일에서 env 객체를 통해 환경 변수를 설정하고, 프로젝트 전반에서 사용할 수 있습니다.

// next.config.js
module.exports = {
  env: {
    API_URL: process.env.API_URL,
    NEXT_PUBLIC_APP_NAME: 'My Next.js App',
  },
};

• API_URL: 백엔드 API 서버 주소
• NEXT_PUBLIC_APP_NAME: 클라이언트 사이드에서 사용할 앱 이름

2. MDX 지원 (MDX Support)

MDX를 사용하여 마크다운과 JSX를 혼합하여 페이지를 작성할 수 있습니다.

// pages/blog/post.js
import { MDXRemote } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize';
import fs from 'fs';
import path from 'path';

const postFilePath = path.join(process.cwd(), 'posts', `${slug}.mdx`);
const source = fs.readFileSync(postFilePath);

const MDXContent = await serialize(source);

export default function Post({ MDXContent }) {
  return <MDXRemote {...MDXContent} />;
}

3. 디렉토리 설정 (Directory Configuration)

pageDirectory 옵션을 통해 페이지 파일이 위치한 디렉토리를 변경할 수 있습니다.

// next.config.js
module.exports = {
  pageDirectory: 'src/pages',
};

4. 초안 모드 (Draft Mode)

next.config.js에서 experimental 객체를 사용하여 초안 모드를 활성화하고, 특정 페이지를 비공개로 설정할 수 있습니다.

// next.config.js
module.exports = {
  experimental: {
    draftMode: true,
  },
};

5. 콘텐츠 보안 정책 (Content Security Policy)

next.config.js에서 publicRuntimeConfig 객체를 사용하여 CSP를 설정할 수 있습니다.

// next.config.js
module.exports = {
  publicRuntimeConfig: {
    csp: {
      'default-src': "'self'",
      'script-src': "'self' <https://www.googletagmanager.com>',
    },
  },
};

6. 디버깅 (Debugging)

• Source Maps: generateBuildId 옵션을 사용하여 소스 맵 생성을 커스터마이징할 수 있습니다.
• Custom Server: serverRuntimeConfig 옵션을 사용하여 커스텀 서버를 구축하고 디버깅할 수 있습니다.

7. PWA (Progressive Web Application)**

next.config.js에서 swcMinify 옵션을 사용하여 PWA를 위한 서비스 워커를 생성할 수 있습니다.

// next.config.js
module.exports = {
  swcMinify: true,
};

결론

Next.js 15는 다양한 설정 옵션을 제공하여 프로젝트에 맞춤형 환경을 구축할 수 있도록 지원합니다. 이 글에서 소개된 설정 옵션들을 활용하여 프로젝트에 최적화된 설정을 적용하고, 더욱 효율적인 개발을 경험해 보시기 바랍니다.

 

추가적으로 다룰 수 있는 주제:

• Next.js 플러그인: 커뮤니티에서 제공하는 다양한 플러그인을 활용하여 프로젝트를 확장하는 방법
• Next.js API Routes: 서버 사이드 API를 구축하는 방법
• Next.js 배포: Vercel, Netlify 등 다양한 플랫폼에 배포하는 방법

주의:

• next.config.js 파일의 설정은 프로젝트마다 다를 수 있습니다.
• 최신 Next.js 버전의 문서를 참고하여 정확한 설정 방법을 확인해야 합니다.