티스토리 뷰

정리/프로그래밍

VS Code에서 TypeScript + Next.js 셋팅하는 방법

kevin.jeon 2025. 1. 9. 23:08
반응형

VS Code에서 TypeScript와 Next.js를 함께 사용하기 위한 환경을 설정하는 방법을 단계별로 알아보겠습니다. 🚀

1. Next.js 프로젝트 생성

먼저, 터미널에서 다음 명령어를 실행하여 TypeScript를 사용하는 Next.js 프로젝트를 생성합니다:

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

프로젝트 생성 중 나타나는 질문들에 적절히 답변해주세요.

2. VS Code 설정

  1. 생성된 프로젝트 폴더를 VS Code로 엽니다:
cd my-nextjs-app
code .
  1. VS Code에서 다음 확장 프로그램들을 설치합니다:
    • ESLint
    • Prettier - Code formatter
    • TypeScript TSLint Plugin

3. TypeScript 설정

tsconfig.json 파일이 자동으로 생성되었을 것입니다. 필요에 따라 설정을 조정할 수 있습니다.

4. ESLint 및 Prettier 설정

  1. .eslintrc.json 파일을 생성하고 다음 내용을 추가합니다:
{
  "extends": ["next/core-web-vitals", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
  1. .prettierrc 파일을 생성하고 다음 내용을 추가합니다:
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

5. VS Code 설정 추가

.vscode/settings.json 파일을 생성하고 다음 내용을 추가합니다:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

6. 예제 코드

이제 TypeScript와 Next.js를 사용한 간단한 예제 코드를 작성해보겠습니다. pages/index.tsx 파일을 다음과 같이 수정합니다:

import { useState } from 'react';
import Head from 'next/head';

const Home: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const incrementCount = (): void => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <Head>
        <title>TypeScript Next.js Example</title>
      </Head>
      <main>
        <h1>Welcome to Next.js with TypeScript!</h1>
        <p>Count: {count}</p>
        <button onClick={incrementCount}>Increment</button>
      </main>
    </div>
  );
};

export default Home;

이 예제는 간단한 카운터 기능을 구현한 것입니다. TypeScript를 사용하여 상태의 타입을 명시적으로 지정하고, 함수의 반환 타입도 정의했습니다.

7. 실행

프로젝트를 실행하려면 터미널에서 다음 명령어를 입력하세요:

npm run dev

이제 http://localhost:3000에서 여러분의 TypeScript + Next.js 애플리케이션을 확인할 수 있습니다! 🎉

이렇게 설정하면 VS Code에서 TypeScript와 Next.js를 효율적으로 사용할 수 있는 환경이 구축됩니다. 코드 자동 완성, 타입 체크, 린팅 등의 기능을 활용하여 더욱 생산적인 개발이 가능해집니다. 😊

반응형

'정리 > 프로그래밍' 카테고리의 다른 글

Flutter의 기본 개념과 간단한 예제  (0) 2025.01.13
Supabase: 오픈소스 백엔드 서비스의 강자  (0) 2025.01.10
리액트 강좌4 - 컴포넌트  (0) 2020.02.13
해킨토시에서 React Native 개발환경 구성하기!  (0) 2020.02.13
var, const, let 차이점 비교 및 사용 방법  (0) 2020.02.11
댓글