728x90
반응형
Error.js
- 경로 세그먼트에 대한 오류 UI 경계
- Server/Client Component에서 발생하는 예상치 못한 오류를 잡고 대체 UI를 표시
Layout.js
- 경로 간에 공유되는 UI
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return <section>{children}</section>
}
- 루트 레이아웃 : 루트 디렉토리 최상위 레이아웃
- app. <html>및 <body> 태그 및 기타 전역적으로 공유되는 UI를 정의하는 데 사용
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Props
- Children (필수)
- 렌더링하는 동안 children레이아웃이 래핑되는 경로 세그먼트로 채워짐
- 주로 Page, 따로 해당되는 경우 Loading 또는 Error와 같은 다른 특수 파일
- Param (선택)
- 루트 세그먼트에서 해당 레이아웃까지의 동적 경로 매개변수 개체
예 URL params app/dashboard/[team]/layout.js /dashboard/1 { team: '1' } app/shop/[tag]/[item]/layout.js /shop/1/2 { tag: '1', item: '2' } app/blog/[...slug]/layout.js /blog/1/2 { slug: ['1', '2'] }
export default function ShopLayout({
children,
params,
}: {
children: React.ReactNode
params: {
tag: string
item: string
}
}) {
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
return <section>{children}</section>
}
loading.js
- 로딩 파일 은 Suspense 에 구축된 즉각적인 로딩 상태를 생성할 수 있다.
not-found.js
- 사용자 정의 UI 제공과 함께 Next.js가 404HTTP 상태 코드도 반환
page.js
- 경로 고유 UI
export default function Page({
params,
searchParams,
}: {
params: { slug: string }
searchParams: { [key: string]: string | string[] | undefined }
}) {
return <h1>My Page</h1>
}
route.js
HTTP Method
- 경로 파일을 사용하여 지정된 경로 에 대한 사용자 지정 요청 핸들러를 만들 수 있다.
- route handler는 app 디렉터리 내에서만 사용 가능
export async function GET(request: Request) {}
export async function HEAD(request: Request) {}
export async function POST(request: Request) {}
export async function PUT(request: Request) {}
export async function DELETE(request: Request) {}
export async function PATCH(request: Request) {}
// If `OPTIONS` is not defined, Next.js will automatically implement `OPTIONS` and set the appropriate Response `Allow` header depending on the other methods defined in the route handler.
export async function OPTIONS(request: Request) {}
Parameters
- Request (선택)
- context (선택)
반응형
'언어 > Next.js' 카테고리의 다른 글
| App Routing (0) | 2023.07.27 |
|---|---|
| Cookie (0) | 2023.07.27 |
| Components (0) | 2023.07.27 |
| App Router (0) | 2023.07.27 |
| Installation (0) | 2023.07.27 |
