Exporting localised sites

[wagerfield]

I am trying to export a localised site whereby the translations for the site exist in JSON files within the static directory like so:

static
- locales
  - en.json
  - fr.json

I have created a very simple example repository that demonstrates my approach using isomorphic-fetch within the getInitialProps method of a page:

https://github.com/wagerfield/next-fetch-from-static

As you will see, I am simply loading the locale JSON file based on a locale query param.

This approach works when running a node server both in dev and production, however when I come to export the site statically I run into the problem of not being able to load the JSON files since there is no server running to host these files.

In addition to using fetch I have also tried dynamically requiring the JSON files using eval('require('path/to/dynamic-locale.json')'). This approach is also included in the example repository I posted above (though the implementation is commented out in the code).

Any help on this would be much appreciated!

[Kalcode]

Since its static shouldn't you need both files to be exported during the export? So you need to not dynamically import them. Maybe something like this below?

import en from 'locales/en.json'
import fr from 'locales/fr.json'

var selectedLocale = en
if (locale === ' en') selectedLocale = fr

(Or with require)

Apology if this isn't helpful. But I think you'd need both imported and ready to be exported and not dynamically.

[arunoda]

Hey @wagerfield

Here's a bit modified version what @Kalcode mentioned which includes dynamic imports.

// pages/index.js
import { Component } from 'react'

const Locales = {
  'en': import('../static/locales/en.json'),
  'fr': import('../static/locales/fr.json'),
}

class Index extends Component {
  static async getInitialProps({ req, query }) {
    const { locale = 'en' } = query
    const data = await Locales[locale]
    return { data }
  }

  render() {
    return <h1>{this.props.data.hello}</h1>
  }
}

export default Index

This will work everywhere.

[arunoda]

Closing since this works.

[wagerfield]

This is great, thanks very much!

For anyone else wanting to see a working example of this, please take a look at:

https://github.com/wagerfield/next-fetch-from-static

[sammdec]

This is great, but I have since found an issue, I wish to construct the import path from data passed into the query

setStatic('getInitialProps', async ({ query: { locale } }) => {
    const data = await import (`../data/${locale}`)
    return data 
  })

but this blows up with the following cryptic error Cannot read property '0' of undefined, I was under the impression this should work?