Transliterating "Cyrillic" to "Latin"

[rsipakov]

Hey there,

I have an interesting question for users who use the Cyrillic alphabet for their blog. We have already discussed how to make a multilingual blog. A brunch "demo/translate" with a solution based on "next-translate" as an example present.

But in the multilingual blog and the monolingual site example, using Cyrillic has the following problem with "tags". We will see the tag's name in the target language for tags in the address bar. And in the case of using Cyrillic as the blog's language, we will see Cyrillic in the address bar.

For example, if we will use as a tag "Дом" for a post, then in the address bar, we will see like localhost:300/tags/дом. It is not suitable for search engines.

In this case, it would be good to use the automatic converting of Cyrillic to Latin transcriptions. I tried integrating this solution "cyrilic-to-translit-js". If I add the following code to the file components/Tag.js:

import Link from 'next/link'
import kebabCase from '@/lib/utils/kebabCase'

import CyrillicToTranslit from 'cyrillic-to-translit-js'

const cyrillicToTranslit = new CyrillicToTranslit()

const Tag = ({ text }) => {
  const toTranslit = cyrillicToTranslit.transform(text)
  return (
    <Link href={`/condotags/${kebabCase(toTranslit)}`}>
      <a className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
        {text.split(' ').join('-')}
      </a>
    </Link>
  )
}

export default Tag

Then in the address bar, I will see the following localhost:300/tags/dom. But in this case, the page has a 404...

Perhaps a similar upgrade should be done in the following file pages/tags/[tag].js for getStaticPaths. But I don't know exactly how to do it. In addition, it is required to make an update for the rss and TagSEO.

Can anyone help me with this question? Perhaps it would be useful to other users who use Cyrillic.

Thank you!

[timlrx]

I think the best way would probably be to use rewrites. It would look something like this:

module.exports = {
  async rewrites() {
    return [
      {
        source: "/ru/tags/дом",
        destination: "/ru/tags/dom",
        locale: false,
      },
    ]
  },
}

The downside is that you would have to do this manually for each tag that you think needs to be converted.

An alternative approach would be to use middleware. With this, you could run CyrillicToTranslit on all paths coming from /ru/tags and redirect them. The downside is that you have to deploy it with the next.js server or on vercel. Have not actually tried the middleware feature myself, so I can't provide more advise beyond the idea.