Next.js

Next.js Foundations

The core mental model: routing, components, and data — the 20% that unlocks 80% of Next.js.

1. 1

   What is Next.js (and why use it)?

   🧸Explain like I'm 5

   Next.js is a framework built on top of React. React gives you components; Next.js adds the *application* concerns around them: routing, rendering strategies (server vs. client), data fetching, and bundling — all pre-wired so you can focus on features.
2. 2

   File-based routing with the App Router

   🧸Explain like I'm 5

   Folders inside `app/` become URL segments. A `page.tsx` makes a route public, and `layout.tsx` wraps everything beneath it. A folder like `[slug]` becomes a dynamic segment.

   example

   Copy

   // app/blog/[slug]/page.tsx
   export default async function Page({
     params,
   }: {
     params: Promise<{ slug: string }>
   }) {
     const { slug } = await params
     return <h1>Post: {slug}</h1>
   }

3. 3

   Server vs. Client Components

   🧸Explain like I'm 5

   Components are Server Components by default — they render on the server and ship zero JavaScript. Add `'use client'` at the top of a file only when you need interactivity (state, effects, event handlers, browser APIs).

   example

   Copy

   'use client'
   import { useState } from 'react'
   
   export function Counter() {
     const [n, setN] = useState(0)
     return <button onClick={() => setN(n + 1)}>Clicked {n}</button>
   }

4. 4

   Fetching data

   🧸Explain like I'm 5

   Server Components can be `async` and `await` data directly — no `useEffect`, no loading flags. The result is rendered on the server and streamed to the browser.

   example

   Copy

   export default async function Page() {
     const res = await fetch('https://api.example.com/posts')
     const posts = await res.json()
     return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
   }

5. 5

   Navigating with <Link>

   🧸Explain like I'm 5

   Use the `<Link>` component from `next/link` for navigation. It prefetches pages in the background and does client-side transitions, so moving between pages feels instant.

   example

   Copy

   import Link from 'next/link'
   
   <Link href="/blog/hello">Read the post</Link>

6. 6

   Styling your app

   🧸Explain like I'm 5

   Next.js supports Tailwind CSS, CSS Modules, global CSS, and CSS-in-JS. Tailwind is the most popular: utility classes right in your markup. CSS Modules (`*.module.css`) scope class names to a single component so they never collide.

   example

   Copy

   // component.module.css
   .card { padding: 1rem; border-radius: 8px; }
   
   // Component.tsx
   import styles from './component.module.css'
   export default () => <div className={styles.card}>Hi</div>

7. 7

   Shared layouts and templates

   🧸Explain like I'm 5

   A `layout.tsx` wraps every page beneath it and keeps its state across navigations (great for navbars and sidebars). A `template.tsx` is similar but re-mounts on every navigation — use it when you need a fresh instance each time (e.g. enter animations).

   example

   Copy

   // app/dashboard/layout.tsx
   export default function Layout({ children }: { children: React.ReactNode }) {
     return <section><Sidebar />{children}</section>
   }

8. 8

   Loading states & streaming with Suspense

   🧸Explain like I'm 5

   Add a `loading.tsx` next to a page and Next.js shows it instantly while the page's data loads — powered by React Suspense. You can also wrap any slow component in `<Suspense>` to stream the rest of the page immediately.

   example

   Copy

   // app/dashboard/loading.tsx
   export default function Loading() {
     return <p>Loading your dashboard…</p>
   }

9. 9

   Handling errors & not-found

   🧸Explain like I'm 5

   An `error.tsx` file (a Client Component) catches runtime errors in its segment and shows a fallback with a `reset()` button. A `not-found.tsx` renders when you call `notFound()` or hit an unknown route.

   example

   Copy

   'use client'
   // app/error.tsx
   export default function Error({ reset }: { reset: () => void }) {
     return <button onClick={reset}>Try again</button>
   }

10. 10

    Metadata & SEO

    🧸Explain like I'm 5

    Export a `metadata` object (or an async `generateMetadata` function) from any page or layout to set the title, description, and Open Graph tags. Next.js injects them into the `<head>` for you — no extra library needed.

    example

    Copy

    export const metadata = {
      title: 'My Blog',
      description: 'Thoughts on building for the web',
    }

11. 11

    Optimizing images & fonts

    🧸Explain like I'm 5

    Use `next/image` for automatic resizing, lazy loading, and modern formats — it prevents layout shift and slow loads. Use `next/font` to self-host Google Fonts with zero layout shift and no extra network request.

    example

    Copy

    import Image from 'next/image'
    
    <Image src="/hero.png" alt="Hero" width={800} height={400} priority />

12. 12

    Environment variables & config

    🧸Explain like I'm 5

    Put secrets in `.env.local` and read them with `process.env.MY_KEY` on the server. Variables prefixed with `NEXT_PUBLIC_` are exposed to the browser — never put secrets there. `next.config.ts` controls build-time options like image domains and redirects.

    example

    Copy

    // .env.local
    DATABASE_URL="postgresql://..."
    NEXT_PUBLIC_SITE_NAME="DevPath"
    
    // server code
    const db = process.env.DATABASE_URL