Question

对于我的网站，我使用React和NextJS。我有一个自定义服务器。我的server.js看起来像这样：

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

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

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

    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)
  })

函数server.post用于检查客户端是否来自德国。如果客户来自德国，则应从目录index.js返回/pages/de/文件。

在客户端，我使用componentDidMount()函数检测客户端的国家/地区并将此信息发送到服务器：

//located in: /pages/index.js

class Component extends Component {


  componentDidMount() {
        axios.get('https://api.ipdata.co/?api-key=XXXXXXXXX')
        .then(function (response) {
            const countryCode = response.data.country_code;
            console.log(countryCode);
            fetch('/', {
                method: 'POST',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify({code:countryCode}),
              })
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    render() {     //Is an example
      return(
       <div></div>
      );
    }
}

我的问题：我可以使用req.body.code访问服务器端的CountryCode，但是我无法返回/pages/de/index.js。

两个问题：

我的错误在哪里？
为此目的使用ComponentdidMount()函数是否正确，还是应该为此更好地创建自定义_app.js？如果是这样，我该怎么办？

我在Node.js环境中经验不足。如果您能给我具体解决方案，我将不胜感激。谢谢您的答复。

Answer 1

您的客户端代码位于 pages / index.js 内部，而不是 pages / de / index.js 内部。如果要从 pages / index.js 访问代码，请在 server.js

中定义以下代码

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

Answer 2

我认为您应该使用服务器中的res.redirect（'/ de'）将用户重定向到“ / de /”，或者您可以在getInitialProps中将其重定向到一个地方，尤其是在您需要也在浏览器端重定向（使用next / Router.push（））。

如果可以将密钥放入cookie中，我认为最好在投放网页之前测试位置，这样用户就看不到重定向。

NextJS和React：如何从服务器返回页面？

2 个答案: