- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发我的第一个正式的 NextJS 应用程序。我将其设置为为左侧导航提取 JSON 数据,而不是在应用程序中的某个地方对它们进行硬编码。这样我就不必每次对网站导航进行微小更改时都重新构建。
由于导航需要在每个页面上都可用,所以我将 getInitialProps
添加到 _app.js
文件中,该文件获取左侧导航并将其传递给左侧导航成分。但是现在,当我继续构建主页时,我看到那里的 getInitialProps
没有运行。似乎 _app.js
中的 getInitialProps
优先。
有没有办法两者兼得?或者实现目标的其他一些解决方法(或者只是一般情况下更好的方法)?
请注意,我使用 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;
最佳答案
您必须在您的_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 mustimport App from "next/app"
, callApp.getInitialProps(appContext)
insidegetInitialProps
and merge the returned object into the return value.
关于javascript - 我可以在 _app.js 和页面中使用 getInitialProps 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68202020/
我用 withAuth HOC 包装了一个页面。在同一页面中,我还尝试调用 getInitialProps。如果我登录, getInitialProps 函数不会运行(尽管它表明我的 withAuth
我完成了使用 create-react-app (CSR) 创建的 React 应用程序的编码,但我现在正在使用 Next.js 框架重写整个应用程序以获得更好的 SEO 性能。 在重写它时,我很难弄
我在此路径中有文件 ./pages/blog/[id]/[title].js这是我写的代码: import React from 'react'; import PropTypes from 'pro
由于我喜欢将 SSR 添加到我即将进行的项目中以改进 SEO,因此我想尝试下一个。我想要的是只对初始页面使用 SSR,站点中的其余导航将是客户端渲染。我看到 getInitialProps 在这种情况
这是我的 .eslintrc { "plugins": ["react"], "parserOptions": { "ecmaVersion": 6, "sourceType"
使用 NextJS 并看到一个页面示例: class IndexPage extends Component { static async getInitialProps(context) {
我是 React 和 Next.js 的新手,所以请耐心等待。但我花了三个小时进行搜索,但我终其一生都无法弄清楚我在这里做错了什么。 this.props.test 不输出任何内容,即使它看起来应该输
我有一个低阶页面组件,需要在 getInitialProps() 中获取数据。它成功获取数据,但它确实作为组件中的 prop 返回。下面是我正在处理的代码 import React, { Compon
当我的 View 加载时,我试图在 getInitialProps 中获取已解析文件的内容,问题是它告诉我 Module not found: Can't resolve 'fs ' 我不明白为什么
我正在尝试使用 getInitialProps 从 firebase 获取数据到我的 next.js 应用程序,但数据显示在 VS Code 终端中(以及一些错误)。但是,在浏览器中,我收到此消息 请
我收到此错误,已阅读文档和其他答案,但仍然不明白为什么。 我想做的是一个api调用,如果有匹配的post,我想呈现Post组件,如果没有,我想重定向或呈现错误页面。 当我点击现有的帖子链接时,我会收到
我遇到了有关从 Next.js 中的 getInitialProps 函数获取数据的问题 场景是这样的:当用户第一次访问页面时,我向远程 API 发出 HTTP 请求,该 API 返回应用程序所需的数
我有一个使用 next.js 和 Apollo/Graphql 的应用程序,我试图完全理解 getInitialProps 生命周期 Hook 的工作原理。 在我的理解中,生命周期getInitial
我正在使用 next.js 构建一个网站,并且我正在尝试解决以下“问题”。我有一些静态数据(网站文本)需要从 API 端点(Headless CMS)获取。 对于各个页面,我使用 getInitial
这是我的代码 import React from 'react' import fetch from 'isomorphic-unfetch' import Book from './Book' fu
假设我有一个名为 dashboard.js 的页面,它是一个功能组件,我将它包装在一个“HOC”中,向它注入(inject)一些 Prop 。 export default withAuthentic
我正在使用以下示例在 Next.js 中实现数据获取: https://github.com/zeit/next.js/blob/master/examples/data-fetch/pages/in
当页面第一次在服务器端渲染或刷新渲染页面时,getInitialProps 不起作用: Home.getInitialProps = async ({store}) => { axios.po
当使用 NextJS 构建静态站点时,我希望 getInitialProps 方法仅在构建步骤期间触发,而不是在客户端触发。 在构建步骤中,NextJS 运行 getInitialProps meth
我使用 Next.JS 版本 9.1.3 并在我的项目中具有动态路由(但带有 exportPathMap 的静态文件)。 路由在开发模式下工作正常,但在生产模式下不起作用。 我得到: Error oc
我是一名优秀的程序员,十分优秀!