Comments (6)
I'm exporting the next project using static html, so it shouldn't be an issue for this use case. Thanks anyway!
from next-translate.
@neslinesli93 on 0.17.0-canary.1
is available the helper:
import Document, { Html, Head, Main, NextScript } from 'next/document'
import documentLang from 'next-translate/documentLang'
export default class MyDocument extends Document {
render() {
return (
<Html lang={documentLang(this.props)}>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
from next-translate.
There isn't any helper of this library right now for this. (Maybe we can consider to add it 🙂).
Meanwhile, you can handle this with this:
import Document, { Html, Head, Main, NextScript } from 'next/document'
import i18nConfig from '../i18n.json'
function documentLang({ __NEXT_DATA__}) {
const { page } = __NEXT_DATA__
const [,langQuery] = page.split('/')
const lang = i18nConfig.allLanguages.find(l => l === langQuery)
return lang || i18nConfig.defaultLanguage
}
export default class MyDocument extends Document {
render() {
return (
<Html lang={documentLang(this.props)}>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
from next-translate.
Thanks for the quick feedback. I was wondering, why it's not possible to use clientSideLang
? It seems easier and more straightforward...
from next-translate.
The reason is that clientSideLang
is a global variable. In the browser this is not a problem but in node.js it can have conflicts with concurrent users visiting the same page.
from next-translate.
In this case, is not a problem and you can use clientSideLang
directly.
However, using SSR on some page (getServerSideProps
) you can have conflicts and the only way is using documentLang, that this works in all cases.
from next-translate.
Related Issues (20)
- 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
- Can't resolve 'next-translate/appWithI18n' on 2.7.0-canary.1 HOT 6
- Cold Start on dynamic routes HOT 5
- Type safety for getT function
- Regular locale naming like "en" breaks the i18n config 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.