Routing in Next.js

Next.js uses file-based routing. Every folder inside app/ becomes a URL segment, and a page.js file inside it makes that route visible.

app/
  page.js          -> /
  about/page.js    -> /about
  blog/[slug]/page.js  -> /blog/:slug

Dynamic Routes

Wrap a folder name in square brackets to capture a URL parameter.

// app/blog/[slug]/page.js
export default async function BlogPost({ params }) {
  const { slug } = await params;
  return <h1>Post: {slug}</h1>;
}

Linking Between Pages

import Link from "next/link";

export default function Nav() {
  return <Link href="/about">About</Link>;
}

Link enables client-side navigation, so pages feel instant after the first load.

Common Errors & Troubleshooting

• 404 on a route you're sure you created — the folder structure has to match exactly, and the file must be page.js — a stray typo like pages.js or putting it directly in app/blog.js instead of app/blog/page.js will silently 404.
• params is a Promise, not a plain object — in recent Next.js versions, params must be awaited before you can read params.slug — forgetting the await gives you a Promise object instead of the actual value.
• <a> causes a full page reload instead of client-side navigation — make sure you're importing Link from next/link and using it instead of a plain HTML <a> tag for internal links.