Soy nuevo en NEXT.JS y tengo algunos problemas para implementar un sitio estático. Tengo un componente Nav.tsx que se ve así:
const Nav = () => { return ( <nav className='nav p-3 border-bottom'> <Link href='/' passHref> <a className='pointer my-auto h2'>Blog </a> </Link> <Link href='/about' passHref> <a className='ms-5 pointer lead my-auto'>Who We Are</a> </Link> <Link href='/services' passHref> <a className='ms-5 pointer lead my-auto'>Services</a> </Link> <Link href='/contact' passHref> <a className='ms-5 pointer lead my-auto'>Contact</a> </Link> </nav> ); }; export default Nav; Cuando ejecuto mi servidor de desarrollo localmente, puedo usar esos enlaces para navegar por mi sitio. Pero cuando construyo, usando next build && next export , los enlaces no funcionan para la navegación. Todos esos enlaces ( /about , /services , /contact ) son archivos en el directorio de mis pages . ¿Escribí algo incorrecto en Nav.tsx , o estoy malinterpretando cómo funciona NEXT? ¡Gracias!
Esto se puede resolver aplicando {trailingSlash: true} dentro de next.config.js . Consulte Cómo lidiar con la exportación de archivos NextJS con la extensión .html pero en <Link> no hay .html para obtener más información.
Encontré el mismo problema recientemente y descubrí que esto se puede resolver moviendo otras páginas que no son de índice, como pages/search.js a pages/search/index.js . No es necesario piratear a través de .htaccess , etc.
Sin embargo, deberá actualizar sus importaciones relativas para que Next.js aún pueda compilar, como:
import styles from '../styles/Home.module.css';a
import styles from '../../styles/Home.module.css';