Next.js 썸네일형 리스트형 Next.js 11-12 Routing Project Organization File Colocation 기본적으로 안전한 코로케이션 app 디렉토리에서 중첩된 폴더 계층 구조는 경로 구조를 정의한다. 각 폴더는 URL 경로의 해당 세그먼트에 매핑되는 경로 세그먼트를 나타낸다. 그러나 경로 구조가 폴더를 통해 정의되더라도 경로 세그먼트에 page.js 또는 route.js 파일이 추가될 때까지 공개적으로 경로에 액세스 할 수 없다. 그리고 공개적으로 액세스 할 수 있는 경로가 만들어지더라도 page.js 또는 route.js에서 반환된 콘텐츠만 클라이언트로 전송된다. 이것은 프로젝트 파일이 실수로 라우팅 되지 않고 앱 디렉토리의 경로 세그먼트 내에 안전하게 공동 배치될 수 있음을 의미한다. 이는 페이지의 모든 파일이 경로로 간주되는 페이지 디렉토리와 다르다. 앱에서 프로젝트 파일을 함께 배치할 수 있지만 그.. 더보기 Next.js 11-11 Routing middleware 미들웨어를 사용하면 요청이 완료되기 전에 코드를 실행할 수 있다. 그런 다음 들어오는 요청에 따라 요청 또는 응답 헤더를 다시 작성, 리디렉션, 수정하거나 직접 응답하여 응답을 수정할 수 있다. 미들웨어는 캐시 된 콘텐츠와 경로가 일치하기 전에 실행된다. Convention 프로젝트 루트에 있는 middleware.ts(또는 .js) 파일을 사용하여 미들웨어를 정의한다. 예를 들어 페이지 또는 앱과 동일한 수준 또는 해당하는 경우 src 내부에 있다. Example // middleware.ts import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server'; // This function can be ma.. 더보기 Next.js 11-10 Routing Route Handlers 경로 핸들러를 사용하면 웹 요청 및 응답 API를 사용하여 지정된 경로에 대한 사용자 지정 요청 핸들러를 만들 수 있다. 경로 핸들러는 앱 디렉토리 내에서만 사용할 수 있다. API 경로와 경로 핸들러를 함께 사용할 필요가 없음을 의미하는 페이지 디렉토리 내부의 API 경로와 동일하다. Convention 경로 핸들러는 앱 디렉토리 내의 route.js|ts 파일에 저장되어 있다. // app/api/route.ts export async function GET(request: Request) {} 경로 핸들러는 page.js 및 layout.js와 유사하게 앱 디렉토리 내에 중첩될 수 있다. 그러나 page.js와 동일한 경로 세그먼트 수준에 route.js 파일이 있을 수 없다. 지원되는 HTTP 메.. 더보기 Next.js 11-9 Routing Intercepting Routes 경로를 가로채면 현재 페이지의 컨텍스트를 유지하면서 현재 레이아웃 내에서 경로를 로드할 수 있다. 이 라우팅 패러다임은 특정 경로를 '가로채기'하여 다른 경로를 표시하려는 경우에 유용할 수 있다. 예를 들어 피드 내에서 사진을 클릭하면 피드를 오버레이 하는 모달이 사진과 함께 표시되어야 한다. 이 경우 Next.js는 /feed 경로를 가로채고 이 URL을 '마스킹'하여 대신 /photo/123을 표시한다. 그러나 예를 들어 공유 가능한 URL을 클릭하거나 페이지를 새로 고침 하여 사진으로 직접 이동하는 경우 모달 대신 전체 사진 페이지가 렌더링 되어야 한다. 경로 가로채기가 발생하지 않아야 하는 것이다. Conventions 가로채기 경로는 (..) 규칙으로 정의할 수 있다. 이는 상태 경로 규칙 .... 더보기 Next.js 11-8 Routing Parallel Routes 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있다. 소셜 사이트의 대시보드 및 피드와 같이 매우 동적인 앱 섹션의 경우 병렬 라우팅을 사용하여 복잡한 라우팅 패턴을 구현할 수 있다. 예를 들어 팀 및 분석 페이지를 동시에 렌더링 할 수 있다. 병렬 라우팅을 사용하면 독립적인 스트리밍 되는 각 경로에 대해 독립적인 오류 및 로드 상태를 정의할 수 있다. 병렬 라우팅을 사용하면 인증 상태와 같은 특정 조건에 따라 조건부로 슬롯을 렌더링 할 수도 있다. 이렇게 하면 동일한 URL에서 완전히 분리된 코드를 사용할 수 있다. Convention 병렬 경로는 명명된 슬롯을 사용하여 생성된다. 슬롯은 @folder 규칙에 따라 정의되며 동일한 수준의 레이아웃에 .. 더보기 Next.js 11-7 Routing Error Handling error.js 파일 규칙을 사용하면 중첩된 경로에서 런타임 오류를 정상적으로 처리할 수 있다. React Error Boundary에서 경로 세그먼트와 중첩된 자식을 자동으로 래핑 한다. 세분성을 조정하기 위해 파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞는 오류 UI를 만든다. 나머지 앱 기능을 유지하면서 영향을 받는 세그먼트에 대한 오류를 격리한다. 전체 페이지를 다시 로드하지 않고 오류 복구를 시도하는 기능을 추가한다. 경로 세그먼트 내에 error.js 파일을 추가하고 React 컴포넌트를 내보내서 오류 UI를 만든다. // app/dashboard/error.tsx 'use client'; // Error components must be Client Components import {.. 더보기 Next.js 11-6 Routing Loading UI and Streaming 특수 파일 loading.js는 React Suspense로 의미 로딩 UI를 만드는 데 도움이 된다. 이 규칙을 사용하면 경로 세그먼트의 콘텐츠가 로드되는 동안 서버에서 즉시 로드 상태를 표시할 수 있으며 렌더링이 완료되면 새 콘텐츠가 자동으로 교체된다. 인스턴스 로딩 상태 즉시 로드 상태는 탐색 시 즉시 표시되는 대체 UI이다. 스켈리톤 및 스피너와 같은 로딩 표시기 또는 표지 사진, 제목 등과 같은 미래 화면의 작지만 의미 있는 부분을 사전 렌더링할 수 있다. 이를 통해 사용자는 앱이 응답하고 있음을 이해하고 더 나은 사용자 경험을 제공할 수 있다. 폴더 안에 loading.js 파일을 추가하여 로드 상태를 만든다. // app/dashboard/loading.tsx export default fu.. 더보기 Next.js 11-5 Routing Dynamic Routes 정확한 세그먼트 이름을 미리 알지 못하고 동적 데이터에서 경로를 생성하는 경우 요청 시 채워지거나 빌드 시 사전 렌더링되는 동적 세그먼트를 사용할 수 있다. Convention 동적 세그먼트는 폴더 이름을 대괄호로 묶음으로써 생성할 수 있다. (예: [folderName]). 예를 들어 [id] 또는 [slug]이다. 동적 세그먼트는 layout, page, route와 generateMetadata 함수에 params prop으로 전달된다. Example 예를 들어 블로에는 app/blog/[slug]/page.js 경로가 포함될 수 있다. 여기서 [slug]는 블로그 게시물의 동적 세그먼트이다. // app/blog/[slug]/page.js export default function Page({ p.. 더보기 이전 1 2 3 4 5 6 다음
