MENU

Routing

The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application. The React component <Link> is used to do this client-side route transition.

With the App Router, each route is a folder inside 'app' containing a 'page.js' file: '/' maps to 'app/page.js', '/about' maps to 'app/about/page.js', and '/blog/hello-world' maps to 'app/blog/hello-world/page.js'.

Since Next.js 13, <Link> renders its own <a> tag directly — nesting an <a> inside it, which older Next.js tutorials show, now causes an error. Link to the routes above like this:

// app/page.jsimport Link from 'next/link'export default function Home() {
  return (
    <ul>
      <li><Link href="/">Home</Link></li>
      <li><Link href="/about">About Us</Link></li>
      <li><Link href="/blog/hello-world">Blog Post</Link></li>
    </ul>
  )}

// app/page.jsimport Link from 'next/link'export default function Home() {
  return (
    <ul>
      <li><Link href="/">Home</Link></li>
      <li><Link href="/about">About Us</Link></li>
      <li><Link href="/blog/hello-world">Blog Post</Link></li>
    </ul>
  )}