• https://www.typescriptlang.org/ko/docs/handbook/tsconfig-json.html
• https://www.typescriptlang.org/docs/handbook/compiler-options.html

TypeScript는 지원을 제공하며, tsconfig.json 파일을 통해 프로젝트 설정을 관리할 수 있습니다.

이번 글에서는 Next.js에서 최적의 TypeScript 설정과 경로 별칭(Path Alias) 설정 방법을 정리하겠습니다.

tsconfig.json 설정

📌 Next.js 프로젝트에서 추천하는 tsconfig.json 설정

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": {
      "@app_domain/*": ["./src/app/(domain)/*"],
      "@app_api/*": ["./src/app/api/*"],
      "@shared/*": ["./src/shared/*"],
      "@styles/*": ["./src/styles/*"],
      "@lib/*": ["./src/lib/*"],
      "@domains/*": ["./src/domains/*"],
      "@tests/*": ["./src/tests/*"],
      "@public/*": ["./public/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "build/types/**/*.ts"],
  "exclude": ["node_modules"]
}

핵심 설정 요약

TypeScript 컴파일 옵션

• "target": "esnext" → 최신 ESNext 문법 사용
• "strict": true → 엄격한 타입 검사 활성화
• "noEmit": true → JavaScript 파일 생성 방지 (Next.js 빌드 시스템 활용)
• "moduleResolution": "bundler" → 번들러 기반의 모듈 해석 사용
• "jsx": "preserve" → JSX 변환을 Next.js에서 처리하도록 설정

경로 별칭(Path Alias) 설정