.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
Error.js
•
경로 세그먼트에 대한 오류 UI 경계
•
Server/Client Component에서 발생하는 예상치 못한 오류를 잡고 대체 UI를 표시
Layout.js
•
경로 간에 공유되는 UI
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return <section>{children}</section>
}
JavaScript
복사
•
루트 레이아웃 : 루트 디렉토리 최상위 레이아웃
•
app. <html>및 <body> 태그 및 기타 전역적으로 공유되는 UI를 정의하는 데 사용
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
JavaScript
복사
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>
}
JavaScript
복사
loading.js
•
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>
}
JavaScript
복사
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) {}
JavaScript
복사
Parameters
•
Request (선택)
•
context (선택)
