Problema
En mi configuración de mecanografiado nextjs, tengo una ruta dinámica en un archivo llamado [name].tsx. Según el nombre, quiero precargar metaetiquetas. El enrutador React puede recuperar el valor almacenado en el parámetro de nombre, pero solo después de representar mi componente con nombre = indefinido. Esto hace que las metaetiquetas también contengan name = undefined. ¿Cómo puedo llenar las etiquetas meta con el valor correcto en el primer renderizado?
Código
import { useEffect } from "react"; import { useRouter } from "next/router"; function Page() { const router = useRouter(); const { name } = router.query; useEffect(() => { if (!name) { return; } }, [name]); return ( <head> <meta property="og:description" content={"My name is " + name} /> </head> ); } export default Page;Prueba
Ingrese la URL de la página que incluye la ruta aquí: https://cards-dev.twitter.com/validator
Algunos dicen que esto no es posible. ¿Es esto cierto?
Soluciones que no me funcionan: