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
"text-green-500 opacity-70">// app/page.tsx - Home page (/)
"text-blue-400">export "text-blue-400">default "text-blue-400">function HomePage() {
  "text-blue-400">return 
Home Page
;
}

"text-green-500 opacity-70">// app/about/page.tsx - About page (/about)
"text-blue-400">export "text-blue-400">default "text-blue-400">function AboutPage() {
  "text-blue-400">return 
About Page
;
}

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

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

"text-green-500 opacity-70">// 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-blue-400">return (
    
  );
}

"text-green-500 opacity-70">// Programmatic Navigation
'use client';

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

"text-blue-400">export "text-blue-400">default "text-blue-400">function Button() {
  "text-blue-400">const router = useRouter();
  
  "text-blue-400">const handleClick = () => {
    router.push('/about');
  };
  
  "text-blue-400">return ;
}