필자는 WSL를 사용합니다.

1. create-next-app

프로젝트를 설치하고자 하는 폴더로 이동해줍니다.

npx create-next-app@lastest

위 명령어를 통해 최신 버전의 next 프로젝트를 받을 수 있습니다.

OK to proceed? (y) 에서 y를 눌러 다운로드를 진행합니다.

2. 설정

TypeScript와 Tailwind CSS를 사용하며 검증을 위해 ESLint를 설정했습니다.

src 폴더를 만들어서 프로젝트를 관리하고 App Router를 사용했습니다.

그리고 Nextjs 15 버전에 추가된 기능으로 "Turbopack"을 설정해주었습니다.

Turbopack은 Next.js의 pages 및 app 디렉토리에서 더 빠른 로컬 개발을 위해 사용할 수 있습니다.

Next.js 개발 서버를 실행할 때 --turbo 플래그를 사용하여 Turbopack을 활성화하세요.

# package.json

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

마지막으로, @/* by default? 를 "No"로 설정하여 Alias 절대 경로를 사용했습니다.

예를 들어, ../../components/MyComponent 방식으로 상대 경로로 작성하면 관리하기 어렵습니다.

@/components/MyComponent가 더 직관이고 깔끔하게 관리할 수 있습니다.

3. 실행

npm run dev 

위 명령어를 입력하면 NextJS 프로젝트가 실행됩니다.