Reactjs 如何访问.env中的令牌以获取Next.js中的数据？

我正在创建一个应用程序（Next.js v9.4.2/React.js），它需要将x-auth令牌发送到后端

我有一个.env文件，其中定义了令牌；下一个.config.js文件，其中我在env:{}下列出了令牌；和一个.getInitialProps fn，我试图通过process.env.token使用该令牌（见下文）

当我引用process.env.TOKEN时，获取失败（返回“内部服务器错误”），但当我将令牌硬编码为字符串时，获取失败：

.env

TOKEN=12345-6789

next.config.js

const withSass = require('@zeit/next-sass')
const withCSS = require("@zeit/next-css")
require('dotenv').config()

module.exports = withCSS(withSass({
    env: {
        TOKEN: process.env.TOKEN
    }
}));

组件

Page.getInitialProps = async function (context) {
    const id = context.query.id ? context.query.id : {}

    const res = await fetch(`https://url/${id}/`, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'x-auth-token': `${process.env.TOKEN}`,
        }
    })
    let raw = await res.json();

    return {
        data: raw
    }
}

---

使用

serverRuntimeConfig

参数访问服务器端的env变量

需要这样做：

require("dotenv").config();

module.exports = withImages(withCSS(withSass({
        webpack: config => {
            /**
             * Returns environment variables as an object
             */
            const env = Object.keys(process.env).reduce((acc, curr) => {
              acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);

              return acc;
            }, {});
            // Fixes npm packages that depend on `fs` module
            config.node = {
              fs: 'empty'
            };

             /** Allows you to create global constants which can be configured
            * at compile time, which in our case is our environment variables
            */
            config.plugins.push(new webpack.DefinePlugin(env));

            return config;
          },
    })));

next.config.js

const withSass = require('@zeit/next-sass')
const withCSS = require("@zeit/next-css")
require('dotenv').config()

module.exports = withCSS(withSass({
    env: {
        TOKEN: process.env.TOKEN
    }
}));

const with ass=require（“@zeit/next sass”）
const with css=require（@zeit/next css）
require（'dotenv'）.config（）
module.exports=withCSS（withass({
服务器运行时配置：{
令牌：process.env.TOKEN
}
}));

---

请参阅：

取决于您使用的NextJs版本。最新的nextjs版本内置了对环境变量的支持。

如果您使用的是旧版本，则可以如下配置next.config.js：

require("dotenv").config();

module.exports = withImages(withCSS(withSass({
        webpack: config => {
            /**
             * Returns environment variables as an object
             */
            const env = Object.keys(process.env).reduce((acc, curr) => {
              acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);

              return acc;
            }, {});
            // Fixes npm packages that depend on `fs` module
            config.node = {
              fs: 'empty'
            };

             /** Allows you to create global constants which can be configured
            * at compile time, which in our case is our environment variables
            */
            config.plugins.push(new webpack.DefinePlugin(env));

            return config;
          },
    })));