Next.js

Next.js

: 풀 스택 웹 애플리케이션을 빌드하기 위한 React 프레임워크

• Next.js는 서버 측에서 React 코드를 실행시킴(SSR)
• React를 서버 측에서 pre-rendering하여 html을 생성하고 브라우저로 보냄
• 브라우저에서 React를 사용해 웹 페이지 생성 ⇒ 속도가 빠르고 검색엔진최적화(SEO)에 유리함
  

Next.js 프로젝트 시작하기

npx create-next-app@latest
# or
yarn create-next-app
# or
pnpm create-next-app [프로젝트명]

→ Next.js 패키지 매니저 pnpm 사용 권장

타입스크립트 사용하고 싶으면 기존 명령어 마지막에 --typescript 작성

프로젝트 실행

npm run dev
# or 
yarn run dev
# or
pnpm run dev

---

Next.js 폴더 구조

---

Next.js 라우팅

App Router vs Page Router

• App Router는 Next.js 13 버전에서 도입된 새로운 라우팅 방식
  app 디렉토리와 pages 디렉토리의 라우팅 방식이 다름
  but, app 라우터는 선택적 사용이므로 pages 디렉토리 방식을 여전히 사용할 수 있음

App Router (Next.js 13에서 도입된 기능)

• app 디렉토리 사용
• 페이지와 API 라우트 모두 app 디렉토리 내에서 관리됨
• page.js → 페이지 컴포넌트
• route.js → server-side API를 위한 파일
• app 하위에 모든 파일을 함께 구성할 수 있음(colocation)
• 디렉토리로 경로 정의
• 페이지를 위한 파일 → page.js
• →
• pages router 보다 우선순위가 높음

Page Router

: 파일 시스템을 기반으로 라우팅을 관리하는 방법

페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터

• pages 디렉토리 사용
• pages 하위에 모든 파일이 페이지, API 경로가 됨
• 디렉토리, 파일명으로 경로가 설정됨
  • pages/index.tsx → /
  • pages/blog → /blog
  • pages/blog/index.tsx→ /bolg
  • pages/blog/first-post.tsx → /blog/first-post

프로젝트의 pages 디렉토리에 파일을 생성하면 해당 파일명이 URL 경로로 자동 매핑됨

ex. pages/about.js 파일을 만들면 /about 경로가 자동으로 생성됨

URL Segment: /(슬래시)로 구분되는 URL 경로의 일부

URL Path: 도메인 뒤에 오는 URL의 일부(segment로 구성됨)

폴더와 파일

Next.js는 파일 시스템 기반 라우터를 사용함

• 폴더 → 경로를 정의하는 데 사용
  • 경로는 root 폴더에서 파일을 포함하는 최종 leaf 폴더까지 파일 시스템 계층을 따르는 중첩된 폴더의 단일 경로
• 파일 → 경로 세그먼트에 표시되는 UI를 만드는데 사용

Route Segments

: 경로의 각 폴더는 Route Segment를 나타냄.

각 Route Segment는 URL 경로의 해당 Segment에 매핑됨

Next.js는 폴더가 중첩 경로를 만드는데 사용되는 파일 시스템 라우팅을 사용

각 폴더를 URL segment에 매핑되는 경로 segments를 나타냄

Dynamic Routes

: 미리 정의된 URL이 아닌 사용자가 접근한 경로 또는 특정 값에 따라 동적으로 변화하는 주소

• [] 대괄호로 시작하는 폴더 생성
• 13버전 부터 [id] 라는 폴더를 생성하고 그 안에 page.tsx 생성
• 동적으로 변하는 파라미터를 주고 싶다면 → [id] 라는 폴더를 생성하고 page.tsx 생성