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

Question

如果我显式地输入fetcher，那么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上下文提供程序用页面特定的布局组件包装应用组件，给出未定义的数据

Answer 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}
</>
);
};

Answer 2

如果将Page声明为const，则布局不起作用。所以用function First() {...}

代替const First = () => {...}