{"dataset":{"id":"00000000-0000-0000-0000-000000000006","slug":"nextjs-best-practices","name":"Next.js best practices","description":"Source-linked guidance on Next.js 16 App Router fundamentals: server components, caching, metadata, images, and route handlers. Scoped to Next.js 16; not a general React corpus.","visibility":"public","version":1,"documentCount":5,"publisher":"Koskamo editorial","license":"Original summaries; linked sources retain their own terms.","reviewedAt":"2026-10-04T00:00:00.000Z","readOnly":true,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},"total":5,"documents":[{"title":"Route Handlers for HTTP endpoints","sourceUrl":"https://nextjs.org/docs/app/api-reference/file-conventions/route","text":"A route file creates custom request handlers for a route using the Web Request and Response APIs. Export an async function named after the HTTP method it handles; GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS are supported. Route Handlers live in the app directory and are the right surface for webhooks and API endpoints, while mutations from the UI belong in Server Actions — that division is Koskamo editorial guidance, not a Next.js requirement. With Cache Components enabled, GET Route Handlers follow the same prerendering model as pages. Scope: Next.js 16 App Router. Reviewed October 4, 2026.","id":"nextjs-best-practices:Route Handlers for HTTP endpoints","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Image optimization with next/image","sourceUrl":"https://nextjs.org/docs/app/api-reference/components/image","text":"The next/image component optimizes images: it serves modern formats (WebP by default, AVIF when configured in next.config), and lazy-loads by default. Local static imports of jpg, png, webp, or avif files receive dimensions and a blurDataURL automatically unless the image is animated. Remote images need explicit width and height or the fill property, and their hosts must be allowed through remotePatterns in next.config. For the largest above-the-fold image, preload it: Next.js 16 deprecates the priority property in favor of the preload property, and loading=\"eager\" or fetchPriority=\"high\" are the alternatives. Scope: Next.js 16. Reviewed October 4, 2026.","id":"nextjs-best-practices:Image optimization with next/image","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Metadata for search and social","sourceUrl":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images","text":"Define page metadata by exporting a metadata object for static values, or a generateMetadata function for values computed at request time, from a layout or page file. Both exports are supported only in Server Components. The metadata object covers fields such as title and description plus Open Graph values; the generateMetadata documentation lists every available field. Prefer the metadata exports over hand-written head tags so Next.js can deduplicate and stream them; that preference is Koskamo editorial guidance. Scope: Next.js 16 App Router. Reviewed October 4, 2026.","id":"nextjs-best-practices:Metadata for search and social","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Caching with Cache Components","sourceUrl":"https://nextjs.org/docs/app/getting-started/caching","text":"Next.js 16 caching centers on Cache Components, enabled with cacheComponents: true in next.config. The \"use cache\" directive caches the return value of an async function, or an entire component, page, or layout; placed at the top of a file it caches every export. Cached results become part of the prerendered static shell and may be included in prefetches. A component that needs fresh data on every request omits \"use cache\" and renders inside a Suspense boundary, so the fallback ships with the static shell while the async work streams at request time. Reading runtime data such as cookies() inside a Suspense boundary does not opt the whole route into dynamic rendering the way the previous rendering model did. The older fetch cache options, route segment config, and unstable_cache are documented separately as the previous caching model. Scope: Next.js 16 with Cache Components enabled. Reviewed October 4, 2026.","id":"nextjs-best-practices:Caching with Cache Components","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Server Components by default in the App Router","sourceUrl":"https://nextjs.org/docs/app/getting-started/server-and-client-components","text":"Layouts and pages are Server Components by default: they fetch data and render on the server, can cache the result, and stream HTML to the client. Add the \"use client\" directive only where interactivity is required — state, event handlers, effects, browser-only APIs, and custom hooks — because a \"use client\" file pulls every module it imports into the client bundle. Keep client boundaries small and deep in the tree, and pass Server Components into Client Components as children or props rather than importing them; React context is not supported in Server Components, so wrap providers in a Client Component and render them as deep as possible. Only environment variables prefixed NEXT_PUBLIC_ reach the client bundle; unprefixed variables are replaced with an empty string on the client. Importing the server-only package in modules that read secrets turns an accidental client import into a build-time error. Scope: Next.js 16 App Router. Reviewed October 4, 2026.","id":"nextjs-best-practices:Server Components by default in the App Router","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"}]}