Next.js code explainers

javascript

import type { MetadataRoute } from 'next'
import { db } from '@/lib/db'
 
const URLS_PER_SITEMAP = 50_000

Sharding a large sitemap in Next.js

sitemap pagination seo

Intermediate 6 steps

javascript

'use client';
 
import { useActionState } from 'react';
import { submitSignup } from './actions';

Multi-step forms with useActionState in Next.js

server-actions form-state progressive-enhancement

Intermediate 10 steps

javascript

import { notFound } from 'next/navigation'
import { getPhotoById } from '@/lib/photos'
import Modal from '@/components/modal'
import Image from 'next/image'

An intercepted photo modal route in Next.js

dynamic-routes async-components metadata

Intermediate 6 steps

javascript

import type { MetadataRoute } from 'next'
 
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com'

Environment-aware robots.txt in Next.js

seo environment-config web-crawlers

Intermediate 6 steps

javascript

import { NextResponse } from 'next/server';
import { readFile, stat } from 'node:fs/promises';
import { join, extname, normalize } from 'node:path';
import { createHash } from 'node:crypto';

Serving private assets from a Next.js route

path-traversal http-caching etag

Intermediate 6 steps

javascript

export default function DashboardLayout({ children, analytics, notifications }) {
  return (
    <div className="flex h-screen overflow-hidden">
      <Sidebar />

Parallel routes in a Next.js layout

parallel-routes layouts app-router

Intermediate 8 steps

javascript

'use server'
 
import { z } from 'zod'
import { revalidatePath } from 'next/cache'

Handling form submits with Next.js Server Actions

server-actions validation form-handling

Intermediate 7 steps

javascript

import { cache } from 'react'
import { notFound } from 'next/navigation'
import { db } from '@/lib/db'

Deduping data fetches with React cache in Next.js

request-memoization data-fetching server-components

Intermediate 6 steps

javascript

import fs from 'node:fs/promises';
import path from 'node:path';
import { notFound } from 'next/navigation';
import matter from 'gray-matter';

Static MDX blog pages in Next.js

static-generation mdx frontmatter

Intermediate 7 steps

javascript

import OpenAI from 'openai';
 
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

Streaming OpenAI tokens from a Next.js edge route

streaming edge-runtime readablestream

Advanced 9 steps

javascript

import { NextResponse } from 'next/server';
import { Redis } from '@upstash/redis';
 
export const runtime = 'edge';

A deduped page-view counter in Next.js

edge-runtime redis rate-limiting

Intermediate 8 steps

javascript

import { NextResponse } from 'next/server';
import { revalidatePath } from 'next/cache';
import crypto from 'node:crypto';

A GitHub webhook that revalidates Next.js docs

webhooks hmac-verification cache-revalidation

Intermediate 8 steps

javascript

import { after } from "next/server";
import { NextResponse } from "next/server";
import { z } from "zod";
import { resend } from "@/lib/resend";

Deferring work with after() in Next.js

validation background-tasks route-handlers

Intermediate 8 steps

javascript

const legacyRedirects = [
  { from: '/blog/:slug', to: '/articles/:slug' },
  { from: '/shop/product/:id', to: '/store/items/:id' },
  { from: '/about-us', to: '/about' },

How redirects work in Next.js config

redirects routing configuration

Intermediate 7 steps

javascript

import { NextResponse } from 'next/server';
import { db } from '@/lib/db';
 
function csvCell(value) {

Streaming a CSV export in a Next.js route

streaming csv readablestream

Advanced 9 steps

javascript

import { Suspense } from 'react';
import { searchProducts } from '@/lib/products';
import SearchInput from './search-input';

Streaming search results in a Next.js Server Component

server-components suspense streaming

Intermediate 8 steps

javascript

import { notFound } from 'next/navigation'
import { Suspense } from 'react'
import { getPostBySlug, getRelatedPosts } from '@/lib/posts'
import { RelatedPosts } from '@/components/related-posts'

Building a dynamic blog post page in Next.js

server-components dynamic-routing metadata

Intermediate 8 steps

javascript

import { NextResponse } from 'next/server';
import { Redis } from '@upstash/redis';
 
const redis = Redis.fromEnv();

Sliding-window rate limiting in a Next.js route

rate-limiting redis sorted-set

Advanced 8 steps