Next.js 프로젝트를 시작할 때, TypeScript와 Babel을 함께 사용하여 프로젝트를 구성하고 싶다면, 아래의 단계를 따라 간단히 설정할 수 있습니다.

1. 프로젝트 생성

먼저, 새로운 Next.js 프로젝트를 생성합니다.

npx create-next-app my-app

2. TypeScript 및 Babel 모듈 설치

터미널을 열어 아래 명령어로 typescript, @babel/preset-typescript, @babel/plugin-proposal-decorators, @babel/plugin-proposal-class-properties 모듈을 설치합니다.

npm install --save-dev typescript @babel/preset-typescript @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

3. Babel 설정

프로젝트 루트에 babel.config.js 파일을 생성하고, 아래와 같이 Babel 설정을 추가합니다.

module.exports = {
  presets: ['next/babel', '@babel/preset-typescript'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]
};

4. TypeScript 설정

프로젝트 루트에 tsconfig.json 파일을 생성하고, 필요한 TypeScript 설정을 추가합니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "exclude": ["node_modules"]
}

5. 서버 시작

이제, TypeScript와 Babel 설정이 완료되었습니다. 프로젝트를 시작하고 개발 서버를 실행합니다.

npm run dev

이제, Next.js 프로젝트에 TypeScript와 Babel을 함께 사용하는 설정이 완료되었습니다. 이제부터는 타입 안정성과 최신 JavaScript 기능을 함께 활용할 수 있습니다.

더 자세한 정보는 Next.js 공식 문서를 참고하세요.