Nextjs output export building error

Question

I am trying to build my nextjs project with output: "export" in my next.config, but I am receiving build errors that I am having trouble resolving related to my dynamic routes. I need to build with output export because my application is a normal SPA that I am serving from a file server and do not need any of the SSR.

The error I am receiving for my dynamic route pages is:

Route /finance/transaction/edit/prerender with `dynamic = "error"` couldn't be rendered statically because it used `searchParams.toJSON`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering

Based off the documentation I am forced to export dynamicParams = false and a generateStaticParams function for my dynamic route pages if I build with output export. I have added those and I am receiving pre rendering errors from the simple generateStaticParams function I added since these routes I am taking the id from the route and doing an API call on the client.

I structured my dynamic routes into two pages: page.tsx and pageClient.tsx. The page.tsx wraps the pageClient.tsx so that I can set 'use client' on my pageClient.tsx and export dynamicParams = false and a generateStaticParams function from my page for my next.config output: "export". (I attached my folder structure to the post as well)

page.tsx

import Page from './clientPage';

export const dynamicParams = false;

export async function generateStaticParams() {
  return [{ id: 'prerender' }];
}

const EditTransactionPage = (props: any) => {
  return <Page {...props} />;
};

export default EditTransactionPage;

clientPage.tsx

'use client';

import React from 'react';
import { useRouter } from 'next/navigation';

type IdRouteSegmentParams = {
  params: {
    id: string;
  };
};

type EditTransactionPageProps = {} & IdRouteSegmentParams;

const EditTransactionPage: React.FC<EditTransactionPageProps> = (props) => {
  const router = useRouter();

  return (
  // render page logic....
  );
};

export default EditTransactionPage;

Does anyone know why my build is failing with the error above? I believe this is a bug since I am following the documentation and not using dynamic features per the documentation: https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features. Any help would be appreciated since I have been banging my head with this problem without any luck.

Barbary Lion · Answer

Update: I added dynamic = 'force-static' to my dynamic route pages and my build works successfully.For example, my pages now look like this with exporting dynamic = 'force-static'.import Page from './clientPage';

export const dynamic = 'force static';
export const dynamicParams = false;

export async function generateStaticParams() {
  return [{ id: 'prerender' }];
}

const EditTransactionPage = (props: any) => {
  return <Page {...props} />;
};

export default EditTransactionPage;Do dynamic routes require exporting dynamic = 'force static' in order for the next.config output: "export" to build properly?

Nextjs output export building error

1 Reply