Comments (3)
Ok! For the simple way as possible, you don't need any API of this lib to change the language. You can do it directly with <Link>
component or Router.push
of next.js.
import React from 'react'
import useTranslation from 'next-translate/useTranslation'
import i18nConfig from '../i18n.json'
function ChangeLanguage() {
const { t, lang } = useTranslation()
return i18nConfig.allLanguages.map(lng => {
if(lng === lang) return null
const languageName = t(`layout:lang-${lng}`)
// Or you can attach the current pathame at the end
const href = `/${lang}`
return (
<Link href={href} key={lng}>
{languageName}
</Link>
)
})
}
We can provide some examples in the docs. But there isn't a changeLang
function.
from next-translate.
Ok @BjoernRave, if you do a PR of Link
and changeLanguage
we can add them to our API. However, I am in favor of do it separately of useTranslation
hook, in order to take advantage of tree-shaking. Because in most cases you need to change the language in a modal, and then in all other pages you don't need that extra code. And we want to keep a tiny size of this lib.
Ex of possible imports:
import Link from 'next-translate/Link'
import changeLanguage from 'next-translate/changeLanguage'
from next-translate.
I came up with this function to change the language, I might do a PR to the lib to add this function to useTranslation
once I figure out how to access router
const changeLanguage = (lng: string) => {
if (router.pathname === "/") {
router.push(`/${lng}`);
} else {
let routes = router.pathname.split("/");
if (allLanguages.includes(routes[1])) {
routes[1] = lng;
} else {
routes.splice(1, 0, lng);
}
router.push(routes.join("/"));
}
};
It would also be good to have a Link
component which extends the Link
Component from next.js, but persists the language on route changes
This is my custom Link Component:
import NextLink, { LinkProps } from 'next/link'
import { useRouter } from 'next/router'
import { FC } from 'react'
import { allLanguages, defaultLanguage } from '../i18n.json'
const Link: FC<LinkProps> = ({ children, href, as, ...props }) => {
const router = useRouter()
const getCurrentLanguage = () => {
if (router.pathname === '/') {
return defaultLanguage
} else {
let routes = router.pathname.split('/')
if (allLanguages.includes(routes[1])) {
return routes[1]
} else {
return defaultLanguage
}
}
}
return (
<NextLink
href={`/${getCurrentLanguage()}${href === '/' ? '' : href}`}
as={`/${getCurrentLanguage()}${as}`}
{...props}>
{children}
</NextLink>
)
}
export default Link
from next-translate.
Related Issues (20)
- Split out useTranslationAppDir from the useTranslation hook into its own exported regular function HOT 3
- AppDirI18nProvider is not loaded after refresh, so lang is null HOT 2
- Error: Text content does not match server-rendered HTML. HOT 6
- app.listen(port, () => { ^ ReferenceError: app is not defined HOT 1
- next-translate-plugin breaks SSG in app router HOT 7
- App Router - Default locale without it's name on url HOT 2
- TypeError: Cannot read properties of undefined (reading 'loadLocaleFrom') HOT 1
- Locale slug is added to api and other routes outside of app dir
- AppDirI18nProvider is not loaded after refresh, so lang is null HOT 2
- Change language without modifying the URL (/[lang]/rest) HOT 4
- add Dependabot HOT 1
- Next.js app build fails due to empty lang value HOT 3
- change "Twitter" shields badge to "ð " in README.md
- 404 error pages with next 14 HOT 20
- Localizations not working in prod bundle on NextJs 14 HOT 1
- Buildng project using only app router HOT 9
- Translation not working on client component inside layout HOT 8
- Warning: Detected multiple renderers concurrently rendering the same context provider.
- 404 when accssing homepage HOT 7
- 404 on root when using baseURL in vercel HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
ð Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ððð
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google â€ïž Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-translate.