Why am I getting a ‘NoSuchKey’ error on page refresh in Google Cloud Storage for my static site?

[kamal_lp]

I have a static site build with NextJS hosted on Google Cloud Storage, and I’m running into an issue with page refreshes. When I navigate from https://example.com/auth to https://example.com/dashboard?platform=ABC, everything works as expected. But if I refresh the page at https://example.com/dashboard?platform=ABC, I get an error:

<Error>
  <Code>NoSuchKey</Code>
  <Message>The specified key does not exist.</Message>
</Error>

It seems like Google Cloud Storage is looking for an exact file match with the query string, but can’t find it. Is there a way to prevent this error on page refreshes or handle query parameters correctly?

[Joy_S]

Hi @kamal_lp 

Welcome to Google Cloud Community!

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:

1. 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. 
2. 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.
3. 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!