Debe mover sus components fuera de la carpeta de pages . pages/ solo debe usarse para los componentes de la página, ya que el enrutamiento de Next.js se basa en su estructura .

Next.js tiene un enrutador basado en un sistema de archivos basado en el concepto de páginas.

Cuando se agrega un archivo al directorio de páginas, está disponible automáticamente como una ruta.

Aunque lo anterior es el comportamiento predeterminado, puede configurar su aplicación Next.js para incluir archivos que no sean de página en el directorio de pages .

Para hacerlo, puede modificar la entrada pageExtensions en el archivo next.config.js como se muestra a continuación. Luego cambie el nombre de los componentes de su página para que tengan una extensión de archivo que incluya .page ( _document.page.js , _app.page.js , index.page.js , etc.).

 module.exports = { pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'] }

Con esta configuración, Next.js ignorará cualquier archivo que no contenga .page con el fin de crear páginas/rutas API y enrutamiento.