Lesson 01

App Router file conventions

Use App Router folders and special files so routes match Next.js conventions.

routing
app-router
files

Good Code

app/projects/[projectId]/page.tsx

export default async function ProjectPage({
  params,
}: PageProps<"/projects/[projectId]">) {
  // Route props keep dynamic segments typed and aligned with the folder path.
  const { projectId } = await params;

  return <h1>Project {projectId}</h1>;
}

Bad Code

app/projects-projectId.tsx

export default function ProjectsProjectIdPage() {
  // Parsing the URL by hand bypasses App Router conventions and typing.
  const projectId = window.location.pathname.split("/").at(-1);

  return <h1>Project {projectId}</h1>;
}

Review Notes

What to review

Good Code

The good version lets the folder path define the route and reads the dynamic segment through the route props that Next.js provides.

Bad Code

The bad version invents a flat filename convention and parses the URL manually, which bypasses routing, typing, prerendering, and static params support.

Takeaways

Routes should be expressed with folders and special files, not invented naming schemes.