在 NextJS 中是不是可以让自定义 _app.js 读取 slug、getInitialProps 并将这些道具传递给每个组件，包括所有页面？
Posted
技术标签:
【中文标题】在 NextJS 中是不是可以让自定义 _app.js 读取 slug、getInitialProps 并将这些道具传递给每个组件，包括所有页面？【英文标题】：In NextJS Is it possible to have custom _app.js read a slug, getInitialProps and pass those props to every component including all pages?在 NextJS 中是否可以让自定义 _app.js 读取 slug、getInitialProps 并将这些道具传递给每个组件，包括所有页面？ 【发布时间】：2020-08-11 17:28:31 【问题描述】：我查看了文档以查看是否可以让 _app.js 读取 slug（没有提及它）。我需要将此 slug 添加到 HTTP get 请求中以获取正确的数据，然后将结果返回给 _app.js，然后我可以在其中将 props 传递给所有组件和页面。
示例：当我转到 http://localhost:3000/some-business-name 时，_app.js 可以抓取 slug (some-business-name)，执行请求，并将 props 传递给项目中的所有组件和页面。
但我真正努力做的是让 App 道具传递给 pages 文件夹内的所有其余页面。
在我的页面文件夹中：
-
_app.js --（我需要将道具传递给所有页面）
[slug].js --（用于检测 slug 的根页面，现在我需要它只接收来自 _app.js 的道具）
success.js --（需要从_app.js接收props）
error.js --（需要从_app.js接收props）
我正在使用一个数据文件，它是一组业务数据对象，我用它来测试动态路由。
我查看了 NextJS 文档，但在理解如何做到这一点时遇到了问题。我仍然需要 slug 存在，我只需要帮助了解如何让 _app.js 完全接管动态路由。
我的 _app.js 代码是：
import React from 'react'
import App from 'next/app'
import businesses from '../data';
export default function MyApp( Component, appProps )
return (
<Component appProps=appProps />
)
;
MyApp.getInitialProps = async ( appContext ) =>
const appProps = await App.getInitialProps(slug);
return appProps;
;
App.getInitialProps = async (slug) =>
const business = businesses.filter((business) =>
return business.slug === slug;
);
return business[0];
;
目前我的 [slug].js 是：
import React from 'react';
import Head from 'next/head';
import LandingPage from '../components/landing-page';
export default function Slug(props)
return (
<div>
<Head>
<title>Home</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossOrigin='anonymous' />
<link href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap' rel='stylesheet' />
<script src='https://code.jquery.com/jquery-3.2.1.slim.min.js' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' crossOrigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' crossOrigin='anonymous'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl' crossOrigin='anonymous'></script>
</Head>
<LandingPage businessInfo=props.appProps/>
<style global jsx>`
body
font-family: 'Open Sans', sans-serif;
`</style>
</div>
);
;
令人惊讶的是，我能够在 [slug].js 中的 LandingPage 组件上接收 App 道具，但在 success.js 和 error.js 页面中却没有。
非常感谢任何帮助！谢谢！
【问题讨论】：
这对你有用吗？您采用了哪种方法？ 我无法在 getInitialProps 中获得“获取”功能。在页面刷新时...什么都不会触发.. 【参考方案1】：你可以这样使用：
import React from 'react'
import App from 'next/app'
import Router from '../routes'
class MyApp extends App
// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// static async getInitialProps(appContext)
// // calls page's `getInitialProps` and fills `appProps.pageProps`
// const appProps = await App.getInitialProps(appContext);
//
// return ...appProps
//
render()
const Component, appProps = this.props
// Workaround for https://github.com/zeit/next.js/issues/8592
const err = this.props
const modifiedPageProps = ...appProps, err
return (
<div id="comp-wrapp">
<Component ...modifiedPageProps />
</div>
)
export default MyApp
【讨论】：
所以这会出现在我的自定义 _app.js 中？ 是的，但如果你真的没有任何静态页面。如果您对应用程序中的每个页面都有阻塞数据要求，请仅取消注释 getInitialMethod。【参考方案2】：最好这样做
class NextDocument extends Document
static async getInitialProps(ctx)
const initialProps = await Document.getInitialProps(ctx)
const req = ctx
// pass down everything u need there
return ...initialProps, locale
【讨论】：
以上是关于在 NextJS 中是不是可以让自定义 _app.js 读取 slug、getInitialProps 并将这些道具传递给每个组件，包括所有页面？的主要内容，如果未能解决你的问题，请参考以下文章
在 ReasonReact 中继承 Nextjs App 组件（pages/_app.js）
React - nextjs 在 useEffect 中调用自定义钩子
NextJs 中的 index.js 和 _app.js 有啥区别？