The issue you’re facing with your NextJS static site on Google Cloud Storage (GCS) is related to how Next.js handles routing and query parameters. Next.js pre-renders static pages, and GCS stores them with exact file paths. When you refresh a page with a query string like (https://example.com/dashboard?platform=ABC), the browser requests the specific file with the query string encoded in the path (dashboard?platform=ABC.html). Since Next.js doesn’t pre-render pages with query strings, this file won’t exist on GCS, leading to the “NoSuchKey” error. You may try the following workarounds:
Configure Google Cloud Storage Website Configuration - You can set up a fallback to always serve the index.html file for any URL. This ensures that when you refresh the page or access any URL with query parameters, the browser will receive index.html, and Next.js will take care of rendering the correct content. This way, any non-existent file request (including one with query parameters) will fall back to index.html, where your Next.js application will take over.
Catch and Handle the Error - Next.js provides built-in support for client-side routing and handling query parameters through useRouter and other functions. This is key to making sure that when the page is refreshed or directly accessed with query parameters, your app can still handle them correctly.
Server-Side Rendering (SSR) - By enabling SSR in Next.js, the initial page load with the query string will be handled on the server. This ensures the server pre-renders the page with the specific query string parameters. However, subsequent page refreshes might still require client-side handling to avoid unnecessary server requests. This configuration tells Next.js to handle /dashboard route with and without trailing slash and pre-render the /dashboard page.
If the above option doesn’t work, you can contact Google Cloud Support to further look into your case. Let me know if it helped, thanks!
