用于从getServerSideProps或getStaticProps获取NextJ中的菜单项的全局位置

6ovsh4lw  于 2022-12-23  发布在  其他
关注(0)|答案(2)|浏览(121)

在Next.js中是否有全局位置可以获取菜单项(服务器端),并将其传递给我的Layout组件。
因为,我不能这样做,在index.js,如果有人直接打开不同的路线,例如:/about,那么将不提取数据。
我试着在_app中实现它的静态getInitialProps方法,但我不确定这是否是一个好的做法,而且它会在没有静态生成的页面中禁用自动静态优化。
有什么建议吗?

von4xj4u

von4xj4u1#

getInitialProps是您正在做的事情的旧方法。但是getServerSidePropsgetStaticProps将取代getInitialProps


https://nextjs.org/docs/api-reference/data-fetching/getInitialProps
但是getServerSideProps暂时还不能用in_app来进行全局取数,稍后会介绍,在此之前,我想您有以下几种选择:
1.继续使用getInitialProps和交易静态优化
1.获取客户端上的菜单项并呈现活动指示器(微调器?),直到数据准备就绪。
1.添加一个getServerSideProps Package 器和一个类似withMenuItem的HoC,并 Package 所有页面及其getServerSideProps导出。

velaa5lx

velaa5lx2#

getServerSideProps HoC的示例

const withGlobalData = (getStaticProps) => async (...props) => {
  const result = await getStaticProps(...props)

  const staticProps = result?.props || {}

  const global = { menuItems: ['home', 'about'] } // your global props

  return {...result, props: { ...staticProps, global }}
}

使用此函数作为getStaticProps函数的 Package 器,如下所示。

export const getStaticProps = withGlobalData( async ({ context }) => {
  return {
    props: {
      // page specific props
    }
  }
} )

相关问题