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

Posted 2023-04-14

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

【英文标题】：Next.js's per page layout component doesn't get value from Vercel's swr global configuration

【发布时间】：2021-12-09 08:31:51

【问题描述】：

如果我明确输入提取器，来自 swr 的 useSWR 钩子在任何地方都有效。

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

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

我按照这个文档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
        </>
    );
;

【参考方案2】：

如果您将 Page 声明为 const，则布局不起作用。所以不要const First = () => ... 做function First() ...