gpt4 book ai didi

javascript - 我可以在 _app.js 和页面中使用 getInitialProps 吗?

转载 作者:行者123 更新时间:2023-12-01 23:20:11 27 4
gpt4 key购买 nike

我正在开发我的第一个正式的 NextJS 应用程序。我将其设置为为左侧导航提取 JSON 数据,而不是在应用程序中的某个地方对它们进行硬编码。这样我就不必每次对网站导航进行微小更改时都重新构建。

由于导航需要在每个页面上都可用,所以我将 getInitialProps 添加到 _app.js 文件中,该文件获取左侧导航并将其传递给左侧导航成分。但是现在,当我继续构建主页时,我看到那里的 getInitialProps 没有运行。似乎 _app.js 中的 getInitialProps 优先。

有没有办法两者兼得?或者实现目标的其他一些解决方法(或者只是一般情况下更好的方法)?

请注意,我使用 getInitialProps 有两个原因:

  1. getStaticProps 已失效,因为我不打算在构建时构建整个站点
  2. getServerSideProps 通常 因为我不喜欢它最终会执行两个 http 请求:首先一个请求转到 NextJS 服务器,然后服务器发送一个请求我的 API(它恰好位于不同的服务器上)。如果我只是获取导航等基本内容,则不需要 getServerSidePropsNextJS 服务器上运行,我宁愿跳过中间人

这里有一些简化的代码:

_app.js:

import { Provider } from "react-redux";
import axios from "axios";

import store from "../store";
import Header from "../components/Header";
import LeftNav from "../components/LeftNav";

function MyApp(props) {
const { Component, pageProps } = props;

return (
<Provider store={store}>
<Header />
<LeftNav leftnav={props.leftnav} />
<Component { ...pageProps } />
</Provider>
)
}

MyApp.getInitialProps = async (context) => {
let config = await import("../config/config");
let response = await axios.get(`${config.default.apiEndpoint}&cAction=getLeftNav`);

if (response) {
return {
leftnav: response.data.leftNav
};
} else {
return {
leftnav: null
};
}
};

export default MyApp;

Home.js:

import axios from "axios";

const Home = (props) => {
console.log("Home props", props);
return (
<div>home</div>
);
};

Home.getInitialProps = async(context) => {

// this only runs if the getInitialProps in _app.js is removed :(

let config = await import("../config/config");
let response = await axios.get( `${config.default.apiEndpoint}&cAction=getHome` );
if ( response ) {
return {
home: response.data.home
};
} else {
return {
home: null
}
}
};
export default Home;

最佳答案

您必须在您的_app 中调用App.getInitialProps(context) 来调用当前页面的getInitialProps。然后,您可以将页面的 Prop 与 _app 中的其余 Prop 合并。

import App from 'next/app'

// Remaining code...

MyApp.getInitialProps = async (context) => {
const pageProps = await App.getInitialProps(context); // Retrieves page's `getInitialProps`

let config = await import("../config/config");
let response = await axios.get(`${config.default.apiEndpoint}&cAction=getLeftNav`);

return {
...pageProps,
leftnav: response?.data?.leftNav ?? null
};
};

来自custom _app文档:

When you add getInitialProps in your custom app, you must import App from "next/app", call App.getInitialProps(appContext) insidegetInitialProps and merge the returned object into the return value.

关于javascript - 我可以在 _app.js 和页面中使用 getInitialProps 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68202020/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com