시스템 요구 조건

Getting Started: Installation

• Node.js 18.18 or later.
• macOS, Windows (including WSL), or Linux.

1. Next.js 설치 시작

1. 원하는 폴더 위치에 다음의 명령어를 실행한다.

   npx create-next-app@latest
   

   What is your project named? my-app
   Would you like to use TypeScript? No / Yes
   Would you like to use ESLint? No / Yes
   Would you like to use Tailwind CSS? No / Yes
   Would you like your code inside a `src/` directory? No / Yes
   Would you like to use App Router? (recommended) No / Yes
   Would you like to use Turbopack for `next dev`?  No / Yes
   Would you like to customize the import alias (`@/*` by default)? No / Yes
   What import alias would you like configured? @/*
   

   

   기본적인 next-js 앱 프로젝트 폴더가 만들어졌다.

   • package.json

2. Cursor AI 코드 에디터를 이용할 것이므로 다음의 명령어를 통해 에디터를 열어 준다.

   cursor barleymilk-introduce
   

2. 타입스크립트 버전 지정

• 세그먼트 설정 옵션에 잘못된 값이 전달될 경우 경고
• 사용 가능한 옵션과 문맥 내 문서 표시
• use client 지시어가 올바르게 사용되었는지 확인
• 클라이언트 훅(예: useState)이 Client Components에서만 사용되는지 확인

설정하기

1. 위의 링크에 들어가서 타입스크립트 지원을 자동화하는 확장 프로그램을 설치한다.
2. 설치한 플러그인 활성화하기
   1. Ctrl + Shift + P 입력
   2. “TypeScript: Select TypeScript Version” 검색
   3. “Use Workspace Version” 선택

위의 방법이 안 되는 경우, 직접 설정하기

1. Ctrl + Shift + P 입력

2. “Preferences: Open User Settings (JSON)” 검색

3. .vscode/settings.json

   {
     "typescript.tsdk": "node_modules/typescript/lib",
   }
   

   • VSCode에서 TypeScript 서버의 위치를 지정하는 설정
   • 해당 설정으로 프로젝트에 설치된 특정 버전을 사용하게 된다.
   • 프로젝트 팀원들이 동일한 TypeScript 버전을 사용할 수 있다.