Next.js: Multi Language Support with Custom Page Directories

[ITforHome]

I have created a Website using NextJS and React. I want to provide the Website in several languages. To achieve this, I wanted to create in the page folder, subfolders, for example for the English language /en , for the German language, /de etc.

When a visitor then opens my Website, the correct subfolder is selected based on the public IP:

Example: Request comes from America : the /pages/en folder is selected, The request comes from Germany : the /pages/de folder is selected etc.

How can I do that? Since I have little experience in NodeJS environments, please show me concrete examples, many thanks...

System Information:

• Chrome (last Version)
• NextJS Version 7.0.0
• React Version 16.5.2
• React Dom Version 16.5.2

[popuguytheparrot]

Use costum server.
You need add /:lang/ for routing

[ITforHome]

@popugang Thank you for your reply. I'm just starting to get to know NextJS and React. So could you show me a concrete example?

Currently, it looks like the country code is being sent from the client to the server. There I can get the code via req.body.code

[popuguytheparrot]

In my project i using next-routes
and for each page add :locale
urls.forEach(({ file, path }) => routes.add(file,/:locale${path}));

[popuguytheparrot]

example
https://github.com/zeit/next.js/tree/canary/examples/custom-server-express

[ITforHome]

@popugang Thanks, I just looked at the example. The following code was used in the server.js file:

server.get('/a', (req, res) => {
      return app.render(req, res, '/b', req.query)
    })

I already understood how that works. But how can I use your code inside there?
i try this code in my server.js, but it doesn't work? Where is my mistake?

createServer((req, res) => {
            const parsedURL = parse(req.url, true)
            const { pathname, query } = parsedURL

            if (pathname === '/' && req.body.code === 'DE') {
                app.render(req, res, '/de/')
            } else {
                handle(req, res, parsedURL)
            }
        })

[popuguytheparrot]

siteUrl like localhost:3000/de/

app.get('/:lang/', (req, res) => res.send('lang' + req.params.lang));

[ITforHome]

@popugang Thank you, I'm sorry I might be a little stupid instead, but I still don't know how to use your code right now... Inside my server.js i try this:

server.post('/', (req, res) => {
            if (req.body.code === 'DE') {
                return server.render(req, res, '/de/', req.query)
            }
        })

If the Code is DE, the directory /pages/de should be returned. (I have a index.js page inside /de)
What is wrong with this code?
Why can I only access the property req.body.code in the .post method and not in the .get method?

[tusbar]

You can do something like this:

const localizedRouter = new Router()

localizedRouter.get('*', (req, res) => {
  // Render the page from pages/${lang}
  let page = req.params[0]
  if (page === '/') {
    page = '/index'
  }

  app.render(req, res, `${req.i18n.lang}/${page}`, req.query)
})

server.use('/:lang(de|en)', (req, res, next) => {
  // Store the language (either 'de' or 'en')
  req.i18n = {lang: req.params.lang}

  localizedRouter(req, res, next)
})

---

For a real-world example, though slightly different, check https://github.com/etalab/geo.data.gouv.fr/blob/master/server/index.js which uses i18next.

[jamuhl]

there now is also a sample here using react-i18next: https://github.com/i18next/react-i18next/tree/master/example/nextjs

you can enable/disable language usage in paths in config: https://github.com/i18next/react-i18next/blob/master/example/nextjs/config.js#L11

[timneutkens]

Going to close this as per @jamuhl's example.

[ITforHome]

@jamuhl thank you for the Example, i follow up this and it works now. But i have few more questions about that...

1. Different Names for Pages

How can i use different names for my Pages. For Example, i have a page called privacy-policy i can open this page like this:

http://localhost:3000/en/privacy-policy http://localhost:3000/de/privacy-policy

When i use German as Language, i want to display the PageName in German, in my case:

http://localhost:3000/de/datenschutz

How can i do that?

2. SEO

I use the next/head Component to implemente SEO in my Application. How can i use it with i18next? There are disadvantages of this method?

3. Auto-detect Lang

When i open the index.jspage on http://localhost:3000 i get http://localhost:3000 as URL, no matter if german oder english. But when i open the index.js page in german, i want to get this URL: http://localhost:3000/de or in english: http://localhost:3000/en

How can i do that?
Please show me a short detail example, so i can use it in my Code - thanks a lot...

[jamuhl]

@ITforHome please open an issue over at https://github.com/i18next/react-i18next so i can take a a look

[ITforHome]

@jamuhl please take a look at: https://github.com/i18next/react-i18next/issues/570