Techiio-author
Started by Sagar RabidasOct 28, 2021

Open
Nextjs can I add lang/lang-code route prefix

3 VIEWES 1 LIKES 0 DISLIKES SHARE
1 LIKES 0 DISLIKES 3 VIEWES SHARE

My incident question me to have lang/lang-code prefix in my routes. We have to shop in local garage users lang and lang code preference after which on every occasion he comes to web page, we have to redirect him to selected lang/lang-code prefix (en/en-us) Also he can choose country/ language at any time so I need to be able to redirect him to new lang/lang-code at any time. So is this even possible in Nextjs ?

1 Replies

Techiio-commentatorDebarghya Das replied 3 months ago0 likes0 dislikes

You can achieve translated URL routes by leveraging rewrites in your next.config.js file.

module.exports = {
    i18n: {
        locales: ['en', 'de', 'es'],
        defaultLocale: 'en'
    },
    async rewrites() {
        return [
            {
                source: '/de/uber-uns',
                destination: '/de/about',
                locale: false // Use `locale: false` so that the prefix matches the desired locale correctly
            },
            {
                source: '/es/nosotros',
                destination: '/es/about',
                locale: false
            }
        ]
    }
}

Besides, if you want a consistent routing behavior during client-side navigations, you can create a wrapper around the next/link component to ensure the translated URLs are displayed.

import { useRouter } from 'next/router'
import Link from 'next/link'
const pathTranslations = {
    de: {
        '/about': '/uber-uns'
    },
    es: {
        '/about': '/sobrenos'
    }
}
const TranslatedLink = ({ href, children }) => {
    const { locale } = useRouter()
    // Get translated route for non-default locales
    const translatedPath = pathTranslations[locale]?.[href] 
    // Set `as` prop to change displayed URL in browser
    const as = translatedPath ? `/${locale}${translatedPath}` : undefined
    return (
        <Link href={href} as={as}> 
            {children}
        </Link>
    )
}
export default TranslatedLink

Then use TranslatedLink instead of next/link in your code.

<TranslatedLink href='/about'>
    <a>Go to About page</a>
</TranslatedLink>

Note that you could reuse the pathTranslations object to dynamically generate the rewrites array in the next.config.js and have a single source of truth for the translated URLs.

You must be Logged in to reply
Trending Technologies
15
Software91
DevOps48
Frontend Development24
Backend Development20
Server Administration17
Linux Administration28
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance