If using Next.js app router, cannot use static `export` output mode

[ryscheng]

Steps to reproduce:

1. Create a new Next.js app, using the app router
   https://docs.plasmic.app/learn/nextjs-quickstart#framework=nextjs-app-dir
2. Configure your next.config.js to do static exports:

// @ts-check

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

Here's the error you get:

Error occurred prerendering page "/about". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Page with `dynamic = "error"` couldn't be rendered statically because it used `searchParams.toJSON`.
    at staticGenerationBailout (/home/ryscheng/git/github/hypercerts-org/oso/frontend/.next/server/chunks/735.js:98287:15)
    at Object.get (/home/ryscheng/git/github/hypercerts-org/oso/frontend/.next/server/chunks/735.js:98237:70)
    at stringify (<anonymous>)
    at pb (/home/ryscheng/git/github/hypercerts-org/oso/frontend/.next/server/chunks/735.js:99268:9)
    at mb (/home/ryscheng/git/github/hypercerts-org/oso/frontend/.next/server/chunks/735.js:99167:29)
    at Timeout._onTimeout (/home/ryscheng/git/github/hypercerts-org/oso/frontend/.next/server/chunks/735.js:98992:16)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7)

[AnshSinghSonkhia]

Hey @ryscheng,
The error you're encountering appears to be related to a specific issue with static site generation (SSG) in Next.js. The error message mentions the use of searchParams.toJSON on a page with dynamic = "error", which seems to be causing the issue with static rendering.

Here are a few steps you can take to troubleshoot and potentially resolve the issue:

1. Check Dynamic Imports - The error seems to be mentioning a dynamic import with a value of "error". Make sure you review your dynamic imports and ensure they are set up correctly. If you are using dynamic imports, double-check that the imported components are SSG-compatible.
2. Review Code for toJSON Usage: Look through your code to find where searchParams.toJSON is being used. It's possible that this usage might be conflicting with the SSG process. If this usage isn't essential for SSG, consider removing or refactoring it to avoid the error.
3. Check Dependencies and Compatibility
4. Check Next.js Documentation: The error message references a specific URL for more information: https://nextjs.org/docs/messages/prerender-error

Hope it helps!
Let's Connect!!

[ryscheng]

Thanks for getting back to me. Sending steps to reproduce:

1. Create a brand new Plasmic project. Publish it
2. Create a brand new Next.js application via npx create-plasmic-app. Make sure to select the app router, not the pages router.
3. Add output: 'export', to your next.config.js.

This is the error you get

StaticGenBailoutError: Page with `dynamic = "error"` couldn't be rendered statically because it used `searchParams.toJSON`.
    at staticGenerationBailout (/home/ryscheng/Downloads/my-app/.next/server/chunks/587.js:156:15)
    at Object.get (/home/ryscheng/Downloads/my-app/.next/server/chunks/208.js:12946:70)
    at stringify (<anonymous>)
    at pb (/home/ryscheng/Downloads/my-app/.next/server/chunks/208.js:14337:9)
    at mb (/home/ryscheng/Downloads/my-app/.next/server/chunks/208.js:14236:29)
    at Timeout._onTimeout (/home/ryscheng/Downloads/my-app/.next/server/chunks/208.js:14061:16)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  code: 'NEXT_STATIC_GEN_BAILOUT'
}

I think this is a bug with Plasmic, because I am able to reproduce this with brand new projects with no code changes.

[jaslong]

Hey @ryscheng, nice seeing you!

The reason this is happening is because the generated catchall page uses searchParams, a dynamic function which only works with dynamic rendering. To use it with output: 'static', you'll need to remove references to searchParams. If your Plasmic page relies on search params, you would need to create a new client component and call useSearchParams to get search params on the client, then pass it into PlasmicComponent. Note SSR would not be possible in this case.

[ryscheng]

Ah of course! Thanks for the response @jaslong