无法从 Next.js 中的 React 组件访问 env

Question

我有一个 Next.js 项目。我已经创建了 .env 文件并在 server.js 文件中使用该文件中的环境。但是当我想从组件访问这些环境时，我无法访问。我该怎么办？

这是 .env 文件：

SERVER_PORT=3000
DOMAIN=127.0.0.1
DATABASE=dburl

这是 server.js 文件：

require('dotenv/config')

const port = process.env.SERVER_PORT || 3000
server.listen(port, (err) => {
      if(err) throw err
      console.log(`Server listen on http://127.0.0.1:${port}`)
    })

这是 react 的任何组件：

axios
    .get(`http://${process.env.DOMAIN}/api/improve-language`)
    .then(res => {
      ...
    })
    .catch(err =>{
      console.log(err)
    })

Answer 1

基于documentation的环境变量如果要在浏览器中使用，必须以NEXT_PUBLIC_前缀命名。