Fix dynamic server usage error in Next.js

Hey fellow developer, if you are here because when you build your Next.js app, you’re getting a bunch of error’s like this, then I might have something for you which might help.

Database Error: n [Error]: Dynamic server usage: Page couldn’t be rendered statically because it used `unstable_noStore`.

Why This Message Occurred

As you probably already read in Next.js docs here, while generating static pages, Next.js will throw a DynamicServerError if it detects usage of a dynamic function, and catch it to automatically opt the page into dynamic rendering. However, when it’s uncaught, it will result in this build-time error.

For example, take a look at this page:

import Form from '@/app/ui/invoices/edit-form';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';

export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;
  const [invoice, customers] = await Promise.all([
    fetchInvoiceById(id),
    fetchCustomers(),
  ]);
  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: 'Invoices', href: '/dashboard/invoices' },
          {
            label: 'Edit Invoice',
            href: `/dashboard/invoices/${id}/edit`…