Route in Next.js without guessing folder magic
Quick answer: Folders in app/ are your URL tree—page.tsx renders a segment, layout.tsx shares chrome, [slug] handles dynamic paths, and next/link keeps navigation client-side (with prefetch). This page maps that mental model to Scrimba’s free casts.
Who this is for
Anyone who reaches for React Router muscle memory and gets burned by full reloads or missing layouts.
1. Defining Routes
app/page.tsx->/app/dashboard/page.tsx->/dashboardapp/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.,@modalfor a modal slot). - Intercepting Routes
(..)folder: Show a different UI when navigating (e.g.,(..)photo/[id]shows a modal for/photo/123when navigated from a list).
Next step (free on Scrimba): Open the App Router course →
Read this when…
You need /blog/[slug]-style URLs, nested dashboards, or a refresher on route groups—with a guided place to type the code.
Related Scrimba Courses
Practice routing inside scrims
Use the free App Router course to mirror every concept above—pause, edit, run.