Next.js 프로젝트 시작하기

1. Node.js 설치 확인

Next.js는 Node.js가 필요하니까 먼저 설치되어 있는지 확인.
터미널에서 다음 명령어를 실행.

node -v

 

버전이 출력되면 이미 설치된 거고, 없다면 Node.js 공식 사이트에서 LTS 버전을 다운로드해 설치.

---

2. Next.js 프로젝트 생성

터미널에서 프로젝트를 생성할 디렉터리로 이동한 다음, 아래 명령어를 실행.

npx create-next-app@latest my-next-app

 

(여기서 my-next-app은 원하는 프로젝트 이름으로 변경 가능)

이후 설정을 선택하는 단계가 나오는데, 기본적으로 엔터를 눌러 진행.

내가 한 설정:

• TypeScript 사용 여부 → Yes (추천)
• ESLint 설정 → No (코드 품질 체크)
• Tailwind CSS 사용 여부 → Yes (스타일링 편리)
• src/ 디렉터리 사용 여부 → No
• App Router (Next.js 14+) 사용 여부 → Yes
• import alias 설정 여부 → Yes

---

3. 프로젝트 실행

설치가 끝나면 프로젝트 폴더로 이동한 뒤, 개발 서버를 실행.

cd my-next-app
npm run dev

 

 

이제 브라우저에서 http://localhost:3000으로 접속하면 Next.js 기본 화면이 나옴. 🚀

---

4. 추가 설정 (Firebase 연동, 환경 변수 설정 등)

예를 들어 DB를 Firebase를 사용할거라면, 다음 명령어로 Firebase SDK를 설치하면 됨.

npm install firebase

 

 

그리고 프로젝트 루트에 .env.local 파일을 만들어 Firebase 설정 값을 넣으면 된다.

 

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id

 

---

5. 추가 개발 진행

이제 Next.js의 app 디렉터리에서 필요한 페이지와 컴포넌트를 만들어가면 됨.
필요하면 Tailwind CSS, Zustand, Recoil 같은 상태 관리 라이브러리도 추가한다.