출처 : [공식문서]
💻 Next.js란?
풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크.
React 컴포넌트를 사용하여 UI를 구축하고,
Next.js를 사용해 기능 추가 및 최적화를 진행할 수 있다!
Next.js의 특징!
1) 서버 사이드 렌더링 (SSR)
Next.js는 서버 사이드 렌더링을 지원합니다.
이는 초기 페이지 로드 시간을 줄이고, SEO를 향상시키는 데 도움이 됩니다.
2) 정적 사이트 생성 (SSG)
Next.js는 빌드 시에 페이지를 미리 생성하여 정적 파일로 제공하는 SSG를 지원합니다.
이는 퍼포먼스를 향상시키고, CDN을 통해 콘텐츠를 빠르게 제공할 수 있게 합니다.
3) 파일 시스템 기반 라우팅
pages 디렉토리 내의 파일 구조가 URL 경로를 결정합니다.
이를 통해 라우팅을 쉽게 관리할 수 있습니다.
4) API 라우트
pages/api 디렉토리를 사용하여 서버리스 함수를 쉽게 작성하고 배포할 수 있습니다.
이를 통해 백엔드 로직을 쉽게 구현할 수 있습니다.
예시) 모든 API 요청에 대해 CORS 헤더를 추가하는 미들웨어
// pages/_middleware.js
import { NextResponse } from 'next/server'
export function middleware(req) {
return NextResponse.next().setHeader('Access-Control-Allow-Origin', '*')
}
5) 내장된 CSS 및 Sass 지원
Next.js는 CSS와 Sass를 내장 지원하며, CSS-in-JS 라이브러리와도 잘 호환됩니다.
6) 환경 변수 지원
.env 파일을 통해 환경 변수를 쉽게 설정하고 관리할 수 있습니다.
7) Fast Refresh
Next.js는 Fast Refresh를 지원하여, 개발 중에 상태를 유지하면서 컴포넌트를 실시간으로 업데이트할 수 있습니다.
8) TypeScript 지원
Next.js는 TypeScript를 내장 지원하므로 별도의 설정 없이 TypeScript를 사용할 수 있습니다.
주요 기능
Routing
레이아웃, 중첩 라우팅, 로드 상태, 오류 처리 등을 지원하는 서버 구성요소 위에 구축된 파일 시스템 기반 라우터
Rendering
클라이언트 및 서버 구성 요소를 사용한 클라이언트 측 및 서버 측 렌더링
Data Fetching
서버 구성요소의 비동기/대기 및 확장을 통한 단순화된 데이터 가져오기
fetch 요청 메모화
데이터 캐싱 및 검증을 위한 API
Styling
CSS 모듈, Tailwind CSS, CSS in JS 를 포함한 스타일링 방법 지원
Optimizations
이미지, 글꼴, 스크립트 최적화
TypeScript
더 나은 유형 검사 및 효율적 컴파일
사용자 지정 타입스크립트 플러그인 및 유형 검사기 제공
📃 Next.js 라우팅 규칙
라우팅 파일
Routing Files
- layout
- page
- loading
- not-found
- error
- global-error
- route : API endpoint
- template : Re-rendered layout
- default : Parallel route fallback page
중첩 라우트
Nested Routes
- folder
- folder/folder
동적 라우트
Dynamic Routes
- [folder]
- [...folder]
- [[...folder]]
경로 그룹 및 개인 폴더
Route Groups and Private Folders
- (folder) : 라우팅에 영향을 주지 않고 경로 그룹화
- _folder : 폴더 및 모든 하위 세그먼트를 라우팅에서 제외합니다.
- (watch sass 예외 처리했을 때처럼!)
병렬 및 중재 라우트
Parallel and Intercepted Routes
여러 라우트가 동시에 처리되거나,
특정 라우트가 다른 라우트의 처리를 가로채는 등의 라우팅 동작을 설명한다.
'Parallel routes'에 대해서는 Next.js의 파일 기반 라우팅 시스템이 해당될 수 있습니다. 각 파일은 독립적인 라우트를 형성하며, 서버는 동시에 여러 요청을 처리할 수 있습니다. 이는 각 요청이 독립적으로, 즉 '병렬로' 처리된다는 의미입니다.
- @folder
- (.)folder
- (..)folder
- (..)(..)folder
- (...)folder
📖 pages 라우팅 규칙
특수 파일
- 404 : 404오류 페이지
- 500 : 500오류 페이지
