Next.js 的每页布局组件没有从 Vercel 的 swr 全局配置中获得价值

Posted

技术标签:

【中文标题】Next.js 的每页布局组件没有从 Vercel 的 swr 全局配置中获得价值【英文标题】:Next.js's per page layout component doesn't get value from Vercel's swr global configuration 【发布时间】:2021-12-24 22:06:32 【问题描述】:

如果我明确输入 fetcher,来自 swr 的 useSWR 钩子在任何地方都可以工作。

const  data  = useSWR("http://...", fetcher);

但是,如果我使用如下所示的 swr 全局配置,useSWR 仅适用于 First 页面,但不适用于 HeaderLayout 组件。我做了一些调试,发现在HeaderLayout 中没有收到来自 swr 全局配置的值(SWRConfig_app.tsx 中),即使它被包裹在里面。

我按照这个文档https://nextjs.org/docs/basic-features/layouts#per-page-layouts 进行页面布局实现

// _app.tsx
type NextPageWithLayout = NextPage & 
  getLayout?: (page: React.ReactElement) => React.ReactNode;
;

type AppPropsWithLayout = AppProps & 
  Component: NextPageWithLayout;
;

function MyApp( Component, pageProps : AppPropsWithLayout) 
  const getLayout = Component.getLayout ?? ((page) => page);

  return (
    <SWRConfig
      value=
        fetcher: (resource, init) =>
          fetch(resource, init).then((res) => res.json()),
      
    >
      getLayout(<Component ...pageProps />)
    </SWRConfig>
  );

// pages/first
const First = () => 
  const [searchInput, setSearchInput] = useState("");
  const router = useRouter();

  const  data  = useSWR("http://...");

  return (
    <div>...Content...</div>
  );
;

First.getLayout = HeaderLayout;
// layout/HeaderLayout
const HeaderLayout = (page: React.ReactElement) => 
  const router = useRouter();
  const  project: projectId, application: applicationId  = router.query;

  const  data  = useSWR(`http://...`);

  return (
    <>
      <Header />
      page
    </>
  );
;

有用的链接:

https://nextjs.org/docs/basic-features/layouts#per-page-layouts

https://swr.vercel.app/docs/global-configuration

Next.js context provider wrapping App component with page specific layout component giving undefined data

【问题讨论】:

【参考方案1】:

您的First.getLayout 属性应该是一个接受page 并返回由HeaderLayout 组件包装的页面的函数。

First.getLayout = function getLayout(page) 
    return (
        <HeaderLayout>page</HeaderLayout>
    )

HeaderLayout 是一个 React 组件,它的第一个参数包含传递给它的 props。您需要稍微修改其签名以匹配此。

const HeaderLayout = ( children ) => 
    const router = useRouter();
    const  project: projectId, application: applicationId  = router.query;

    const  data  = useSWR(`http://...`);

    return (
        <>
            <Header />
            children
        </>
    );
;

【讨论】:

以上是关于Next.js 的每页布局组件没有从 Vercel 的 swr 全局配置中获得价值的主要内容,如果未能解决你的问题,请参考以下文章

如何修复 Next.js Vercel 部署模块未找到错误

Next.Js 图像组件不会在 localhost 上加载图像

Vercel 中的 Next.js 与 Sentry - 在生产中忽略源映射

Python 无服务器函数 Vercel - Next.js

使用 getStaticProps() 将 Next.js 部署到 Vercel 的速率限制问题

错误:命令“npm run build”以 1 退出。vercel deploy 错误与 next.js