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 图像组件不会在 localhost 上加载图像
Vercel 中的 Next.js 与 Sentry - 在生产中忽略源映射
Python 无服务器函数 Vercel - Next.js