Next.js Introduction

App Router, server vs client components, layouts, dynamic routes, and deployment.

Overview

Next.js is a React framework that enables server-side rendering, static site generation, and full-stack capabilities.

Key Concepts

• App Router — File-based routing using the app/ directory
• Server Components — Components that render on the server by default
• Client Components — Interactive components marked with 'use client'
• Layouts — Shared UI that wraps multiple pages
• Metadata API — SEO optimization with export const metadata

Code Examples

// app/page.js — Server Component (default)
export default function HomePage() {
  return <h1>Welcome to Next.js!</h1>;
}

// app/counter/page.js — Client Component
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

Practice

Create a Next.js app with a homepage, an about page, and a dynamic route for blog posts.