How to use (experimental) custom routes / rewrites (#9081) on vercel?

[joafeldmann]

I am using the following next config to rewrite dynamic urls to the next page pages/post/[id], which works great on my local machine (using next@9.4.2)

// next.config.js
module.exports = {
  experimental: {
    async rewrites() {
      return [
        {
          source: '/(.*)-:id(\\d+).html',
          destination: `/post/:id`,
        }
      ]
    }
  }
}

However, when I deploy the app to vercel I get an 404 for these routes. I am further confused with vercel routes (https://vercel.com/docs/configuration#project/routes) and rewrites (https://vercel.com/docs/configuration#project/rewrites).

Which solution should be used when hosting next.js on vercel?

[ijjk]

Hi, the new rewrites/redirects/headers in next.config.js are automatically used when deploying on Vercel and the above rewrite looks like it is correctly working also. Can you provide a deployment or repo with a reproduction where this isn't working?

Working deployment with above rewrite in next.config.js: https://tst-rewrite-id980i1gh.now.sh/post-2.html

[joafeldmann]

Hi, first thanks for clarifying that the rewrites should already work on vercel as well.

I think I found the problem:
When I use /post-123.html routing works well, locally and on vercel. But the URL I used for testing also has some leading "folder", e.g. /foo/post-123.html which works locally, but not on vercel!

Is my regex wrong for this type of url? Anyway, I would expect the local routing to behave like the routing on vercel.

[ijjk]

It looks like there may be an inconsistency in handling the un-named multi-match (.*) in the regex you are using since that should match the leading folder as it does locally which we are investigating.

In the meantime using /:path*-:id(\\d+).html for the regex should make sure to match with a leading folder example deployment

[joafeldmann]

Ok fine, thanks for you help!

[ijjk]

Hi, a fix in vercel/vercel#4484 to make sure your original regex works as expected on Vercel has been landed on @vercel/next@canary and should be released on stable soon. Thanks for the information to track this down!

[joafeldmann]

Great, thanks a lot!

[svobik7]

@joafeldmann could you please provide me with source-code of your example. I am trying to setup the same rewrite but getting Error: Rewrites don't support auto-exported dynamic pages yet. Using this will cause the page to fail to parse the params on the client

[joafeldmann]

I think your problem is not related to a faulty regex. Did you read https://github.com/vercel/next.js/blob/master/errors/rewrite-auto-export-fallback.md?

[svobik7]

I see, so that means your pages/post/[id] page is not SSG but use getInitialProps / getServerSideProps, right?