로고

Next.js에서의 TypeScript 통합: TypeScript 설정과 활용법 소개.

작성일 :

Next.js에서의 TypeScript 통합: TypeScript 설정과 활용법 소개

TypeScript는 정적 타입을 지원하는 JavaScript의 상위 집합으로, 코드의 가독성과 안정성을 높이는 데 많은 도움을 줍니다. Next.js는 서버 사이드 렌더링(SSR)을 지원하는 React 프레임워크로, 최근 많은 인기를 끌고 있습니다. 이 글에서는 Next.js 프로젝트에 TypeScript를 통합하고, 이를 효과적으로 활용하는 방법을 설명합니다.

TypeScript 설치와 초기 설정

Next.js 프로젝트에 TypeScript를 통합하려면 먼저 필요 패키지를 설치해야 합니다. 패키지 설치는 다음 명령어로 쉽게 수행할 수 있습니다:

bash
npx create-next-app@latest my-nextjs-typescript-app --typescript

위 명령어는 Next.js 프로젝트를 생성하면서 TypeScript를 바로 설정해줍니다. 만약 기존의 Next.js 프로젝트에 TypeScript를 추가하려면 다음과 같은 단계를 따라야 합니다:

  1. 프로젝트 디렉터리로 이동합니다.
  2. 필요한 패키지를 설치합니다:
bash
npm install --save-dev typescript @types/react @types/node
  1. tsconfig.json 파일을 생성합니다:
bash
 npx tsc --init

이제 tsconfig.json 파일이 생성되었으며, TypeScript를 사용할 준비가 완료되었습니다.

TypeScript 설정 파일 tsconfig.json

tsconfig.json 파일은 TypeScript 컴파일러의 동작을 제어하는 설정 파일입니다. 이 파일에서는 프로젝트의 루트 경로, 출력 디렉터리, 대상 ECMAScript 버전 등을 지정할 수 있습니다. 예시로, Next.js 프로젝트에 적합한 기본적인 tsconfig.json 파일은 다음과 같습니다:

json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

위 설정은 기본적으로 React와 TypeScript를 잘 통합할 수 있게 준비되어 있습니다.

Next.js와 TypeScript 프로젝트 구조

Next.js와 TypeScript 프로젝트의 기본적인 디렉터리와 파일 구조는 다음과 같습니다:

.
├── node_modules
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   └── index.tsx
├── public
├── styles
├── tsconfig.json
├── next-env.d.ts
└── package.json
  • pages: Next.js의 각 페이지를 나타내는 폴더입니다. 각 파일은 하나의 라우트(route)를 나타냅니다.
  • public: Static 파일들이 위치하는 폴더입니다.
  • styles: CSS 파일들이 위치하는 폴더입니다.
  • tsconfig.json: TypeScript 설정 파일입니다.
  • next-env.d.ts: Next.js의 TypeScript 지원을 위한 타입 선언 파일입니다.
  • package.json: 프로젝트의 패키지 의존성을 관리합니다.

TypeScript와 함께 컴포넌트 작성하기

TypeScript와 Next.js를 함께 사용하려면, 컴포넌트 파일의 확장자를 .tsx로 지정합니다. 예를 들어, 단순한 React 컴포넌트를 작성할 때는 다음과 같습니다:

tsx
import React from 'react';

interface Props {
  title: string;
}

const MyComponent: React.FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

export default MyComponent;

이 소스 코드에서는 컴포넌트의 Props 인터페이스를 정의하여 title 속성이 문자열 타입임을 명시했습니다. 이로 인해 컴포넌트를 사용할 때 타입 오류를 방지할 수 있습니다.

TypeScript로 API 라우트 작성하기

Next.js에서는 API 라우트도 TypeScript로 작성할 수 있습니다. 예시로, 단순한 API 엔드포인트를 만드는 코드는 다음과 같습니다:

tsx
import { NextApiRequest, NextApiResponse } from 'next';

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ message: 'Hello, TypeScript!' });
};

export default handler;

위 예시에서 NextApiRequest와 NextApiResponse를 사용하여 API 요청과 응답의 타입을 지정했습니다.

TypeScript와 함께 활용할 수 있는 도구

ESLint

TypeScript와 함께 ESLint를 활용하면 코드 품질을 높일 수 있습니다. 설정 방법은 다음과 같습니다:

  1. 필요한 패키지를 설치합니다:
bash
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
  1. 프로젝트 루트에 .eslintrc.json 파일을 생성하고 다음과 같이 설정합니다:
json
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals"
  ]
}

Prettier

코드 포매팅 도구인 Prettier도 TypeScript와 함께 사용할 수 있습니다. 설정 방법은 다음과 같습니다:

  1. 필요한 패키지를 설치합니다:
bash
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
  1. .eslintrc.json 파일을 다음과 같이 수정합니다:
json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ]
}
  1. 프로젝트 루트에 .prettierrc 파일을 생성하고 원하는 포매팅 옵션을 설정합니다.
json
{
  "singleQuote": true,
  "trailingComma": "all"
}

테스트

TypeScript와 Next.js를 함께 사용할 때 테스트도 중요한 요소입니다. Jest를 활용해 테스트를 작성하고 실행할 수 있습니다. 예시로, Jest를 설정하는 방법은 다음과 같습니다:

  1. 필요한 패키지를 설치합니다:
bash
npm install --save-dev jest @types/jest ts-jest
  1. 프로젝트 루트에 jest.config.js 파일을 생성하고 다음과 같이 설정합니다:
js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testPathIgnorePatterns: ['/node_modules/', '/.next/'],
};

결론

Next.js와 TypeScript를 통합하면 코드의 안전성과 가독성을 높일 수 있습니다. 이 글에서는 초기 설정부터 활용법, 그리고 함께 사용할 수 있는 도구들에 대해 살펴보았습니다. 이제 Next.js와 TypeScript를 결합하여 더 나은 웹 애플리케이션을 개발할 수 있는 준비가 되셨기를 바랍니다.