Symbols/foreign letters not working with localized pathnames

[Entropy-10]

Description

When using localized pathnames, if you currently try to use symbols or foreign letters it causes the url to generate incorrectly and cause a 404 not found error.

navigation.ts

export const pathnames = {
    '/': '/',
    '/test': {
        en: '/test',
        ja: '/テスト'
    }
} satisfies Pathnames<typeof locales>

Mandatory reproduction URL (CodeSandbox or GitHub repository)

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Click on Go to Japanese Test Page
3. See incorrect url and 404 not found error

Expected behaviour

Expected: http://localhost:3000/ja/テスト
Actual Result: http://localhost:3000/ja/%E3%83%86%E3%82%B9%E3%83%88.

[amannn]

Thanks for the report!

Also the rewrite in the middleware doesn't seem to handle this URL correctly: https://xskh6r-3000.csb.app/ja/テスト

[AdamZaczek]

Localized pathnames are super important for any platform relying on content. We've been trying to get around this, with no success. Looking forward to the fix!

[amannn]

Contributions are welcome here in case someone wants to look into it.

I think this can be tackled as following:

1. Add a failing test in the middleware test suite
2. Adapt the middleware accordingly
3. Add a failing test in the localized navigation test suite
4. Adapt createLocalizedPathnamesNavigation accordingly (react-client implementation, react-server implementation)

See also the contributors guidelines.

[reilnuud]

Can't commit to contributing a fix here, but our team figured out a workaround in the meantime.

Since the route segments are getting URI encoded during the request process, there's no match when comparing the defined routes and the actual GET requests since the pathnames aren't encoded.

So the path:
/مدونة /[slug]
doesn't match the req url:
/%D9%85%D8%AF%D9%88%D9%86%D8%A9/[slug]

We implemented a workaround for this by wrapping export const pathnames in a function encodePathSegments:

I can't promise this code will work for you or that is exhaustive but it did the trick for our team.

navigation.js

const encodePathSegments = paths =>
  Object.entries(paths).reduce((agg, [path, localeRoutes]) => {
    if (typeof localeRoutes === "string") {
      // eslint-disable-next-line no-param-reassign
      agg[path] = localeRoutes;
      return agg;
    }
    // eslint-disable-next-line no-param-reassign
    agg[path] = Object.entries(localeRoutes).reduce(
      (routes, [lang, langRoute]) => {
        // eslint-disable-next-line no-param-reassign
        routes[lang] = langRoute
          .split("/")
          .map(segment => {
            if (!segment.match(/^\[/)) return encodeURI(segment);
            return segment;
          })
          .join("/");
        return routes;
      },
      {}
    );
    return agg;
  }, {});

export const pathnames = encodePathSegments({
  /* pathnames object */
})

[amannn]

I had a moment to look into this, would someone like to try out the prerelease from #959?

Many thanks to @reilnuud for sharing a workaround here! Note that as part of upgrading, this workaround needs to be removed as defined pathnames are expected to be decoded.

[reilnuud]

FYI I know this one is closed, but we'll be testing this when we do a round of maintenance on the related project in the next couple weeks here and I'll drop an update here regarding how it goes. Thanks for this fix!