웹프로젝트 » 02.가계부

h1. 프로젝트 생성

h3. 1. Node.js 설치

URL : https://nodejs.org/ko

!clipboard-202503161621-hrna5.png!

h3. 2. Next.js 프로젝트 생성

[명령어]

<pre>

-- 기본생성

npx create-next-app@latest 프로젝트명

-- 타입스크립트 사용 생성

npx create-next-app@latest --typescript 프로젝트명

</pre>

[프로젝트 생성 기본 설정]

!clipboard-202503161639-lxyfd.png!

# TypeScript 사용 여부 체크(Default 값 : Yes)

# ESLint 사용 여부 체크(Default 값 : Yes)

# Tailwind CSS 사용 여부 체크(Default 값 : Yes)

# src/ directory 생성 여부 체크(Default 값 : No) -- App Router를 사용하므로 src는 미사용

# App Router 사용 여부 체크(Default 값 : Yes)

# Turbopack 사용 여부 체크(Default 값 : Yes)

# 가져오기 별칭 여부 체크(Default 값 : No)

%{color:red}※ 2025/03/16일 기준 Next.js 15.2.2 | React.js 19.0.0 버전 설치%

h3. 3. Next.js 프로젝트 실행 포트 변경

[설정 파일 경로]

<pre>

/package.json

</pre>

[설정 변경 위치]

<pre>

"name": 프로젝트명,

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "dev": "next dev --turbopack",

    "build": "next build",

    "start": "next start",

    "lint": "next lint"

  }

</pre>

"dev": "next dev --turbopack", => "dev": "next dev -p 포트번호 --turbopack",로 변경