<aside>

</aside>

Next.js 최신 프로젝트 셋팅 가이드

Next.js는 React 기반의 강력한 프레임워크로, 빠른 개발과 최적화된 웹사이트 구축에 최적화되어 있습니다. 이번 글에서는 Next.js 공식 문서를 참고하여, 최신 Next.js 프로젝트를 올바르게 셋팅하는 방법을 단계별로 정리합니다. 또한, TypeScript, ESLint, Prettier, TailwindCSS, shadcn/ui 등 자주 사용하는 기술 스택의 통합 방법도 함께 소개합니다.

1. Next.js 프로젝트 생성 및 기본 설정

1-1. 프로젝트 생성

Next.js는 🔗 Automatic installation을 지원하기 때문에, 터미널에서 아래 명령어를 통해 쉽고 빠르게 새 Next.js 프로젝트를 생성할 수 있습니다. TypeScript, ESLint & Prettier, TailwindCSS 등의 대부분의 설정은 초기 단계에서 설정이 가능합니다.

npx create-next-app@latest

image.png

1-2. 수동 설치 방법

자동 생성이 아닌, 수동 설치를 원하는 경우라면 🔗 Manual installation 단계를 따라 터미널에서 아래 명령어를 입력하고 필요한 패키지를 추가하면 됩니다.

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