Comments (6)
Hmm, that's what I was worried about.
Your Next.js example has some issues from the Next.js project structure logic point of view, but they are easily fixed.
PRs are welcome :)
Apparently, currently you can't return an array of webpack configs in Next.js (vercel/next.js#1306)
Yeah, that's how the other examples work. You are basically building a version of your application for each locale.
Do you think there's a way to achieve multi-locale functionality some other way?
You could set it up so that all locales are loaded. This would be suboptimal since it would increase bundle size but works with Next.js. It would also have the added benefit of allowing locale switching without a refresh
To get that to work, your getMessage
function should ignore the locale
argument and return an object containing the message in every locale (instead of just a string). Then you'll want to modify your addMessages
function to accept these objects.
// getMessage
const fs = require("fs");
const path = require("path");
module.exports = function getMessage(key, locale, defaultMessage) {
const en = JSON.parse(fs.readFileSync(
path.resolve(process.cwd(), `./i18n/messages/en.json`)
));
const es = JSON.parse(fs.readFileSync(
path.resolve(process.cwd(), `./i18n/messages/es.json`)
));
return {
en: en[key] || defaultMessage,
es: es[key] || defaultMessage,
}
};
// addMessages
const messages = {
en: {},
es: {},
};
export function getMessages(locale) {
return messages[locale];
}
export function addMessages(idAndMessages) {
idAndMessages.forEach(([id, messageObject]) => {
Object.keys(messageObject).forEach(locale => {
messages[locale][id] = messageObject[locale];
});
});
}
// App.js
...
<IntlProvider locale={locale} messages={getMessages(locale)}/>
...
Unfortunately, since Nextjs doesn't make it easy to build multiple outputs there isn't a way to build per-locale bundles without ditching Nextjs. That said, you should be able to SSR per-locale bundles, just not with Nextjs.
Does that help? Let me know if you have any questions
from babel-plugin-inline-i18n-messages.
Yup, this approach works!
from babel-plugin-inline-i18n-messages.
Thanks for the idea! You're right, a Next.js example would be helpful.
I'm not super familiar with nextjs but I'll give it a shot. In the meantime, if you get an example working can you make a pull request! :)
Let me know if you have any other questions getting set up
from babel-plugin-inline-i18n-messages.
@willross Let me know if this helps https://github.com/hjylewis/babel-plugin-inline-i18n-messages/tree/master/examples/nextjs-example
from babel-plugin-inline-i18n-messages.
@hjylewis, thanks for the quick response!
Your Next.js example has some issues from the Next.js project structure logic point of view, but they are easily fixed.
The main problem is that en
locale is hardcoded in the .babelrc
, therefore the locale doesn't change even when you provide a different locale
prop to IntlProvider
.
I see that in your react-intl-example
you are exporting a dedicated webpack config for each locale to solve that. To be honest, I don't really understand your approach to configuring webpack like that, but I'm not very good with webpack/babel magic.
So far I'm unable to successfully reproduce this approach in next.config.js
, which is where webpack is configured in Next. I'm not sure if it even is possible to export multiple webpack configs in Next.
Here's my repo, hope you'll have an opportunity to take a look: https://github.com/willross/nextjs-example. In it's current state it's working with the hardcoded locale, but doesn't allow changing languages.
from babel-plugin-inline-i18n-messages.
Apparently, currently you can't return an array of webpack configs in Next.js (vercel/next.js#1306). Do you think there's a way to achieve multi-locale functionality some other way?
from babel-plugin-inline-i18n-messages.
Related Issues (9)
- Add description to package.json
- [Question] Is there a way to extract keys from custom message declarations? HOT 4
- Dependabot can't resolve your JavaScript dependency files
- Multilingual bundles HOT 1
- Move API before Motivation session in Docs
- Revisit "file" "source" API
- Lower @babel/core peer dependency version
- Error if message is ALLCAPS HOT 2
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 babel-plugin-inline-i18n-messages.