Skip to main content

Routing Fundamentals

Quick Answer: Companion guide mapping docs to Scrimba lessons. See below for the roadmap.

Last reviewed: March 2026.

Next.js uses a file-system based router. This means the folders in your app directory define your URL paths.

Who This Is For​

Learners following the React or Next.js roadmap.

1. Defining Routes​

  • app/page.tsx -> /
  • app/dashboard/page.tsx -> /dashboard
  • app/blog/settings/page.tsx -> /blog/settings

You don't need a separate router config file like in React Router.

2. Pages and Layouts​

Every route needs a page.tsx. But routes can also share UI using layout.tsx.

Layouts: A layout wraps all the pages inside its folder (and subfolders). It's perfect for Navbars, Sidebars, and Footers.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <section>
      <nav>Dashboard Nav</nav>
      {children} {/* The page content goes here */}
    </section>
  );
}

Learn it on Scrimba: -> Interactive Lesson: Pages & Layouts

3. Dynamic Routes​

What if you want a route for a blog post, like /blog/my-first-post? You use square brackets.

File: app/blog/[slug]/page.tsx

export default function BlogPost({ params }) {
  return <h1>Post: {params.slug}</h1>;
}

If you visit /blog/hello, params.slug will be "hello".

Learn it on Scrimba: -> Interactive Lesson: Dynamic Routes

4. Navigation​

Do not use the <a> tag for internal links! It causes a full page reload. Use the <Link> component.

import Link from 'next/link';

<Link href="/dashboard">Go to Dashboard</Link>

Next.js automatically prefetches linked pages in the background, making navigation instant.

5. Advanced Routing Patterns​

  • Route Groups (folder): Use (marketing) or (dashboard) to group routes without affecting the URL. Good for different layouts.
  • Parallel Routes @folder: Render multiple pages in the same layout (e.g., @modal for a modal slot).
  • Intercepting Routes (..)folder: Show a different UI when navigating (e.g., (..)photo/[id] shows a modal for /photo/123 when navigated from a list).

Choose This If​

Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.

Related Guides

Docs

Learn Next.js Roadmap

→
Docs

JavaScript Courses

→
Docs

Frontend Path

→

Ready to Upgrade Your Learning?

Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.

Claim 20% Off Scrimba Pro (opens in a new tab)
Last updated on