Estoy tratando de agregar un enlace para redirigir a los usuarios a la página de creación, pero cuando hice clic en el enlace, recibí el siguiente error:
TypeError: Cannot read properties of undefined (reading 'cookies')Código de enlace:
<Link href={link}>Add New Employee</Link>getInitialProps // _app.tsx
MyApp.getInitialProps = async (context: any) => { const {req, res, pathname} = context.ctx; const {language, auth_key} = req.cookies; return { lang: language ?? 'ar', token: auth_key ?? null, } };Debe escribir código isomorfo dentro MyApp.getInitialProps porque ese código puede ejecutarse tanto en el servidor (durante la carga de la primera página) como en el cliente (durante las navegaciones del lado del cliente).
De la documentación de getInitialProps :
Para la carga de la página inicial,
getInitialPropsse ejecutará solo en el servidor.getInitialPropsluego se ejecutará en el cliente cuando navegue a una ruta diferente a través del componentenext/linko usandonext/router. Sin embargo, si se usagetInitialPropsen un_app.jspersonalizado, y la página a la que se navega implementagetServerSideProps,getInitialPropsse ejecutará en el servidor.
Aquí hay una posible implementación para evitar su error. Comprueba si req está definido antes de acceder a req.cookies . Si es así, las cookies se recuperan del document en su lugar.
// Get cookie from `document` on the client-side const getCookie = (name) => { const match = document.cookie?.match(new RegExp(`(^| )${name}=([^;]+)`)); return match?.[2]; }; MyApp.getInitialProps = async (context) => { const { req } = context.ctx; const language = req ? req.cookies.language : getCookie('language'); const auth_key = req ? req.cookies.auth_key : getCookie('auth_key'); return { lang: language ?? 'ar', token: auth_key ?? null, } };