Next.js code explainers

javascript

import { ImageResponse } from 'next/og'
 
export function manifest() {
  return {

Generating a PWA manifest and icon in Next.js

pwa metadata og-image

Intermediate 9 steps

javascript

'use client';
 
import { useRouter } from 'next/navigation';
import Link from 'next/link';

Archiving with router.refresh in Next.js

client-component data-mutation transitions

Intermediate 7 steps

javascript

import { NextResponse } from 'next/server';
 
const locales = ['en', 'fr', 'de', 'es'];
const defaultLocale = 'en';

Locale routing with Next.js middleware

middleware i18n content-negotiation

Intermediate 10 steps

javascript

import { NextResponse } from 'next/server';
import { createWriteStream } from 'node:fs';
import { mkdir } from 'node:fs/promises';
import { pipeline } from 'node:stream/promises';

Streaming file uploads in a Next.js route

file-upload streams validation

Intermediate 9 steps

javascript

'use client';
 
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

How a Next.js error boundary recovers

error-boundary error-handling observability

Intermediate 8 steps

javascript

'use client';
 
import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
import { loadMorePosts } from '@/app/actions/posts';

Infinite scroll with Server Actions in Next.js

infinite-scroll intersection-observer server-actions

Intermediate 8 steps

javascript

import { db } from '@/lib/db'
 
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com'

Generating a dynamic sitemap in Next.js

sitemap seo database-query

Intermediate 5 steps

javascript

import { NextResponse } from 'next/server';
import { jwtVerify } from 'jose';
 
const PROTECTED_PREFIXES = ['/dashboard', '/settings', '/billing'];

Gating routes with Next.js middleware and JWTs

authentication middleware jwt

Intermediate 8 steps

javascript

'use client';
 
import { useOptimistic, useTransition } from 'react';
import { toggleLike } from '@/app/actions/likes';

Optimistic like buttons in Next.js

optimistic-ui react-hooks server-actions

Intermediate 7 steps

javascript

import Link from "next/link";
import { prisma } from "@/lib/prisma";
 
const PAGE_SIZE = 20;

A searchable, paginated table as a Next.js Server Component

server-components pagination search

Intermediate 6 steps

javascript

import { Suspense } from 'react';
import { getProducts } from '@/lib/api/products';
import { formatPrice } from '@/lib/format';

Streaming a product list with Suspense in Next.js

server-components suspense streaming

Intermediate 8 steps

javascript

import { NextResponse } from 'next/server'
 
const UPSTREAM = 'https://api.exchangerate.host/latest'

A cached exchange-rate proxy in Next.js

route-handler caching revalidation

Intermediate 7 steps

javascript

'use server'
 
import { z } from 'zod'
import { redirect } from 'next/navigation'

How a Next.js Server Action validates a form

server-actions form-validation zod

Intermediate 7 steps

javascript

import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';
import { SignJWT, jwtVerify } from 'jose';

JWT session cookies in a Next.js Route Handler

authentication jwt cookies

Intermediate 8 steps

javascript

'use server'
 
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

How a Next.js Server Action updates a post

server-actions authorization validation

Intermediate 7 steps

javascript

import { notFound } from 'next/navigation';
 
const PER_PAGE = 24;
const SORT_OPTIONS = ['relevance', 'price-asc', 'price-desc', 'newest'];

Parsing search params in a Next.js page

input-validation query-params pagination

Intermediate 10 steps

javascript

import { NextResponse } from 'next/server';
import Stripe from 'stripe';
import { headers } from 'next/headers';

Handling Stripe webhooks in Next.js

webhooks signature verification payment processing

Intermediate 7 steps