Next.js Rewrite request error

Hey guys, greetings.

I’m building a Next.js application, and I’d like also to have a docs page. I have defined all of my pages (/about, /blog, /docs ) - but I have a little issue with my /docs.

I want to use a different repo ( I don’t want to make my main repo too large because of the docs content, so I want to create a different one for that).

What I want is, when a user navigate to /docs, it should rewrite the request to docs.maindomain.com.

docs.maindomain.com is the repo for the docs, so I want to server the content to the users directly from maindomain.com/docs.

I’ve created a vercel.json file, and added this…

{
  "rewrites": [
    {
      "source": "/docs/:path*",
      "destination": "https://docs.tryharmono.com/:path*"
    }
  ]
}

so far, it’s working but the styles are not being fetched. On the console, I can see some 404 on my static files.

      GET https://www.maindomain.com/_next/static/chunks/fd9d1056-d88b6ffed1219985.js net::ERR_ABORTED 404 (Not Found)Understand this error
test:1 

The styles is failing because they’re in the docs.maindomain.com, and not maindomain.com.

I don’t know how to get the styles from the docs.maindomain.com - so I’m asking for help.

it would be nice to do a rewriting for the assets/static files, but I can’t.

If there’s any way, please let me know :slight_smile:

P.S.: Clerk.com is doing something similar by the way .

Have you tried using a proxy rewrite instead of a redirect?

1 Like

hey, sorry for the late response. I’m only just getting back to my PC now.

I’ve not used proxy rewrite, I only just tried using https://vercel.com/docs/edge-network/rewrites

Hi, @irorochad!

From what I can see, your configuration rewrote the main document requests but didn’t properly handle the associated static assets which led to a functional but unstyled documentation page. This is why you saw the content of your docs but without the correct styling and potentially missing some functionality provided by JavaScript files.

You’ll need to update your vercel.json file to add a second rewrite rule specifically for static assets and include a headers configuration for security. I’ve shared an example below, what it does is rewrites main content requests from /docs to docs.maindomain.com and static asset requests (in the /_next directory) to the correct location on docs.maindomain.com.

Example
{
  "rewrites": [
    {
      "source": "/docs/:path*",
      "destination": "https://docs.maindomain.com/:path*"
    },
    {
      "source": "/docs/_next/:path*",
      "destination": "https://docs.maindomain.com/_next/:path*"
    }
  ],
  "headers": [
    {
      "source": "/docs/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "SAMEORIGIN"
        }
      ]
    }
  ]
}

After updating and deploying this configuration, your documentation should load correctly, including all styles and static assets. If issues persist, verify your documentation site setup, check for absolute URLs, and clear your browser cache.

Let us know how you get on!

Thank you @pawlean . The solution did work well. I noticed that the error is from the docs configuration. I’ve fixed it. Thanks!

1 Like

Great to hear, @irorochad!

Feel free to drop in Community - Vercel Community and share what you’re building by the way :smile:

Oh, and thanks @josesanchez54 for jumping in here as well!

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.