El useSWR de swr funciona en todas partes si ingreso explícitamente el buscador.
const { data } = useSWR("http://...", fetcher); Sin embargo, si usé la configuración global de swr como se muestra a continuación, useSWR solo funciona en la First página pero no en el componente HeaderLayout . Realicé una depuración y descubrí que en HeaderLayout no recibe el valor de la configuración global swr ( SWRConfig en _app.tsx ) a pesar de que está envuelto dentro.
Seguí este documentohttps://nextjs.org/docs/basic-features/layouts#per-page-layouts para la implementación del diseño de página
// _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} </> ); };Enlaces Útiles:
https://nextjs.org/docs/basic-features/layouts#per-page-layouts
Su propiedad First.getLayout debe ser una función que acepte una page y devuelva esa página envuelta por el componente HeaderLayout .
First.getLayout = function getLayout(page) { return ( <HeaderLayout>{page}</HeaderLayout> ) } El HeaderLayout es un componente de React, su primer argumento contiene los props que se le pasan. Debe modificar su firma ligeramente para que coincida con esto.
const HeaderLayout = ({ children }) => { const router = useRouter(); const { project: projectId, application: applicationId } = router.query; const { data } = useSWR(`http://...`); return ( <> <Header /> {children} </> ); };Los diseños no funcionan si declara la página como const. Entonces, en lugar de const First = () => {...} , haga function First() {...}