page.tsx | 라우트 UI 컴포넌트 |
layout.tsx | 공유 레이아웃 래퍼 |
loading.tsx | 로딩 UI (Suspense) |
error.tsx | 에러 경계 |
not-found.tsx | 404 페이지 |
template.tsx | 다시 렌더링되는 레이아웃 |
default.tsx | 병렬 라우트 폴백 |
route.ts | API 라우트 핸들러 |
app/page.tsx | / 라우트 |
app/about/page.tsx | /about 라우트 |
app/[id]/page.tsx | 동적 세그먼트 |
app/[...slug]/page.tsx | Catch-all 세그먼트 |
app/[[...slug]]/page.tsx | 선택적 catch-all |
app/(group)/page.tsx | 라우트 그룹 (URL 없음) |
app/@modal/page.tsx | 병렬 라우트 (슬롯) |
app/(.)modal/page.tsx | 인터셉팅 라우트 |
<Link href="/about">About</Link> | 클라이언트 사이드 내비게이션 |
useRouter() | 프로그래밍 방식 내비게이션 |
router.push("/path") | 경로로 이동 |
router.replace("/path") | 현재 히스토리 교체 |
router.back() | 뒤로 가기 |
router.refresh() | 서버 컴포넌트 새로고침 |
redirect("/path") | 서버 사이드 리다이렉트 |
async function Page() { } | 비동기 서버 컴포넌트 |
const data = await fetch(url) | 컴포넌트에서 fetch |
import { cookies } from "next/headers" | 쿠키 접근 |
import { headers } from "next/headers" | 헤더 접근 |
const searchParams = props.searchParams | 검색 매개변수 접근 |
const params = props.params | 라우트 매개변수 접근 |
"use client" | 클라이언트 컴포넌트로 표시 |
useState() | React 상태 사용 |
useEffect() | 이펙트 사용 |
onClick, onChange, ... | 이벤트 핸들러 |
usePathname() | 현재 경로명 |
useSearchParams() | URL 검색 매개변수 |
useParams() | 동적 라우트 매개변수 |
fetch(url) | 기본 (캐시됨) |
fetch(url, { cache: "no-store" }) | 캐싱 없음 |
fetch(url, { cache: "force-cache" }) | 강제 캐시 |
fetch(url, { next: { revalidate: 60 } }) | 60초 후 재검증 |
fetch(url, { next: { tags: ["posts"] } }) | 재검증용 태그 |
export const revalidate = 60 | 시간 기반 재검증 |
revalidatePath("/path") | 경로 재검증 |
revalidateTag("tag") | 태그로 재검증 |
export const dynamic = "force-dynamic" | 동적 렌더링 강제 |
export const dynamic = "force-static" | 정적 렌더링 강제 |
"use server" | 서버 액션으로 표시 |
async function action(formData) { } | 서버 액션 함수 |
<form action={serverAction}> | 액션이 있는 폼 |
formData.get("field") | 폼 필드 얻기 |
useFormStatus() | 폼 대기 상태 |
useFormState(action, initial) | 액션 상태 |
export async function GET(request) { } | GET 핸들러 |
export async function POST(request) { } | POST 핸들러 |
export async function PUT(request) { } | PUT 핸들러 |
export async function DELETE(request) { } | DELETE 핸들러 |
export async function PATCH(request) { } | PATCH 핸들러 |
request.json() | JSON 본문 파싱 |
request.formData() | 폼 데이터 파싱 |
request.nextUrl.searchParams | 검색 매개변수 얻기 |
NextResponse.json(data) | JSON 응답 |
NextResponse.redirect(url) | 리다이렉트 응답 |
new Response(body, { status }) | 커스텀 응답 |
middleware.ts | 미들웨어 파일 (루트) |
export function middleware(request) { } | 미들웨어 함수 |
NextResponse.next() | 라우트로 계속 |
NextResponse.rewrite(url) | URL 재작성 |
export const config = { matcher: [] } | 경로 매처 |
images: { domains: [] } | 이미지 도메인 |
redirects: async () => [] | 리다이렉트 설정 |
rewrites: async () => [] | 리라이트 설정 |
headers: async () => [] | 커스텀 헤더 |
env: { KEY: value } | 환경 변수 |
import Image from "next/image" | 최적화된 이미지 |
<Image src="" width={} height={} alt="" /> | 이미지 컴포넌트 |
fill | 컨테이너 채우기 |
priority | 이미지 프리로드 |
import { Inter } from "next/font/google" | Google 폰트 |
import localFont from "next/font/local" | 로컬 폰트 |
export const metadata = { } | 정적 메타데이터 |
export function generateMetadata({ params }) { } | 동적 메타데이터 |
title: "Page Title" | 페이지 제목 |
description: "..." | 메타 설명 |
openGraph: { } | Open Graph |
icons: { icon: "/favicon.ico" } | 파비콘 |