Siguiente.js es un popular marco de código abierto construido sobre React, diseñado para ayudar a los desarrolladores a crear aplicaciones React renderizadas en servidor. Una de sus poderosas características es la capacidad de crear transiciones del lado del cliente entre páginas sin activar una recarga completa de la página, gracias al componente siguiente/enlace incorporado. En este artículo, aprenderemos cómo usar next/link creando una pequeña aplicación Next.js.
¿Qué sigue/enlace?
El siguiente/enlace es un componente de React que le permite crear enlaces entre páginas en una aplicación Next.js. A diferencia de una etiqueta de anclaje HTML normal, siguiente/enlace no activa una recarga de página completa cuando el usuario hace clic en el enlace. En cambio, utiliza la navegación del lado del cliente para cargar la nueva página mientras conserva el estado actual de la aplicación. Esto significa que su aplicación se sentirá más rápida y con mayor capacidad de respuesta para los usuarios.
Sintaxis: La sintaxis para usar Enlace es sencillo. Puede importar el componente desde el siguiente/enlace módulo:
// Import import Link from 'next/link'; // Link component New Page>
Luego, puede usar el componente Enlace en su código JSX para crear un enlace a otra página. El href prop especifica la URL de la página a la que desea vincular y el elemento secundario de la Enlace El componente es el contenido del enlace.
Cree la aplicación NextJS: Abra una terminal o símbolo del sistema y ejecute el siguiente comando
npx create-next-app next-link>
Navegue hasta el directorio de su aplicación/proyecto:
cd next-link>
Estructura del proyecto:
SiguienteJs siguiente/enlace
Uso básico de 'siguiente/enlace': En este ejemplo, crearemos una aplicación Next.js simple con dos páginas: hogar y acerca de . Usaremos siguiente/enlace para crear un enlace entre las páginas.
Crea un nuevo directorio llamado paginas en la raíz de su proyecto. Aquí es donde almacenará sus páginas Next.js. Crea un nuevo archivo llamado index.js dentro de paginas directorio. Este será el hogar página de su solicitud. Agregue el siguiente código a índice.js:
Nombre de archivo: index.js
nube de primavera
JavaScript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
Ejecute el servidor de desarrollo usando el comando:
npm run dev>
Abra su navegador web y navegue hasta http://localhost:3000 . Deberías ver el hogar página de su aplicación con una lista de Blog publicaciones. Haga clic en uno de los enlaces para navegar a la página de publicación individual. Deberías ver el Blog publicar con el correspondiente babosa en la URL.
Producción:
dividido por cadena java
SiguienteJs siguiente/enlace
En este ejemplo, demostramos cómo usar siguiente/enlace con enrutamiento dinámico. Creamos una nueva plantilla de página para individuos. Blog publicaciones y usados Enlace para crear enlaces a cada página de publicación individual. También utilizamos el utilizar enrutador gancho de siguiente/enrutador para acceder al babosa parámetro de la URL y mostrar el correspondiente Blog correo.
En conclusión, siguiente/enlace es una poderosa herramienta que simplifica la navegación en aplicaciones Next.js, permitiendo una representación del lado del cliente rápida y receptiva. Su sintaxis sencilla y su facilidad de uso lo convierten en una opción popular entre los desarrolladores para crear enlaces entre páginas y enrutamiento dinámico.