Next JS中的公共动态头

krugob8w  于 2023-05-22  发布在  其他
关注(0)|答案(1)|浏览(178)

我已经开始Next.js了。我使用一个通用的header.js组件,并将其包含在_app.js中,以便呈现所有创建的页面。
现在我想让我的头动态,也就是说,导航项应该从数据库中获取并呈现。我尝试在_app.js中包含getServerSideProps(),但它不起作用。在这里可以做些什么?
TIA

j7dteeu8

j7dteeu81#

您可以按照此https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props
示例:
pages/xxx.js

import type { GetServerSidePropsContext } from 'next';

const Page: NextPageWithLayout = () => {
  return <p>hello world</p>;
};

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const { resolvedUrl } = context;

  // Fetch data from external API
  const res = await fetch(`https://api/title?path=${resolvedUrl}`);
  const data = await res.json();
  const { title } = data

  // Pass data to the page
  return { props: { title } };  
}

pages/_app.js

import { Fragment } from 'react';
import Header from '@component/Header';
 
export default function MyApp({ Component, pageProps }) {
  const { title } = pageProps;
 
  return (
    <Fragment>
     <Header title={title} />
     <Component {...pageProps}  />
    </Fragment>
  ););
}

相关问题