在 Next.js 的 Layout 中访问 getServerSideProps 返回的数据答案

【问题标题】：Access data returned by getServerSideProps inside Layout in Next.js在 Next.js 的 Layout 中访问 getServerSideProps 返回的数据
【发布时间】：2023-02-12 00:17:33
【问题描述】：

我正在使用 Next.js 构建一个 Web 应用程序。它是一个管理仪表板，用于管理多个任务，其中每个任务都有自己的 SSR 页面。

仪表板布局:

export const DashboardLayout = ({children}) => {
  const items = [
  {
    href: "/",
    icon: <ChartBarIcon fontSize="small" />,
    title: "Dashboard",
  },
  {
    href: "/tracks",
    icon: <ArtTrackIcon fontSize="small" />,
    title: "Gestion des tracks",
    // I WANT TO ADD NOTIFICATION HERE
  }
  ....
  ];

  return (
    <>
      <DashboardLayoutRoot>
        <Box>
          {children}
        </Box>
      </DashboardLayoutRoot>
      <Box>
          {items.map((item) => (
            <NavItem key={item.title} icon={item.icon} href={item.href} title={item.title} />
          ))}
      </Box>
    </>
  );
  };

轨道.js:

const Page = ({ tracks }) => {
console.log(tracks);
return(<>....</>)
}

export async function getServerSideProps() {
const result =  await axios.get("/track/landing-tracks-for-admin");
return {
      props: {
        tracks: result.data,
      },
    };
}

track.status 可以是“草稿”或“已发布”。我想要的是在布局中显示草稿曲目的数量。这是一种通知，表示某些曲目尚未发布。

问题是在component布局中，我没有关于API响应的信息；它从getServerSideProps 调用以向页面提供数据。

我不使用 redux，并且除了 next-auth 会话之外我没有其他提供程序。我需要为此专门创建一个端点还是有其他解决方案？我想要最佳实践。

【问题讨论】：

嗨艾哈迈德，你检查我下面的答案了吗？请试一试让我知道:)
你好 yousoumar 是的，谢谢，我已经检查过了，我赞成这似乎是个好主意，但我认为使用你的解决方案我只能在调用页面后获取数据，但我想要的是在用户点击之前获取布局中的数据在布局上转到页面
我明白了，但这是不可能的，因为 getServerSideProps 字面意思是在您请求页面之后运行，意思是在您导航到其 URL 之后。
是的，这就是为什么我正在考虑创建一个端点来返回每个项目的通知数量。让它在useEffect() 中运行并在每次更新时触发它。
是的，那将是一个解决方案。我更新了我的答案以突出显示此案例。

标签： javascript reactjs next.js

【解决方案1】：

getServerSideProps 返回的数据作为props 传递给页面。同样的 props 可在 _app.js 中访问，因此您可以将其传递给布局。举个例子：

// components/layout.js

import Layout from "../components/layout";

export default function MyApp({ Component, pageProps }) {
  return (
    // here you pass the pageProps to the layout
    <Layout pageProps={pageProps}>
      <Component {...pageProps} />
    </Layout>
  );
}

// components/layout.js

export default function Layout({ pageProps, children }) {
  console.log(pageProps);
  return (
    <>
      <main>{children}</main>
    </>
  );
}

// pages/index.js

export async function getServerSideProps() {
  const result = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await result.json();
  return {
    props: {
      tracks: data,
      /*
        I'm passing this to know the data of which page
        is received in the Layout.
      */
      page: "home",
    },
  };
}

上述解决方案允许您在访问该页面的 URL 后访问数据。如果你想在Layout中获取数据而不去页面，你需要单独调用，就像useEffect：

// components/layout.js

import { useEffect } from "react";
import Footer from "./footer";

export default function Layout({ pageProps, children }) {
  useEffect(() => {
    async function fetcher() {
      const result = await fetch("https://jsonplaceholder.typicode.com/users");
      const data = await result.json();
      console.log(data);
    }
    fetcher();
  }, []);
  return (
    <>
      <main>{children}</main>
    </>
  );
}

【讨论】：