我正在开发我的第一个严肃的 NextJS 应用程序。我已将其设置为为左侧导航提取 JSON 数据,而不是将它们硬编码在应用程序中的某处。这样我就不必每次对网站导航进行细微更改时都重新构建。
由于导航需要在每个页面上都可用,所以我在 getInitialProps
文件中添加了 _app.js
,它会抓取左侧导航并将其传递给左侧导航组件。但是现在当我继续构建主页时,我发现那里的 getInitialProps
没有运行。似乎 getInitialProps
中的 _app.js
优先。
有没有办法两者兼得?或者其他一些可以实现目标的解决方法(或者只是一种更好的一般方法)?
请注意,我使用 getInitialProps
有两个原因:
NextJS
服务器,然后服务器发送一个请求到我的API(恰好位于不同的服务器上)。如果我只是获得导航之类的基本内容,则无需在 getServerSideProps
服务器上运行 NextJS
,我宁愿跳过中间人这里有一些简化的代码:
_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;
答案 0 :(得分:0)
如custom _app
documentation中所述,您需要在App.getInitialProps(ctx)
中调用_app
来调用当前页面的getInitialProps
。然后,您可以将它们与 _app
中的剩余道具合并。
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`);
if (response) {
return {
...pageProps,
leftnav: response.data.leftNav
};
} else {
return {
...pageProps,
leftnav: null
};
}
};