프로젝트 생성¶

1. Node.js 설치¶

URL : https://nodejs.org/ko

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

[명령어]

-- 기본생성
npx create-next-app@latest 프로젝트명

-- 타입스크립트 사용 생성
npx create-next-app@latest --typescript 프로젝트명

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

1. TypeScript 사용 여부 체크(Default 값 : Yes)
2. ESLint 사용 여부 체크(Default 값 : Yes)
3. Tailwind CSS 사용 여부 체크(Default 값 : Yes)
4. src/ directory 생성 여부 체크(Default 값 : No) -- App Router를 사용하므로 src는 미사용
5. App Router 사용 여부 체크(Default 값 : Yes)
6. Turbopack 사용 여부 체크(Default 값 : Yes)
7. 가져오기 별칭 여부 체크(Default 값 : No)

※ 2025/03/16일 기준 Next.js 15.2.2 | React.js 19.0.0 버전 설치

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

[설정 파일 경로]

/package.json

[설정 변경 위치]

"name": 프로젝트명,
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint" 
  }

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

4. IntelliJ 사용 시 오류 제거 방법¶

4-1. ESLint: Please specify path to 'eslint' package¶

[ESLint 설치 명령어]

npm install --g eslint

4-2. Unknown options: resolvePluginsRelativeTo, rulePaths, useEslintrc, extensions, ignorePath¶

[ESLint 설정 파일 설치 명령어]

npm install -D eslint-config-airbnb@latest

[ESLint 종속성 모듈 확인]

npm info "eslint-config-airbnb@latest" peerDependencies

[ESLint 종속성 설치]

-- 한번에 설치
npx install-peerdeps --dev eslint-config-airbnb

-- 각각 설치
npm install -D eslint eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

-- typescript 사용 시 추가 설치
npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

※ 아래와 같이 오류 발생 시 옵션 추가 (--legacy-per-deps)

npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.