Next.js의 기존 프로젝트에서 ts 추가하는 법

ts

✅ 1. TypeScript 패키지 설치

bash

 

npm install --save-dev typescript @types/react @types/node

• typescript: TypeScript 컴파일러
• @types/react, @types/node: React와 Node.js의 타입 정의 파일

---

✅ 2. tsconfig.json 자동 생성

bash

 

npx tsc --init

또는 Next.js가 자동으로 생성하도록 하기:

bash

 

touch tsconfig.json npm run dev

🚀 npm run dev 실행 시, Next.js가 기본 tsconfig.json 파일을 자동으로 생성해 줌.

---

✅ 3. 파일 확장자 변경

프로젝트 내의 파일들을 .js → .ts 또는 .tsx로 변경.

• 컴포넌트 파일 → .tsx
• 서버 액션 및 API 라우트 파일 → .ts

📌 예시:

• pages/index.js → pages/index.tsx
• app/api/payment/route.js → app/api/payment/route.ts

---

✅ 4. ESLint & Prettier 타입스크립트 지원 추가 (선택 사항)

bash

 

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

📌 .eslintrc.json 설정 추가

json

 

{
  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"]
}

---

✅ 5. Next.js 타입 지원을 위한 설정

Next.js에서 제공하는 next 타입을 활용하려면 각종 API, Hook 등에 타입을 적용할 수 있다.

📌 예제: app/page.tsx

tsx

 

'use client';

import { useState } from "react";

export default function Home() {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <h1>TypeScript 적용 완료 🎉</h1>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
}

---

✅ 6. 프로젝트 실행 및 타입 검사

bash

 

npm run dev

🚀 Next.js가 타입스크립트 설정을 감지하여 자동으로 적용된다.

🔥 이제 기존 프로젝트가 TypeScript 기반으로 변경된다. 🚀

기타적인 오류 <

'--jsx' 플래그를 제공하지 않으면 JSX를 사용할 수 없습니다. 라는 말이 뜨면?

 

이 오류는 TypeScript 설정(tsconfig.json)에서 JSX 지원이 활성화되지 않았기 때문에 발생. 해결하려면 tsconfig.json 파일을 수정해야 한다.

---

✅ 해결 방법: tsconfig.json 설정 변경

1. 프로젝트 루트에 있는 tsconfig.json 파일을 열어 다음과 같이 수정.

📌 🔧 tsconfig.json 예시

json

 

{
  "compilerOptions": {
    "jsx": "preserve", // JSX를 지원하도록 설정
    "strict": true,
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowJs": true,
    "noEmit": true
  }
}

✅ "jsx": "preserve" → JSX를 지원하도록 설정함.
✅ "allowJs": true → 기존 JS 파일도 함께 사용할 수 있도록 설정.

---

✅ 설정 적용 후, 프로젝트 재시작

설정이 적용되도록 프로젝트를 다시 시작하자.

bash

 

npm run dev

 

이미 tsconfig.json에 설정되어 있다면

 

---

✅ 1. node_modules 및 .next 폴더 삭제 후 재설치

bash

 

rm -rf node_modules .next npm install npm run dev

👉 의존성 문제로 발생할 수 있으므로 한 번 삭제 후 재설치.

---

✅ 2. TypeScript 버전 확인 및 업데이트

TypeScript 버전이 너무 낮으면 오류가 발생할 수 있다. 최신 버전으로 업데이트하자.

(근데 보통 지금 깔면, 최신 버전일 것. 예전에 했다면 업데이트하고, 아니면 넘어가시오.)

bash

 

npm update typescript --save-dev

🔹 업데이트 후 버전 확인

bash

 

npx tsc --version

(최신 버전인지 확인하고, 너무 낮으면 npm install --save-dev typescript@latest로 업데이트)

---

✅ 3. VS Code에서 TypeScript 버전 강제 설정

VS Code 내부적으로 다른 TypeScript 버전을 사용할 수도 있다.

1. VS Code에서 F1 또는 Ctrl+Shift+P를 눌러 명령어 팔레트 실행
2. "TypeScript: Select TypeScript Version" 검색 후 선택
3. "Use Workspace Version" 선택

설정을 적용한 후 VS Code를 재시작. (근데 이렇게까지 안 해도 ㄱㅊ)

---

✅ 4. Next.js와 TypeScript 리스타트

Next.js가 TypeScript 설정을 감지하지 못했을 수도 있다.
다음 명령어를 실행하여 초기화.

bash

 

npx next telemetry disable 
npx next build 
npm run dev

---

이 단계를 거치면 --jsx 플래그 관련 오류가 해결될 가능성이 높다! 🚀

이후 tsx가 변경 에러가 떠도, vs code를 다시 껐다가 켜면 에러 메시지가 사라질 것.