Internationalized Routing in next.js

/ar/page → للغة العربية<br /><br /> /en/page → للغة الإنجليزية

module.exports = {<br /><br /> i18n: {<br /><br /> locales: ['en', 'ar'], // اللغات الموجوده<br /><br /> defaultLocale: 'en', // اللغة الافتراضية<br /><br /> },<br /><br /> }

import Link from 'next/link';<br /><br /> import { useRouter } from 'next/router';<br /><br /> export default function LanguageSwitcher() {<br /><br /> const { locale, locales } = useRouter();<br /><br /> return (<br /><br /> <div><br /><br /> {locales.map((lng) => (<br /><br /> <Link key={lng} href="/" locale={lng}><br /><br /> <button disabled={lng === locale}>{lng}</button><br /><br /> </Link><br /><br /> ))}<br /><br /> </div><br /><br /> );<br /><br /> }

npm install next-translate

locales/<br /><br /> en/common.json<br /><br /> ar/common.json

import useTranslation from 'next-translate/useTranslation';<br /><br /> export default function HomePage() {<br /><br /> const { t } = useTranslation('common');<br /><br /> return <h1>{t('welcome')}</h1>;<br /><br /> }

{<br /><br /> "welcome": "Welcome to our site!"<br /><br /> }