Quick Start

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' };

Reference Files

migration-guide.md - Pages Router to App Router migration steps and pitfalls

Quick Start

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' };

Reference Files

migration-guide.md - Pages Router to App Router migration steps and pitfalls

Nextjs App Router Fundamentals

Quick Start

Reference Files

Nextjs App Router Fundamentals

Quick Start

Reference Files

Notes

Extract Errors

microsoft-vscode-extensions-copilot-assets-prompts-skills-project-setup-info-context7-skill-md

How to setup a project

Backend Patterns

Coding Standards

Coding Standards