Fatal编程技术网
  • next.js/
  • Next.js 在next.config.js中访问请求对象

Next.js 在next.config.js中访问请求对象

next.js

Next.js 在next.config.js中访问请求对象,next.js,Next.js,我正在使用next.config.js文件开发一个应用程序，该文件根据环境变量设置了一组配置变量，以便在应用程序的其他地方使用。我想在这个列表中添加更多基于URL的内容，我使用包jekrb/next absolute URL来读取URL 我遇到的问题是在他们的示例中使用了const{origin}=absoluteUrl（req），但我无法在next.config.js文件中使用它。它只是告诉我，req没有定义 下面是我当前next.config.js文件的简化示例 const withTM =

我正在使用
next.config.js
文件开发一个应用程序，该文件根据环境变量设置了一组配置变量，以便在应用程序的其他地方使用。我想在这个列表中添加更多基于URL的内容，我使用包
jekrb/next absolute URL
来读取URL

我遇到的问题是在他们的示例中使用了
const{origin}=absoluteUrl（req）
，但我无法在
next.config.js
文件中使用它。它只是告诉我，
req
没有定义

下面是我当前
next.config.js
文件的简化示例

const withTM = require('next-transpile-modules');
const withCSS = require('@zeit/next-css');
const withFonts = require('next-fonts');
const withImages = require('next-images');
const withOffline = require('next-offline');
const compose = require('crocks/helpers/compose');
const absoluteUrl = require('next-absolute-url');

const { origin } = absoluteUrl(req);

require('dotenv').config();

const injectedConfig = {
  serverRuntimeConfig: {
    KEY: process.env.VALUE,
  },
  publicRuntimeConfig: {
    KEY: process.env.VALUE,
  },
}

module.exports = compose(
  withCSS,
  withFonts,
  withImages,
  withTM,
  withOffline
)(injectedConfig);
它不起作用，因为这个“req”对象实际上是一个客户机请求，这意味着它只能在运行时运行
next.config.js
在配置时运行，因此在那里不可用

您可以使用常规env变量或
.env
文件，并将其与一起加载，因为此“req”对象实际上是一个客户端请求，这意味着它仅在运行时上工作
next.config.js
在配置时运行，因此在那里不可用

您可以使用常规env变量，或
.env
文件，并将其加载到我认为这可以通过使用自定义文档来实现：

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const { pathname, query } = ctx;

    // having pathname and query, read config from elsewhere

    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, config: { pathname, query } };
  }

  render() {
    return (
      <Html>
        <Head>
          <script
            id="config"
            dangerouslySetInnerHTML={{
              __html: JSON.stringify(this.props.config, null, 1)
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
在页面组件中，您可以从上下文中读取它：

import React, { useContext } from "react";

import { ConfigContext } from "./_app";

export default props => {
  const config = useContext(ConfigContext);
  return (
    <div>
      <pre>{JSON.stringify(config, null, 1)}</pre>
    </div>
  );
};


import React，{useContext}来自“React”；
从“/_app”导入{ConfigContext}；
导出默认道具=>{
const config=useContext（ConfigContext）；
返回(
{JSON.stringify（config，null，1）}
);
};
同样，这个问题似乎是一个解决方案：

我认为这可以通过使用自定义文档来实现：

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const { pathname, query } = ctx;

    // having pathname and query, read config from elsewhere

    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, config: { pathname, query } };
  }

  render() {
    return (
      <Html>
        <Head>
          <script
            id="config"
            dangerouslySetInnerHTML={{
              __html: JSON.stringify(this.props.config, null, 1)
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
在页面组件中，您可以从上下文中读取它：

import React, { useContext } from "react";

import { ConfigContext } from "./_app";

export default props => {
  const config = useContext(ConfigContext);
  return (
    <div>
      <pre>{JSON.stringify(config, null, 1)}</pre>
    </div>
  );
};


import React，{useContext}来自“React”；
从“/_app”导入{ConfigContext}；
导出默认道具=>{
const config=useContext（ConfigContext）；
返回(
{JSON.stringify（config，null，1）}
);
};
同样，这个问题似乎是一个解决方案：

您能否给出一个基于URL的环境变量的具体示例？我想知道你想用这种方法解决什么问题。@EvgenyTimoshenko基本上有多个URL指向同一个容器，根据访问的URL，其中一些环境变量应该不同。你能给出一个基于URL的环境变量的具体例子吗？我不知道你想用这种方法解决什么问题。@EvgenyTimoshenko基本上有多个URL指向同一个容器，根据访问它的URL，其中一些环境变量应该是不同的。这是有道理的，我意识到这个文件在服务器端运行，但完全忘记了这个文件在运行时没有运行。我将不得不寻找另一种在运行时改变这些变量的方法。这是有道理的，我意识到它运行在服务器端，但完全忘记了这个文件没有在运行时运行。在运行时将不得不考虑另一种方法来更改这些变量。Tomoshenko感谢这一点和代码示例，但除非我弄错了
JSON。stringify
没有输出任何内容？@Neil，我已经更新了我的答案，告诉你如何使用itTomoshenko。感谢这一点和代码示例，但除非我弄错了
JSON.stringify
不会输出任何东西吗？@neil我已经更新了我的答案，告诉你如何使用它