SSR / Next.js example

[willross]

Hi there!

What you are doing is amazing and you are solving a very big problem for apps that have a lot of strings. I'm really glad this exists now!

However, from the current examples it's not immediately obvious how this would work with isomorphic apps, using Next.js for example.

So if you could provide some pointers or maybe create a Next.js example, you'd save someone's life :)

Thanks!

[hjylewis]

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

[hjylewis]

@willross Let me know if this helps https://github.com/hjylewis/babel-plugin-inline-i18n-messages/tree/master/examples/nextjs-example

[willross]

@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.

[willross]

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?

[hjylewis]

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

[willross]

Yup, this approach works!