[React 여정 시작] 1-2. 프로젝트를 만들어봅시다.

1️⃣ node js 설치

# fnm 다운로드 및 설치
winget install Schniz.fnm

# Node.js 다운로드 및 설치
fnm install 22

# Node.js 버전 확인
node -v

# npm 버전 확인
npm -v

 

 

2️⃣ 프로젝트 생성

2️⃣➖1️⃣ 자동설치

npx create-next-app@latest

# 프로젝트 이름
What is your project named?  my-app
# TypeScript 사용여부
Would you like to use TypeScript?  No / Yes
# ESLint 사용여부
Would you like to use ESLint?  No / Yes
# Tailwind CSS 사용여부(UI키트)
Would you like to use Tailwind CSS?  No / Yes
# src 외/내부 설정 여부
Would you like your code inside a `src/` directory?  No / Yes
# App Router 사용여부
Would you like to use App Router? (recommended)  No / Yes
# Turbopack 사용여부
Would you like to use Turbopack for `next dev`?  No / Yes
# import 별칭 사용여부
Would you like to customize the import alias (`@/*` by default)?  No / Yes

 

2️⃣➖2️⃣ 수동설치

npm install next@latest react@latest react-dom@latest

 

package.json에 아래 내용 추가

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

 

3️⃣ 실행

npm run dev

 

4️⃣ 애플리케이션 확인

# 아래 링크로 열기
http://localhost:3000

 

 

정리하면 아래와 같다.

 

 

 

 

- 참고: Nextjs 한글 문서 (커뮤니티)