Next.js-“纱线构建”失败

Question

当我尝试构建Next.js应用进行生产时，出现以下错误：

似乎“ API_KEY”未定义。无法从publicRuntimeConfig解构此属性。在我使用内置函数getStaticProps或getStaticPaths的页面上会发生此错误。

这是我的next.config.js：

const withPlugins = require("next-compose-plugins");
const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withBundleAnalyzer = require("@next/bundle-analyzer");
const nextRuntimeDotenv = require("next-runtime-dotenv");

const withConfig = nextRuntimeDotenv({ public: ["API_URL", "API_KEY"] });

const nextConfig = {
    analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
    analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
    bundleAnalyzerConfig: {
        server: {
            analyzerMode: "static",
            reportFilename: "../bundles/server.html",
        },
        browser: {
            analyzerMode: "static",
            reportFilename: "../bundles/client.html",
        },
    },
    publicRuntimeConfig: {
        PROXY_MODE: process.env.PROXY_MODE,
        API_URL: process.env.API_URL,
        API_KEY: process.env.API_KEY,
        STATIC_PATH: process.env.STATIC_PATH,
    },
};

module.exports = withConfig(
    withPlugins([[withCSS], [withSass], [withBundleAnalyzer]], nextConfig)
);

我已经研究了官方文档和google类似问题，但似乎没有结果。为什么Next.js纱线构建失败的任何想法？

Answer 1

从文档中可以找到。 A page that relies on publicRuntimeConfig must use getInitialProps（https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration）我认为您应该将它放在其他位置。检查环境变量部分https://nextjs.org/docs/api-reference/next.config.js/environment-variables