Next functions

Next.js provides built-in functions designed to optimize and enhance your application. Here are some noteworthy highlights, for a comprehensive list, refer to the Official Next.js docs (opens in a new tab).

fetch()

Next.js extends the native Web fetch() API (opens in a new tab) to allow each request on the server to set its own persistent caching semantics.

export default async function Page() {
  // This request should be cached until manually invalidated.
  // Similar to `getStaticProps`.
  // `force-cache` is the default and can be omitted.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' });
 
  // This request should be refetched on every request.
  // Similar to `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' });
 
  // This request should be cached with a lifetime of 10 seconds.
  // Similar to `getStaticProps` with the `revalidate` option.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  });
 
  return <div>...</div>;
}

fetch(url, options)

Since Next.js extends the Web fetch() API (opens in a new tab), you can use any of the native options available (opens in a new tab).

Further, Next.js polyfills fetch on both the client and the server, so you can use fetch in both Server and Client Components (opens in a new tab).

options.cache

Configure how the request should interact with Next.js HTTP cache.

fetch(https://..., { cache: 'force-cache' | 'no-store' });

• force-cache (default) - Next.js looks for a matching request in its HTTP cache.
  • If there is a match and it is fresh, it will be returned from the cache.
  • If there is no match or a stale match, Next.js will fetch the resource from the remote server and update the cache with the downloaded resource.
• no-store - Next.js fetches the resource from the remote server on every request without looking in the cache, and it will not update the cache with the downloaded resource.

Good to know:

• If you don't provide a cache option, Next.js will default to force-cache, unless a dynamic function (opens in a new tab) such as cookies() is used, in which case it will default to no-store.
• The no-cache option behaves the same way as no-store in Next.js.

options.next.revalidate

Configure the re-validation of the cached response, you can use the next.revalidate option in the fetch call.

fetch(https://..., { next: { revalidate: false | 0 | number } });

Set the cache lifetime of a resource (in seconds).

• false - Cache the resource indefinitely. Semantically equivalent to revalidate: Infinity. The HTTP cache (opens in a new tab) may evict older resources over time.
• 0 - Prevent the resource from being cached.
• number - (in seconds) Specify the resource should have a cache lifetime of at most n seconds.

redirect()

The redirect function allows you to redirect the user to another URL.

import { redirect } from 'next/navigation';
 
async function fetchTeam(id) {
  const res = await fetch('https://...');
  if (!res.ok) return undefined;
  return res.json();
}
 
export default async function Profile({ params }) {
  const team = await fetchTeam(params.id);
  if (!team) {
    redirect('/login');
  }
 
  // ...
}

useRouter()

The useRouter hook allows you to programmatically change routes inside Client Components (opens in a new tab).

'use client';
 
import { useRouter } from 'next/navigation';
 
export default function Page() {
  const router = useRouter();
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  );
}

Metadata Object and generateMetadata()

import { Metadata } from 'next';
 
// either Static metadata
export const metadata: Metadata = {
  title: '...',
};
 
// or Dynamic metadata
export async function generateMetadata({ params }) {
  return {
    title: '...',
  };
}

Explore Next.js documentation (opens in a new tab) for more details. There is a lot of cool stuff you can do with the metadata object.

notFound()

The notFound function allows you to render the [not-found file](https://nextjs.org/docs/app/api-reference/file-conventions/not-found) within a route segment as well as inject a <meta name="robots" content="noindex" /> tag.

import { notFound } from 'next/navigation';
 
async function fetchUsers(id) {
  const res = await fetch('https://...');
  if (!res.ok) return undefined;
  return res.json();
}
 
export default async function Profile({ params }) {
  const user = await fetchUser(params.id);
 
  if (!user) {
    notFound();
  }
 
  // ...
}