Next.js 16 cheatsheet

Next.js 16: Metadata and configuration

4 common Next.js 16 tasks.

Set page metadata

Export metadata from a page or layout for the title and description.

export const metadata = {
  title: "About",
  description: "About this site",
};

Use next/image for resizing, lazy loading and modern formats.

import Image from "next/image";

<Image src="/hero.png" alt="Hero" width={800} height={400} />

Only variables prefixed with NEXT_PUBLIC_ are included in the browser bundle.

NEXT_PUBLIC_API_URL=https://api.example.com

Configure Next.js in a typed config file.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  reactStrictMode: true,
};

export default nextConfig;