英文:
How to pass the params to the getInitialProps method in _app.js file in next js from the url
问题
MyApp.getInitialProps = async ({ctx}) => {
const { siteHeaderCollection } = await getHeaderData(ctx.query.lang)
const { siteFooterCollection } = await getFooterData(ctx.query.lang)
return {
locale: ctx.query.lang,
header: siteHeaderCollection,
footer: siteFooterCollection,
}
}
我需要将 slug 传递给这个 getInitialProps 方法。有人可以指导一下如何传递从路径 URL 获取的参数吗？
英文:
the below is the getInitialProps method for MyApp.
MyApp.getInitialProps = async ({ctx}) => {
const { siteHeaderCollection } = await getHeaderData(ctx.query.lang)
const { siteFooterCollection } = await getFooterData(ctx.query.lang)
return {
locale: ctx.query.lang,
header: siteHeaderCollection,
footer: siteFooterCollection,
}
}
I need to pass the slug to this getInitialProps method. could anyone please guide on how to pass the params which are fetched from the path url
答案1
得分: 1
将“slug”作为参数传递给getInitialProps方法，如下所示：
MyApp.getInitialProps = async ({ ctx }) => {
const { query: { lang, slug } } = ctx; // 从查询对象中获取slug
// 使用slug获取页眉和页脚数据
const { siteHeaderCollection } = await getHeaderData(lang, slug);
const { siteFooterCollection } = await getFooterData(lang, slug);
return {
locale: lang,
header: siteHeaderCollection,
footer: siteFooterCollection,
};
};
在这个代码片段中，假设从URL路径中传递了“slug”参数，因此从ctx.query中提取了“slug”变量。然后，您可以使用这个“slug”变量作为参数，通过getHeaderData和getFooterData函数获取相应的页眉和页脚数据。
请确保相应地更新getHeaderData和getFooterData函数，以接受“slug”参数并根据“slug”值获取数据。
英文:
To pass the slug as a parameter to the getInitialProps method like
MyApp.getInitialProps = async ({ ctx }) => {
const { query: { lang, slug } } = ctx; // Retrieve the slug from the
query object
// Fetch header and footer data using the slug
const { siteHeaderCollection } = await getHeaderData(lang, slug);
const { siteFooterCollection } = await getFooterData(lang, slug);
return {
locale: lang,
header: siteHeaderCollection,
footer: siteFooterCollection,
};
};
In this code snippet, slug is extracted from ctx.query, assuming that the slug parameter is passed as part of the URL path. You can then use this slug variable to fetch the appropriate header and footer data using the getHeaderData and getFooterData functions, passing the lang and slug as parameters.
Make sure to update the getHeaderData and getFooterData functions accordingly to accept the slug parameter and fetch the data based on the slug value.
答案2
得分: 1
查看NextJS文档，您可以找到以下内容：
getInitialProps是一个异步函数，可以添加到页面的默认导出React组件中。它将在服务器端和页面转换期间的客户端端都运行。该函数的结果将作为props传递给React组件。
这意味着，您在getInitialProps函数中返回的任何内容都将作为该组件的props传递。 （在您的情况下，locale、header和footer）
小提示：getInitialProps是一个旧的API。NextJS建议改用getStaticProps或getServerSideProps。
您可以从上下文中访问当前的slug：
const { query: { lang, slug } } = ctx;
并将其添加到返回对象中：
return {
slug,
locale: lang,
header: siteHeaderCollection,
footer: siteFooterCollection,
}
英文:
Looking at the NextJS documentation, you can find the following:
>getInitialProps is an async function that can be added to the default exported React component for the page. It will run on both the server-side and again on the client-side during page transitions. The result of the function will be forwarded to the React component as props.
This means, whatever you return in the getInitialProps function will be passed as props in that component. (in your case, locale, header and footer)
Little note: getInitialProps is a legacy API. NextJS recommends using getStaticProps or getServerSideProps instead.
You can access the current slug from the context:
const { query: { lang, slug } } = ctx;
And add it to the return object
return {
slug,
locale: lang,
header: siteHeaderCollection,
footer: siteFooterCollection,
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论