Need help on one issue - App Router

[KarthyV]

Hey guys, seeking some help on this issue #82042. Can someone address it please?

[icyJoseph]

Interesting issue - I did take a brief look yesterday, some notes I got from that:

The /send-money-to-[country]/[bank].js is a bit weird - it'd capture,http://localhost:3000/send-money-to-foo/bar into:

{
    "country": "send-money-to-foo",
    "bank": "bar"
}

And yes, http://localhost:3000/transactions/foo, in your setup gets captured to:

{
    "country": "transactions",
    "bank": "foo"
}

The way I understand it, when the router figures out the url-to-source-route matchers, it sees this, in this order:

• /send-money-to-[country]/[bank].js should match two param segments
  • it doesn't attempt to match literal segment 1: send-money-to- followed by segment 2 param
  • This is because AFAIK, Next.js params should be the entire segment /[param]/
  • That's why we observe "country": "send-money-to-foo" in the first snippet above
• /transactions/[id].js should match static transitions followed by a param segment

Then the incoming url is matched against these, and the first one hits.

If you were to rename /send-money-to-[country]/[bank].js to /zend-money-to-[country]/[bank].js, now the order of the matchers changes - and you'll get the right hit. This is just a quirk to understand what's going on under the hood. Not a solution proposal.

Perhaps someone else will correct me, but AFAIK, /send-money-to-[country]/ is not necessarily supported to match the literal part of the segment + a param.

An alternative

I think one way to do this would be use rewrites in the config file (next.config.js)

Something like:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: "/send-money-to-:country(\\w+)/:rest*",
        destination: "/send-money-to/:country/:rest*",
      },
    ];
  },
};

export default nextConfig;

Which yes, still requires you to re-organize /send-money-to-[country]/[bank].js into /send-money-to/[country]/[bank].js but for your users, the URL can still be /send-money-to-foo/bar.

[KarthyV]

Hi, sorry took longer to respond. If we implement as you mentioned it'll work if the page doesn't have anything to do with SEO, but in this case it's related to SEO, which shows redirects in the semrush crawl. It's not an recommended approach if ranking comes into play.

[icyJoseph]

I am not following here:

it'll work if the page doesn't have anything to do with SEO, but in this case it's related to SEO, which shows redirects in the semrush crawl. It's not an recommended approach if ranking comes into play.

Where's the redirect? Rewrites don't redirect. In this case, users, crawlers and bots, arrive at /send-money-to-[country]/[bank] - internally Next.js knows that the javascript for that route lives in /send-money-to/[country]/[bank], and serves that result instead.