Non-english urls not working

[ziimakc]

Any ideas how to make non-english urls work with next.js?

I reported this some time ago and found a workaround way to make it work, but now it's broken again. #9804

Problem

I have non-english urls like this:

http://localhost/тест

Url encoded with encodeURI('http://localhost/тест') looks like this:

http://localhost/%D1%82%D0%B5%D1%81%D1%82

Pages filename is:

pages/тест

Previous attempts to fix this

In some older next.js versions i was able to make it work like this:

 experimental: {
    async rewrites() {
      return [{ source: encodeURI('/тест'), destination: '/тест' }]
    }
  }

Or even this for all the routes

{ source: '/:rest*', destination: '/:rest*' }

But after some updates this solutions stopped to work.

Current behavior and attempts to make it work
Pure next.js:

1. Client navigation works fine
2. SSR page doesn't load with error:
   GET http://localhost/%D1%82%D0%B5%D1%81%D1%82 404 (Not Found)

---

With rewrites and file rename:

  async rewrites() {
      return [{ source: '/тест', destination: '/test' }]
    }

pages/тест renamed to pages/test

1. Client navigation doesn't work with errors:

http://localhost/_next/static/development/pages/%D1%82%D0%B5%D1%81%D1%82.js net::ERR_ABORTED 404 (Not Found)

GET http://localhost/%D1%82%D0%B5%D1%81%D1%82 404 (Not Found)

2. SSR doesn't work with error:

http://localhost/%D1%82%D0%B5%D1%81%D1%82 404 (Not Found)

---

Adding encodeURI:

  async rewrites() {
      return [{ source: encodeURI('/тест'), destination: '/test' }]
    }

1. Client navigation works, but with error:
   GET http://localhost/_next/static/development/pages/%D1%82%D0%B5%D1%81%D1%82.js net::ERR_ABORTED 404 (Not Found)

2. SSR works fine.

Any ideas to try is welcomed.

[ziimakc]

Made it to work after Link change like this:

<Link href=/test' as=/тест'>
 <a>
  Тест
 </a>
</Link>

Only problem is that styled-components when rendered SSR gives me error, but i can live with it:
Warning: Prop className did not match. Server: "Button__StyledButton-qffv9p-0 lecOXt" Client: "Button__StyledButton-qffv9p-0 kTrJKn"

[ziimakc]

To early to be happy, dynamic paths doesn't work with client navigation, only SSR:

{ href: '/reader/[id]/[name]', as: '/читатель/1/имя' }

`Error: The provided `as` value (/читатель/1/имя) is incompatible with the `href` value (/reader/[id]/[name]).`

[ziimakc]

You can solve this adding to next.config.js:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const pathsToRewrite = [
  ['/пользователь/:id/:slug*', '/user/:id/:slug*'],
  ['/книга/:id/:slug*', '/book/:id/:slug*'],
  ['/тема', '/theme'],
  ['/ошибка', '/error_page'],
]
const rewrites = pathsToRewrite.map(([ru, eng]) => ({ source: encodeURI(ru), destination: eng }))
rewrites.push(...pathsToRewrite.map(([ru, eng]) => ({ source: ru, destination: eng })))

module.exports = withBundleAnalyzer({
  async rewrites() {
    return rewrites
  },
})

[jzaburunov]

What's here that does the trick? Is it bundle-analyzer package is remedy?

[ziimakc]

What's here that does the trick? Is it bundle-analyzer package is remedy?

rewrites