next.config.js中的访问请求对象
我正在使用一个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);回答 2
Stack Overflow用户
发布于 2019-12-11 08:10:14
它不能工作，因为这个"req"对象实际上是一个客户端请求，这意味着它只在运行时上工作。next.config.js在配置时运行，因此在配置时不可用。
您可以使用常规env变量或.env文件并使用多滕诺夫加载它。
Stack Overflow用户
发布于 2019-12-11 10:02:35
我认为可以使用自定义文档来实现这一点：
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;在Document#getInitalProps中，您可以获得当前的pathname并从某个地方读取相应的配置，然后在<script>内部呈现配置。虽然看上去很讨厌。此外，它还需要一个自定义_app来从<script>标记中读取配置。在_app中，您可以使用配置填充一个React上下文，以便在其他组件中方便地使用它。
UPD
下面是如何使用<script>标记中的内容:创建一个自定义应用程序组件，在componentDidMount中获取该元素并解析该元素，然后将其用作上下文值。
import App from "next/app";
import React from "react";
export const ConfigContext = React.createContext({});
export default class MyApp extends App {
constructor() {
super();
this.state = { config: {} };
}
componentDidMount() {
const config = JSON.parse(document.getElementById("config").textContent);
this.setState({ config });
}
render() {
const { Component, pageProps } = this.props;
return (
<ConfigContext.Provider value={this.state.config}>
<Component {...pageProps} />
</ConfigContext.Provider>
);
}
}在页面组件中，您可以从上下文中读取它：
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>
);
};同样，这个问题似乎是一个解决方案：https://github.com/zeit/next.js/issues/9524
https://stackoverflow.com/questions/59281119
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号