Tengo una aplicación NextJS en la que acabo de hacer dos cosas. 1) He actualizado a la última versión de NextJS (9.0.1) y 2) he copiado archivos (package.json, páginas /, componentes / etc.) de la raíz de mi proyecto a un nuevo src / app / subdirectorio en la raíz de mi proyecto.

Las páginas que no usan enrutamiento dinámico se cargan perfectamente bien, pero hay un problema cuando necesito usar el objeto enrutador de Siguiente. Mi código original (que funcionaba bien antes de las dos cosas anteriores):

import { useRouter } from "next/router"; import { mockConsts } from "../../public/mockConsts"; const router = useRouter(); const userObj = mockConsts.users.filter( user ={amp}gt; user.username === router.query.username )[0]; 

Esto me da el error: TypeError: Cannot read property 'query' of null .

Si envuelvo un intento / atraparlo:

 let userObj = mockConsts.users[0]; try { const router = useRouter(); userObj = mockConsts.users.filter( user ={amp}gt; user.username === router.query.username )[0]; console.log("QUERY", router.query); } catch (e) { console.log("ERR", e); } 

El cliente y el servidor devuelven dos errores diferentes. El servidor aún devuelve el error anterior ( TypeError: Cannot read property 'query' of null ).

El cliente devuelve (a través de console.log):

 QUERY Object { } [username].tsx:16 Warning: Did not expect server HTML to contain a {amp}lt;div{amp}gt; in {amp}lt;div{amp}gt;. index.js:1 QUERY Object { username: "dog" } [username].tsx:16 

Con el try / catch puedo hacer que el código funcione como se mockConsts.users[0] , pero solo después de que haya mostrado mockConsts.users[0] (La primera «CONSULTA» en el registro de la consola está en blanco). Obviamente esto no es lo ideal.

EDITAR:

He reescrito el try / catch para que la funcionalidad sea la esperada:

 try { router = useRouter(); console.log("ROUTER", router); userObj = mockConsts.users.filter( user ={amp}gt; user.username === router!.query.username )[0]; } catch (e) { console.log("ERR", e); } 

ROUTER se registra dos veces:

 ROUTER Object { pathname: "/user/[username]", route: "/user/[username]", query: {}, asPath: "/user/[username]", components: {…}, events: {…}, push: field(), replace: field(), reload: field(), back: field() , … } [username].tsx:23 ROUTER Object { pathname: "/user/[username]", route: "/user/[username]", query: {…}, asPath: "/user/dog", components: {…}, events: {…}, push: field(), replace: field(), reload: field(), back: field(), … } [username].tsx:23 

Como puede ver, el atributo de query tiene valores ahora, y el atributo asPath es diferente.