new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

Next.js · API reference · all subjects

hooks & data fetching

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Memoizing data requests in generateMetadata

To avoid duplicate data fetches between generateMetadata and the page component, use React's cache function to memoize the return value. This ensures the same data fetch executes only once even when called from multiple places.

fetch extends Web API with caching options

Next.js extends the Web fetch() API to allow each server request to set its own persistent caching and revalidation semantics. The cache option indicates how a server-side fetch request will interact with the framework's persistent cache.

fetch can be called directly in Server Components

You can call fetch with async and await directly within Server Components without needing additional wrapper functions.

fetch Server Component example

export default async function Page() { let data = await fetch('https://api.vercel.app/blog') let posts = await data.json() return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ) }

When to use searchParams vs useSearchParams

Use the searchParams prop when search parameters are needed to load data for the page (e.g. pagination, filtering from a database). Use useSearchParams when search parameters are used only on the client (e.g. filtering a list already loaded via props). For callbacks or event handlers, use new URLSearchParams(window.location.search) to read search params without triggering re-renders.

useLinkStatus hook for showing navigation feedback

The useLinkStatus hook can be used to show immediate feedback while a transition is in progress on slow or unstable networks. It returns an object with a pending property that indicates whether a navigation is in progress. You can debounce the feedback by adding an initial animation delay and starting as invisible.

Example of useLinkStatus hook for navigation feedback

'use client' import { useLinkStatus } from 'next/link' export default function LoadingIndicator() { const { pending } = useLinkStatus() return ( <span aria-hidden className={`link-hint ${pending ? 'is-pending' : ''}`} /> ) } This example shows how to use useLinkStatus to display a loading indicator when a link navigation is pending.

Give your agent this brain