Next.js App Router (13+). Migrating from Pages, file conventions (layout, page, loading, error), routing patterns, metadata, generateStaticParams.
Files: layout.tsx (required), page.tsx (route), loading.tsx, error.tsx,
not-found.tsx, route.ts (API)
Pages → App: pages/index.tsx → app/page.tsx, pages/[id].tsx →
app/[id]/page.tsx
// app/layout.tsx (REQUIRED)
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html lang="en"><body>{children}</body></html>;
}
// app/page.tsx
export default function Page() {
return <h1>Home</h1>;
}
// Metadata
export const metadata = { title: 'My Page' };
<html> and <body> tagsLink from next/link instead of <a> tags