Next.js це популярний фреймворк із відкритим вихідним кодом, побудований на основі React, розроблений, щоб допомогти розробникам створювати додатки React, що відображаються на сервері. Однією з його потужних функцій є можливість створювати клієнтські переходи між сторінками без ініціювання повного перезавантаження сторінки завдяки вбудованому компоненту next/link. У цій статті ми навчимося використовувати next/link, створивши невелику програму Next.js.
Що далі/посилання?
The далі/посилання це компонент React, який дозволяє створювати посилання між сторінками в додатку Next.js. На відміну від звичайного тегу прив’язки HTML, далі/посилання не запускає повне перезавантаження сторінки, коли користувач натискає посилання. Натомість він використовує навігацію на стороні клієнта для завантаження нової сторінки, зберігаючи поточний стан програми. Це означає, що ваша програма працюватиме швидше та краще реагуватиме на користувачів.
Синтаксис: Синтаксис використання Посилання є прямим. Ви можете імпортувати компонент із далі/посилання модуль:
// Import import Link from 'next/link'; // Link component New Page>
Потім ви можете використовувати компонент Link у своєму коді JSX, щоб створити посилання на іншу сторінку. The href prop визначає URL-адресу сторінки, на яку потрібно зробити посилання, і дочірній елемент Посилання компонент — вміст посилання.
Створення програми NextJS: Відкрийте термінал або командний рядок і виконайте наступну команду
npx create-next-app next-link>
Перейдіть до каталогу програми/проекту:
cd next-link>
Структура проекту:
ітератор java для карти
NextJ наступний/посилання
Базове використання «далі/посилання»: У цьому прикладі ми створимо просту програму Next.js із двома сторінками: додому і приблизно . Будемо використовувати далі/посилання щоб створити зв'язок між сторінками.
Створіть новий каталог під назвою сторінки у корені вашого проекту. Тут ви зберігатимете свої сторінки Next.js. Створіть новий файл під назвою index.js всередині сторінки каталог. Це буде додому сторінку вашої програми. Додайте наступний код до index.js:
водяний знак у word
Ім'я файлу: index.js
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
рядок у java
>
Запустіть сервер розробки за допомогою команди:
npm run dev>
Відкрийте веб-переглядач і перейдіть до http://localhost:3000 . Ви повинні побачити додому сторінки вашої програми зі списком блог пости. Клацніть одне з посилань, щоб перейти на сторінку окремої публікації. Ви повинні побачити блог пост з відповід слимак в URL-адресі.
Вихід:
NextJ наступний/посилання
У цьому прикладі ми продемонстрували, як використовувати далі/посилання з динамічною маршрутизацією. Ми створили новий шаблон сторінки для особи блог постів і вик Посилання щоб створити посилання на кожну окрему сторінку публікації. Ми також використовували useRouter гачок від наступний/маршрутизатор щоб отримати доступ до слимак з URL-адреси та відобразіть відповідний блог пост.
На закінчення, далі/посилання це потужний інструмент, який спрощує навігацію в додатках Next.js, забезпечуючи швидке та чутливе реагування на стороні клієнта. Його простий синтаксис і простота використання роблять його популярним вибором серед розробників для створення посилань між сторінками та динамічної маршрутизації.