Estoy intentando crear una página de perfil de usuario que genere contenido basado en la pestaña actual en la que se encuentra el usuario.
La pestaña se decide en función de lo que se pasa en la URL (por ejemplo /username/tab1 ). El único problema con esto es que una de las pestañas válidas que el usuario puede visitar en realidad tiene un valor en blanco ( /username , para obtener la pestaña predeterminada).
Sin embargo, cuando ingresa esto en el navegador, Next asume automáticamente que quiero recuperar /[user]/index.js (que no existe), cuando en realidad lo que quiero obtener es /[user]/[tab].js y pase un valor en blanco a la propiedad tab en context.query .
¿Es esto posible sin crear un archivo index.js y [tab].js separado?
// Exported inside /pages/[user]/[tab].js export const getServerSideProps = async (context) => { const { page, tab } = context.query; // When we're on /username/foo it should output "foo". // When we're on /username it should output "". console.log(tab); };Puede lograr esto utilizando una ruta catch-all opcional .
Entonces, cambie el nombre de su [tab].js como [[...tab]].js , para que también atrape las solicitudes a /username sin una pestaña. Luego, en su código, manejará la pestaña como opcional.