驴C贸mo definir rutas en NextJS?
Next.js utiliza un router (enrutador) basado en el sistema de archivos donde las carpetas se utilizan para definir rutas.
Cada carpeta representa un segmento de ruta que se asigna a un segmento de URL. Para crear una ruta anidada, puedes anidar carpetas entre s铆.
馃搧 app Root
馃搧 dashboard Segmento
馃搧 settings 脷ltimo segmento
Un archivo llamado page.js es utilizado para hacer p煤blicos segmentos de la ruta.
馃搧 app /
馃搫 page.js
馃搧 dashboard /dashboard
馃搫 page.js
馃搧 settings /dashboard/settings/
馃搫 page.js
馃搧 analytics Ruta que no se muestra
En el ejemplo anterior, la direcci贸n
/dashboard/analyticsno es p煤blica, ya que carece de un archivopage.js. Este directorio puede ser entonces utilizado para crear componentes.
Creando interfaces de usuario
Existen diferentes convenciones para mostrar contenido en segmentos de rutas como: layouts, pages, loading, not-found, etc. De todos estos el mas com煤n son las pages que muestran el contenido de una ruta, as铆 como los layouts que corresponden a la interfaz de usuario utilizada a trav茅s de m煤ltiples rutas.
Para crear una p谩gina en el home de nuestro proyecto, solo creamos un archivo page.tsx en el directorio app.
export default function Page() {
return <h1>Hola Mundo</h1>
}
Conclusiones
En resumen, Next.js simplifica el enrutamiento mediante el uso de un sistema de archivos intuitivo, donde las carpetas y archivos definen las rutas y su estructura. La creaci贸n de interfaces de usuario se facilita con convenciones claras como layouts y pages, permitiendo una organizaci贸n coherente y eficiente del contenido. Al seguir estas pr谩cticas, los desarrolladores pueden construir aplicaciones Next.js robustas y bien estructuradas, mejorando tanto la experiencia del usuario como la mantenibilidad del c贸digo.