Error with useSearchParams() and Prerendering Pages in Next.js Docker Build

[morganwestcoding]

Link to the code that reproduces this issue

https://github.com/morganwestcoding/forme-nextjs

To Reproduce

I'm encountering an error when attempting to build my Next.js application with Docker. The build process fails during the prerendering of pages, citing issues with useSearchParams() not being wrapped in a suspense boundary and prerender errors on several pages.

Steps to Reproduce:

1. Clone the repo: https://github.com/morganwestcoding/forme-nextjs
2. Run npm install
3. Start the development server with npm run dev to ensure it works
4. Execute docker build . in the terminal

Current vs. Expected behavior

Expected Result: The Docker build completes without errors.

Actual Result: The build fails with errors related to useSearchParams() and prerendering pages.

Error Output:

• useSearchParams() should be wrapped in a suspense boundary at page "/404".
• Error occurred prerendering page "/_not-found".
  Here is full error

' ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/404". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
37.16
37.16 Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
37.16
37.16 ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/profile". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
37.16
37.16 Error occurred prerendering page "/profile". Read more: https://nextjs.org/docs/messages/prerender-error
37.16
Generating static pages (7/15)
37.23 { currentUser: null }
37.23 { currentUser: null }
37.23
37.23 { currentUser: null }
37.23 { currentUser: null }
37.23 { currentUser: null }
37.23 { currentUser: null }
37.23 { currentUser: null }
37.23 { currentUser: null }
37.23 Error in getListings: Dynamic server usage: Page couldn't be rendered statically because it used searchParams.userId. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
37.23 Error: Failed to fetch listings.
37.23 at o (/app/.next/server/app/market/page.js:6:4143)
37.23 at d (/app/.next/server/app/market/page.js:6:4384)
37.23 at em (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:131226)
37.23 at /app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142926
37.23 at Array.toJSON (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:146504)
37.23 at stringify ()
37.23 at eR (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:134889)
37.23 at eP (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135332)
37.23 at AsyncLocalStorage.run (node:async_hooks:338:14)
37.23 at Timeout._onTimeout (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:146956)
37.23 Error in getListings: Dynamic server usage: Page couldn't be rendered statically because it used searchParams.userId. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
37.23 Error: Failed to fetch listings.
37.23 at o (/app/.next/server/app/market/page.js:6:4143)
37.23 at d (/app/.next/server/app/market/page.js:6:4384)
37.23 at em (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:131226)
37.23 at /app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142926
37.23 at Array.toJSON (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:146504)
37.23 at stringify ()
37.23 at eR (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:134889)
37.23 at eP (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135332)
37.23 at Timeout._onTimeout (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132112)
37.23 at listOnTimeout (node:internal/timers:569:17)
37.27 ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/properties". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
37.27
37.27 Error occurred prerendering page "/properties". Read more: https://nextjs.org/docs/messages/prerender-error
37.27
37.30 { currentUser: null }
37.30
37.30 { currentUser: null }
37.30
37.30 ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/market". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
37.30
37.30 Error occurred prerendering page "/market". Read more: https://nextjs.org/docs/messages/prerender-error
37.30
Generating static pages (11/15)
37.31
37.31 ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/trips". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
37.31
37.31 Error occurred prerendering page "/trips". Read more: https://nextjs.org/docs/messages/prerender-error
37.31
37.31 ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/favorites". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
37.31
37.31 Error occurred prerendering page "/favorites". Read more: https://nextjs.org/docs/messages/prerender-error
37.31
37.31 { currentUser: null }
37.32
37.32 ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
37.32
37.32 Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
37.32
37.33 { currentUser: null }
37.35
37.35 ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/reservations". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
37.35
37.35 Error occurred prerendering page "/reservations". Read more: https://nextjs.org/docs/messages/prerender-error
37.35
✓ Generating static pages (15/15)
37.35
37.36 > Export encountered errors on following paths:
37.36 /_not-found
37.36 /favorites/page: /favorites
37.36 /market/page: /market
37.36 /page: /
37.36 /profile/page: /profile
37.36 /properties/page: /properties
37.36 /reservations/page: /reservations
37.36 /trips/page: /trips
"

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:19 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T8103
Binaries:
  Node: 21.6.1
  npm: 9.8.1
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Data fetching (gS(S)P, getInitialProps), Routing (next/router, next/navigation, next/link)

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

.env example

DATABASE_URL=" "
NEXTAUTH_SECRET=" "

GITHUB_ID=" "
GITHUB_SECRET=" "

GOOGLE_CLIENT_ID=" "
GOOGLE_CLIENT_SECRET=" "

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=" "

dockerfile

Specify the base image

FROM node:18-alpine

Set the working directory in the Docker container

WORKDIR /app

Copy package.json and package-lock.json (or yarn.lock if you use Yarn) to work directory

COPY package*.json ./

Install dependencies

RUN npm install

Copy Prisma schema to the container

COPY prisma ./prisma

Generate Prisma client

RUN npx prisma generate

Copy the rest of your application's code

COPY . .

Build your Next.js application

RUN npm run build

Expose the port your app runs on

EXPOSE 3000

Command to run your app

CMD ["npm", "start"]

If you could also walk me through how to deploy to Vercel after resolving docker build you would be a god.

[morganwestcoding]

@laplab Please help me

[abdelkd]

I'm having same error, using missingSuspenseWithCSRBailout: false; in next.config would help

[deadcoder0904]

so i found a solution for my use-case

[morganwestcoding]

@deadcoder0904 i will take a crack at this method and follow up thank you so much

[swarnpallav]

@morganwestcoding In order to use useSearchParams you need to wrap it with React's Suspense. It might be working on development server but it will create issues in production build.

[zelbazk]

I was having this issue on Next 14.1.0 and 14.0.4 when coming to build. Setting missingSuspenseWithCSRBailout: false resolved it immediately.

Was experiencing the same symptoms of everything running fine on npm run dev, but then only occurring when coming to build.

[egofinder]

I'm having same error, using missingSuspenseWithCSRBailout: false; in next.config didn't fix the problem.
Routing Segment Config options helps me.
https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

I insert the export const dynamic = 'force-dynamic' to layout page which cause error.
I don't think this is ideal solution but you can deploy the code at last.

[raulsanchez1024]

@egofinder, I was seeing the same issue when I added missingSuspenseWithCSRBailout. Turns out you have to wrap it with experimental like this

const nextConfig = {
  experimental: {
    missingSuspenseWithCSRBailout: false,
  },
};

[mrswastik-robot]

I faced the same error , on reading nextjs docs I found that , in order to use useSearchParams() the component will have to be wrapped inside React's . Even after doing this , locally everything was running well but ' pre-rendering error' was displayed on the vercel while building. So at last I do this in next.config.js:

experimental: {
        missingSuspenseWithCSRBailout: false,
      },

I didn't face build error after this. Not the optimal solution though.

[zillBoy]

Hi, I can confirm that using missingSuspenseWithCSRBailout: false solves the problem. Thanks @raulsanchez1024

const nextConfig = {
  experimental: {
    missingSuspenseWithCSRBailout: false,
  },
};

[changday]

I'm having same error, using missingSuspenseWithCSRBailout: false; in next.config didn't fix the problem. Routing Segment Config options helps me. https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

I insert the export const dynamic = 'force-dynamic' to layout page which cause error. I don't think this is ideal solution but you can deploy the code at last.

@egofinder Thank you, adding export const dynamic = 'force-dynamic' to layout solved my issues. I tried missingSuspenseWithCSRBailout: false and <Suspense> fallback, these two didn't work for me;