Next.js és un marc de codi obert popular construït a la part superior de React, dissenyat per ajudar els desenvolupadors a crear aplicacions React renderitzades al servidor. Una de les seves potents característiques és la capacitat de crear transicions del costat del client entre pàgines sense activar una recàrrega completa de la pàgina, gràcies al component següent/enllaç integrat. En aquest article, aprendrem a utilitzar next/link mitjançant la creació d'una petita aplicació Next.js.
Què és el següent/enllaç?
El següent/enllaç és un component React que us permet crear enllaços entre pàgines en una aplicació Next.js. A diferència d'una etiqueta d'ancoratge HTML normal, següent/enllaç no activa una recàrrega de pàgina completa quan l'usuari fa clic a l'enllaç. En comptes d'això, utilitza la navegació del costat del client per carregar la pàgina nova alhora que conserva l'estat actual de l'aplicació. Això vol dir que la vostra aplicació se sentirà més ràpida i més sensible als usuaris.
Sintaxi: La sintaxi per utilitzar Enllaç és senzill. Podeu importar el component des de següent/enllaç mòdul:
// Import import Link from 'next/link'; // Link component New Page>
A continuació, podeu utilitzar el component Enllaç al vostre codi JSX per crear un enllaç a una altra pàgina. El href prop especifica l'URL de la pàgina a la qual voleu enllaçar i l'element secundari del fitxer Enllaç component és el contingut de l'enllaç.
tipus en java
Creeu l'aplicació NextJS: Obriu un terminal o un indicador d'ordres i executeu l'ordre següent
npx create-next-app next-link>
Navegueu al directori de la vostra aplicació/projecte:
cd next-link>
Estructura del projecte:
NextJs next/link
Ús bàsic de 'següent/enllaç': En aquest exemple, crearem una aplicació Next.js senzilla amb dues pàgines: casa i Sobre . Farem servir següent/enllaç per crear un enllaç entre les pàgines.
Creeu un directori nou anomenat pàgines a l'arrel del vostre projecte. Aquí és on emmagatzemareu les vostres pàgines Next.js. Creeu un fitxer nou anomenat index.js dins del pàgines directori. Aquest serà el casa pàgina de la vostra aplicació. Afegiu el codi següent a index.js:
Nom del fitxer: index.js
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
Executeu el servidor de desenvolupament amb l'ordre:
npm run dev>
Obriu el vostre navegador web i navegueu a http://localhost:3000 . Hauries de veure el casa pàgina de la vostra aplicació amb una llista de bloc publicacions. Feu clic a un dels enllaços per anar a la pàgina de publicació individual. Hauries de veure el bloc publicació amb el corresponent llimac a l'URL.
Sortida:
freddie mercury
NextJs next/link
En aquest exemple, hem demostrat com utilitzar-lo següent/enllaç amb encaminament dinàmic. Hem creat una nova plantilla de pàgina per a individus bloc publicacions i utilitzades Enllaç per crear enllaços a cada pàgina de publicació individual. També hem utilitzat el utilitzar el router ganxo de següent/encaminador per accedir a llimac paràmetre de l'URL i mostra el corresponent bloc publicació.
En conclusió, següent/enllaç és una eina potent que simplifica la navegació a les aplicacions Next.js, permetent una representació ràpida i sensible al costat del client. La seva sintaxi senzilla i la seva facilitat d'ús la converteixen en una opció popular entre els desenvolupadors per crear enllaços entre pàgines i encaminament dinàmic.