0
261
ViewsLa URL de NextJS no funciona después de exportarse
Acabo de empezar a usar Next JS, siguiendo el tutorial de Brad Traversy en youtube. Usé next export para exportar el programa, tal como lo hizo en su tutorial. serve -s out -p 8000 . La página se carga en localhost:8000 , sin embargo, cuando voy a otros enlaces como localhost:8000/about , simplemente vuelve a cargar la página de inicio.
Busqué soluciones en línea, intenté agregar "trailingSlash": true a mi archivo next.config.js y aún no funciona.
Y la parte más confusa es cuando se hace clic en un elemento de enlace (desde el módulo "siguiente/enlace") en la página, funciona y me lleva a la página correcta. Pero cuando quiero acceder directamente desde la barra de direcciones , no funciona .
Por cierto, también funciona durante la producción.
Editar
Aquí está el archivo next.config.js :
module.exports = { trailingSlash: true, }; Aquí está el archivo package.json :
{ "name": "next-cc", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "export": "next build && next export" }, "dependencies": { "next": "10.1.3", "react": "17.0.2", "react-dom": "17.0.2" } }Editar: Aquí está la estructura de carpetas
Aquí hay un enlace al proyecto.
2 answers
Answer question0
El problema no es con Next.js o la exportación, sino con el comando que está ejecutando para servir los archivos estáticos.
El uso de la opción -s en el comando de serve reescribirá todos los archivos en index.html . Simplemente ejecute el comando sin esa opción.
npx serve out -p 80000
Experimenté el mismo problema con un sitio estático completo que quería exportar. Desafortunadamente, la respuesta propuesta no funcionó para mí, porque estaba implementando el sitio en una instancia de apache.
La próxima exportación básicamente representa las páginas del sitio con extensiones html, por lo que las etiquetas siguiente/enlazar a su página /about de seguirán funcionando cuando se haga clic en ellas, pero no cuando se llame a través de la URL de su navegador.
Para superar esto, debe utilizar la entrada exportPathMap en su next.config.js ( exportPathMap en la documentación)
exportPathMap: async function ( defaultPathMap, { dev, dir, outDir, distDir, buildId } ) { return { '/': { page: '/' }, '/about': { page: '/about' }, '/about/index': { page: '/about' }, } }, Por lo general, Next usa el directorio de páginas y exporta archivos estáticos con el nombre de la página y les agrega .html, por lo que http://localhost:3000/about se convierte en http://example.com/about.html , pero si aún desea el URL cortas, puede agregar una entrada /about/index en su mapa de ruta, lo que generará un archivo index.html en un directorio about , que luego tendrá su enlace corto /about que funcione como se espera en su servidor en vivo, incluso en la página recargas o ingresando la url en el navegador directamente.