Next.js Routes
Next.js Route 구조 생성기
App Router 경로를 입력하면 폴더 구조와 기본 page/layout 파일을 생성합니다.
Route
Generated
Files
- src/app/blog/[category]/[slug]/page.tsx
- src/app/blog/[category]/[slug]/layout.tsx
- src/app/blog/[category]/[slug]/loading.tsx
page.tsx
type PageProps = {
params: Promise<{ category: string; slug: string }>;
};
export default async function SlugPage({ params }: PageProps) {
const { category, slug } = await params;
return (
<main>
<h1>[slug]</h1>
</main>
);
}
layout.tsx
export default function Layout({ children }: { children: React.ReactNode }) {
return children;
}
loading.tsx
export default function Loading() {
return <div>Loading...</div>;
}