[英]Next.js - How to use getStaticProps to fetch Menu data and then pass it to the layout?
I am using Sanity.io as a backend, within Sanity I am handling the data for my main menu (parent/children object arrays).我使用 Sanity.io 作为后端,在 Sanity 中我正在处理我的主菜单的数据(父/子 object 数组)。
Whilst I can fetch this data just fine, I want to do so via getStaticProps , as I'd like my site to remain entirely statically generated.虽然我可以很好地获取这些数据,但我想通过getStaticProps这样做,因为我希望我的网站保持完全静态生成。
getStaticProps doesn't work in my layout.js file as it's not located in the " pages " directory. getStaticProps在我的layout.js文件中不起作用,因为它不在“ pages ”目录中。 Nor does it work inside the _app.js file.
它在_app.js文件中也不起作用。
So currently Im having to fetch the menu within each page, and pass it as a prop into the Layout components (which has to be on every page now,).所以目前我必须在每个页面中获取菜单,并将其作为道具传递给布局组件(现在必须在每个页面上)。 so that I can pass it from inside the Layout into the header component, As such: my page looks like this:
这样我就可以将它从布局内部传递到 header 组件中,因此:我的页面如下所示:
function Page({ menu }) {
return (
<Layout menu={menu}>
<article>
...
</article>
</Layout>
)
}
export const getStaticProps = async (context) => {
const menu = await client.fetch(**menu query**);
return {
props: {
menu,
},
};
}
I am well aware that the Layout component should be situated inside the _app.js file instead, and that is where I'd rather it were, but I can't我很清楚 Layout 组件应该位于 _app.js 文件中,而这正是我想要的位置,但我不能
This is obviously a very convoluted way of doing it, but I see no other method currently outside of using getInitialProps within Layout, but as I understand it, this will involved SSR rather than SSG .这显然是一种非常复杂的方法,但我目前没有看到除了在 Layout 中使用getInitialProps之外的其他方法,但据我了解,这将涉及SSR而不是SSG 。
I spent quite some time researching but the best answer I've found so far is that allowing getStaticProps in the layout "will be allowed in the near future", alas this was some time ago...我花了很多时间研究,但到目前为止我发现的最佳答案是在布局中允许getStaticProps “将在不久的将来允许”,唉,这是前一段时间......
Can anybody point me in the right direction?谁能指出我正确的方向? It seems crazy to have to include the layout on each page rather than have it on every page in the app, just so that I can get data into the header component at build time.
必须在每个页面上包含布局而不是在应用程序的每个页面上都包含布局似乎很疯狂,这样我就可以在构建时将数据输入 header 组件。
Although I still haven't found a native solution to this which doesn't involve fetching the menu data in getStaticProps on every page and passing it up the tree to the Layout -> Header.虽然我还没有找到一个本机解决方案,它不涉及在每个页面上获取 getStaticProps 中的菜单数据并将其向上传递到 Layout -> Header。
I did come across a guide to a Node based solution from Brewhouse digital, NextJS getStaticProps With Components which is pretty cool.我确实遇到了来自 Brewhouse digital 的基于节点的解决方案指南NextJS getStaticProps With Components ,这非常酷。 Basically you can just create a "pre-build" process which is executed before the build, it fetches the data from your endpoint and stores it locally in a JSON file.
基本上,您可以创建一个在构建之前执行的“预构建”过程,它从您的端点获取数据并将其本地存储在 JSON 文件中。 You can then read that JSON file directly into your Layout or Header component for example.
然后,您可以将 JSON 文件直接读取到您的布局或 Header 组件中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.