Web Devlopment/NextJs

#27. Routing section Summary

키모형 2025. 12. 29. 23:47
반응형

Next.js v16(App Router 기준) 

 

Route definition

  • 파일 시스템 기반 라우팅: app/ 아래 폴더 = route segment, URL 경로로 매핑됩니다. Next.js+1
  • 해당 세그먼트를 실제로 공개 라우트로 만들려면 보통 그 폴더 안에 page.tsx가 필요합니다(= 그 경로가 “페이지”로 노출). Next.js+1
  • 기본 패턴 예:
    • app/page.tsx → /
    • app/profile/page.tsx → /profile

Pages and layouts

  • page.tsx: 해당 경로의 화면(페이지) 를 정의합니다. Next.js
  • layout.tsx: 하위 페이지/레이아웃을 감싸는 공통 UI 쉘입니다(헤더/푸터/사이드바). 네비게이션 시 상태를 유지하며 지속(persist) 됩니다. Next.js+1
  • template.tsx: layout과 비슷하지만, 네비게이션마다 새 인스턴스로 재생성되어(리마운트) 하위 Client Component 상태가 리셋되는 성격입니다. Next.js+1
  • 루트 레이아웃(app/layout.tsx)은 <html>, <body>를 정의하는 최상위 레이아웃입니다. Next.js

Dynamic routes

  • 대괄호 폴더명으로 동적 세그먼트를 만듭니다: app/posts/[id]/page.tsx → /posts/123 Next.js+1
  • Catch-all:
    • ...[slug] → /docs/a/b/c 같은 다단계 경로 처리
    • [[...slug]] → 선택적 catch-all(없어도 매칭)
  • 동적 값은 page/layout/route 등에 params로 전달됩니다. Next.js+1

Route groups

  • (group) 폴더는 **URL에 포함되지 않는 “정리용 폴더”**입니다. Next.js
  • 예:
    • app/(admin)/users/page.tsx → URL은 /users ( (admin)은 경로에 나타나지 않음 ) Next.js
  • 실무 용도: “관리자/사용자 영역 분리”, “팀별 폴더 정리”, “레이아웃 분기” 등에 자주 씁니다.

Linking and navigation

  • <Link />는 Next.js의 기본 내비게이션 수단이며, 클라이언트 전환과 프리패칭(prefetch)을 지원합니다. Next.js+1
  • useRouter()는 Client Component에서만 라우팅을 명령형으로 처리할 때 사용합니다(가능하면 <Link> 우선 권장). Next.js+1
  • App Router 네비게이션은 “서버 렌더링 + 스트리밍 + 클라이언트 전환” 조합으로 빠른 UX를 제공합니다. Next.js+1

Loading and error states

  • loading.tsx: 해당 route segment가 로딩되는 동안 즉시 보여줄 로딩 UI를 정의하며, Suspense/Streaming 기반으로 동작합니다. Next.js+1
  • error.tsx: 해당 segment 이하를 Error Boundary로 감싸고, 런타임 예외 발생 시 fallback UI를 보여줍니다(재시도 reset() 패턴 포함). Next.js+1
  • global-error.tsx: 루트 레이아웃/템플릿 수준에서의 오류까지 처리하는 전역 오류 UI입니다(특정 조건에서 필요). nextjs-ko.org
  • not-found.tsx + notFound() 함수: 세그먼트 단위 404 UI(또는 전역 404) 구성에 사용합니다. Next.js+1

Parallel and intercepting routes

  • Parallel Routes: @slot 폴더로 동일 레이아웃에서 여러 화면을 “슬롯 형태로 동시에/조건부 렌더링” 할 수 있습니다(대시보드, 멀티 패널 UI). Next.js+1
  • default.tsx: 전체 새로고침(하드 내비게이션) 시 슬롯의 활성 상태를 복원할 수 없을 때 fallback으로 렌더링됩니다(없으면 빌드/동작 이슈가 날 수 있음). Next.js+1
  • Intercepting Routes: 다른 경로의 페이지를 “현재 레이아웃 컨텍스트 안에서” 가로채서 렌더링하는 패턴(대표적으로 목록 위에 상세를 모달로 띄우기). Next.js+1

Route handlers and middleware

Route Handlers

  • route.ts(또는 route.js)로 API 엔드포인트(커스텀 Request/Response 핸들러) 를 만듭니다. GET/POST/PUT/PATCH/DELETE/HEAD/OPTIONS 등을 지원합니다. Next.js+1
  • Route Handler는 기본적으로 캐시되지 않으며, GET은 설정으로 캐시를 opt-in 할 수 있습니다(예: export const dynamic = 'force-static'). Next.js+1

Middleware → Proxy (Next.js 16)

  • Next.js 16부터 middleware.ts 컨벤션은 deprecated 되었고, proxy.ts로 변경되었습니다(내보내는 함수 이름도 proxy). Next.js+2Next.js+2
  • proxy.ts는 요청이 처리되기 전에 실행되어 rewrite/redirect, 헤더 수정, 직접 응답 반환 등을 수행하는 “네트워크 경계” 역할입니다. Next.js+1
반응형
저작자표시 (새창열림)