En el proceso de desarrollo de aplicaciones web, la gestión de páginas y la navegación entre ellas es un aspecto crucial. En esta serie de artículos, profundizaremos en los fundamentos de la creación de páginas y la implementación de la navegación en Next.js. Estos conceptos fundamentales son esenciales para crear aplicaciones web flexibles y manejables.
Creación y visualización de la primera página
En primer lugar, comprendamos cómo crear y mostrar una página sencilla en formato Next.js. Puede crear páginas creando archivos dentro del pages directorio de su proyecto. Por ejemplo, para crear una página de bienvenida, puede crear un archivo nombrado welcome.js dentro del pages directorio.
// pages/welcome.js
function WelcomePage() {
return <h1>Welcome to Next.js!</h1>;
}
export default WelcomePage;
En el fragmento de código anterior, hemos creado una página de bienvenida simple. Cuando acceda a la /welcome ruta en su navegador web, verá el mensaje "¡Bienvenido a Next.js !" desplegado.
Básico Routing
Next.js ofrece un sistema robusto e intuitivo routing que facilita la navegación entre páginas. Routing in Next.js se basa en el pages directorio, con cada archivo en este directorio correspondiente a una ruta específica. Por ejemplo, un archivo nombrado about.js dentro del pages directorio creará una página accesible en la /about ruta.
Creación de enlaces y navegación
Para crear enlaces entre páginas y navegar entre ellas, podemos usar el <Link> componente de la next/link biblioteca. A continuación se muestra un ejemplo de creación de un enlace desde la página de bienvenida a la página acerca de nosotros.
// pages/welcome.js
import Link from 'next/link';
function WelcomePage() {
return(
<div>
<h1>Welcome to Next.js!</h1>
<Link href="/about">Learn more about us</Link>
</div>
);
}
export default WelcomePage;
En el ejemplo anterior, al hacer clic en el enlace "Más información sobre nosotros", será redirigido a la /about página.
Conclusión
En esta sección, hemos explorado cómo crear y mostrar páginas simples Next.js y cómo implementar la navegación entre páginas usando el pages directorio y el <Link> componente. Estos son pasos iniciales cruciales en la creación de una Next.js aplicación. En los próximos artículos, continuaremos explorando otros aspectos de Next.js la creación de aplicaciones web dinámicas e interactivas.