Next.js 시작하기 | Next.js

Next.js 애플리케이션을 만들어봅니다.

---

💡 이후 내용은 아래 스펙으로 작성되었습니다.
- OS : Windows 11
- Package Manager : pnpm
- Node.js 20.17.0
- Next.js 14.2.13
- App Router

 

시스템 필수 사양 — System Requirements

• Nodejs 18.18 이상
  https://nodejs.org/en/download/package-manager
• 패키지매니저 pnpm

---

자동 생성 — Automatic Installation

새로운 Next.js 애플리케이션을 시작할 때, 모든게 자동 셋팅되므로 create-next-app 사용하는 것을 추천합니다.

명령 프롬프트에서 프로젝트가 생성될 디렉토리 위치로 가 아래 스크립트를 실행하세요.

npx create-next-app@latest

스크립트를 실행하면 아래와 같이 각종 프로젝트 설정을 묻는 프롬프트가 나오는데 원하는 대로 설정해주세요.

• 프로젝트명
• 타입스크립트 사용 여부
• ESLint 사용 여부
• TailwindCSS 사용 여부
• 최상위에 src 디렉토리 사용 여부
• App Router 사용 여부 (추천)
• 기본 절대 경로 alias로 설정되어 있는 "@" 변경 여부

모든 설정을 입력하면 의존성 패키지들을 자동으로 설치해줍니다!

 

수동 생성 — Manual Installation

create-next-app 명령을 사용하지 않고 직접 설치하려면 아래 스크립트를 입력하세요.

[패키지매니저(pnpm/npm/yarn)] install next@latest react@latest react-dom@latest

package.json 파일 내에 아래 옵션을 추가하세요.

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

• dev : 개발 버전으로 실행
• build : 운영 사용을 위해 빌드
• start : 운영 서버 실행
• lint : eslint 설정

---

App Router vs. Pages Router

Next.js는 2종류의 라우팅을 지원합니다.

• App Router
  (Next.js 13 버전부터 stable)
  Server Component, Streaming, Suspense, Server Action 등의 React 새로운 최신 기능들을 사용할 수 있는 라우터
  공유 레이아웃, 중첩 라우팅, 상태값 로딩, 에러 처리 등의 기능 지원
• Pages Router
  전통적인 Next.js 라우터
  서버에서 랜더링된 React 애플리케이션 빌드 가능
  기존 Next.js 애플리케이션 지원

글은 App Router를 기준으로 작성하였습니다.

 

디렉토리 생성 — Creating directories

Next.js는 파일 시스템 기반 라우팅을 사용하기 때문에, 애플리케이션의 경로가 파일을 어떻게 구성하느냐에 결정됩니다.

▪️ app

최상위에 app 폴더에 layout.tsx와 page.tsx 파일을 위치시킵니다.

루트(/) 경로에 보여질 화면들이죠.

▪️ public

최상위에 위치한 폴더입니다.

이미지, 폰트 등의 정적 리소스들은 /public 폴더 안에 저장합니다.

public 폴더 내의 파일들은 베이스 URL(/)로 참조 가능합니다.

---

개발서버 실행 — Run the Development Server

애플리케이션을 실행해보겠습니다.

명령 프롬프트에서 아래 명령을 실행 후

[패키지매니저 pnpm/npm/yarn] run dev

정상적으로 실행되었다면

http://localhost:3000 로 접속합니다.

create-next-app 을 사용하여 애플리케이션을 생성하였다면 아래와 같은 화면이 표시되면 성공입니다😆

 

 

Getting Started: Installation | Next.js