Next.js 14 Guide

Next.jsThe React Framework for Production

Learn Next.js 14 with App Router, Server Components, Data Fetching, Caching, and deployment strategies.

Contents

Routing

Next.js uses a file-based routing system. Files and folders in the app directory create routes automatically.

🎯 Core Concept: File-Based Routing

Next.js automatically creates routes based on your file structure. Each page.tsx file becomes a route. Folders create URL segments, and special file names like [slug] create dynamic routes.

File Structure

📁 app/
📄 page.tsx→/
📁 about/
📄 page.tsx→/about
📁 blog/
📁 [slug]/
📄 page.tsx→/blog/:slug
📁 products/
📁 [...slug]/
📄 page.tsx→/products/*

Route Types

S

Static Routes

Fixed URL paths that don't change

app/page.tsx → /
Examples
  • •/
  • •/about
  • •/contact
D

Dynamic Routes

Routes with parameters that change

app/[id]/page.tsx → /:id
Examples
  • •/blog/123
  • •/users/456
C

Catch-all Routes

Matches multiple path segments

app/[...slug]/page.tsx → /*
Examples
  • •/docs/a/b/c
  • •/products/cat/subcat

How Next.js Routing Works

1
User clicks link
Link component triggers navigation
2
Next.js matches URL
Finds matching page.tsx file
3
Loads component
Fetches data if needed
4
Renders page
Server or client rendering
5
Updates URL
Browser URL changes
tsx
// app/page.tsx - Home page (/)
"text-blue-400">export "text-blue-400">default "text-blue-400">function HomePage() "text-pink-400">{
  "text-blue-400">return <h1>Home Page</h1>;
"text-pink-400">}

// app/about/page.tsx - About page (/about)
"text-blue-400">export "text-blue-400">default "text-blue-400">function AboutPage() "text-pink-400">{
  "text-blue-400">return <h1>About Page</h1>;
"text-pink-400">}

// app/blog/[slug]/page.tsx - Dynamic route (/blog/hello-world)
"text-blue-400">interface PageProps "text-pink-400">{
  params: "text-pink-400">{
    slug: "text-purple-400">string;
  "text-pink-400">};
"text-pink-400">}

"text-blue-400">export "text-blue-400">default "text-blue-400">function BlogPost("text-pink-400">{ params "text-pink-400">}: PageProps) "text-pink-400">{
  "text-blue-400">return <h1>Blog Post: "text-pink-400">{params.slug"text-pink-400">}</h1>;
"text-pink-400">}

// Navigation with Link component
"text-blue-400">import Link from 'next/link';

"text-blue-400">export "text-blue-400">default "text-blue-400">function Navigation() "text-pink-400">{
  "text-blue-400">return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog/my-post">Blog Post</Link>
    </nav>
  );
"text-pink-400">}

// Programmatic Navigation
'use client';

"text-blue-400">import "text-pink-400">{ useRouter "text-pink-400">} from 'next/navigation';

"text-blue-400">export "text-blue-400">default "text-blue-400">function Button() "text-pink-400">{
  "text-blue-400">const router = useRouter();
  
  "text-blue-400">const handleClick = () => "text-pink-400">{
    router.push('/about');
  "text-pink-400">};
  
  "text-blue-400">return <button onClick="text-pink-400">{handleClick"text-pink-400">}>Go to About</button>;
"text-pink-400">}