React 和 NextJS：我如何检测客户端的位置？

Question

我使用 NextJS 和 React 创建了一个网站。我想提供多种语言的网站。为了实现这一目标，我想在

page

文件夹中创建子文件夹，例如英语

/en

、德语

/de

等。

当访问者打开我的网站时，将根据公共 IP 选择正确的子文件夹：

示例： 请求来自美国：选择了

/pages/en

文件夹， 该请求来自德国：选择了

/pages/de

文件夹等。

我怎样才能做到这一点？由于我对 NodeJS 环境的经验很少，请给我具体的例子，非常感谢......

我已经有一个

server.js

文件。也许我也可以用这个“是”来实现......

const express = require('express')
const next = require('next')
const bodyParser = require('body-parser')
const request = require('request')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
    .then(() => {
        const server = express()

        //parse application
        server.use(bodyParser.urlencoded({ extended: false }))

        //parse application/json
        server.use(bodyParser.json())

        server.post('/', (req, res) => {
            addEmailToMailChimp(req.body.email, (error, response, body) => {
                // This is the callback function which is passed to `addEmailToMailChimp`
                console.log(response);
                try {
                    var respObj = {}; //Initial response object
                    if (response.statusCode === 200) {
                      respObj = { success: `Subscribed using ${req.body.email}!`, message: response.body };
                    } else {
                      respObj = { error: `Error trying to subscribe ${req.body.email}. Please try again.`, message: response.body };
                    }
                    res.send(respObj);
                  } catch (err) {
                    var respErrorObj = { error: 'There was an error with your request', message: err.message };
                    res.send(respErrorObj);
                  }
            });
        })

        server.get('*', (req, res) => {
            return handle(req, res)
        })

        server.listen(3000, (err) => {
            if (err) throw err
            console.log('> Ready on http://localhost:3000')
        })
    })
    .catch((ex) => {
        console.error(ex.stack)
        process.exit(1)
    })

Answer 1

使用 Next.js 国际化路由功能。

对于子路径路由

// next.config.js
module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL'],
    defaultLocale: 'en-US',
  },
}

对于域路由：

// next.config.js
module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL', 'nl-BE'],
    defaultLocale: 'en-US',

    domains: [
      {
        // Note: subdomains must be included in the domain value to be matched
        // e.g. www.example.com should be used if that is the expected hostname
        domain: 'example.com',
        defaultLocale: 'en-US',
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
      },
      {
        domain: 'example.nl',
        defaultLocale: 'nl-NL',
        // specify other locales that should be redirected
        // to this domain
        locales: ['nl-BE'],
      },
    ],
  },
}

关注https://nextjs.org/docs/advanced-features/i18n-routing了解更多详情。