Next.js Basics

Next.js adds server-side rendering and routing to React.

Create App

npx create-next-app@latest my-app

File-Based Routing

pages/
  index.js        → /
  about.js        → /about
  blog/
    [id].js       → /blog/:id

Page Component

// pages/index.js
export default function Home() {
  return <h1>Home Page</h1>;
}

Dynamic Routes

// pages/blog/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post: {id}</h1>;
}

Link Component

import Link from 'next/link';

<Link href="/about">About</Link>

Remember

• File-based routing
• Built-in optimization
• Server-side rendering
• API routes included

Next: Learn Next.js data fetching!