Next.js Basics

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

Create App

```bash npx create-next-app@latest my-app ```

File-Based Routing

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

Page Component

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

Dynamic Routes

```javascript // 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

```javascript 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!