Введение
Одна из самых первых причин вставать рано, когда вы на пляже, — это увидеть красивый восход солнца. Сегодня я провел время на пляже, пытаясь завершить статью, которую начал вчера вечером. Это небольшая статья, в которой я написал о навигации Next.js и ее реализации. Так что без лишних слов давайте перейдем к теме.
Веб-сайты и веб-приложения обычно имеют более одной страницы. Но вам может быть интересно, как добиться маршрутизации в Next.js, чтобы пользователи могли перемещаться между страницами. В этой статье мы рассмотрим, как перемещаться между страницами, но перед этим давайте сначала рассмотрим краткое введение в Next.js.
Что такое Next.js?
В нашей предыдущей статье мы более подробно обсуждали Next.js и его интересные функции. Next.js — это среда разработки с открытым исходным кодом, построенная на основе React.js. Это фреймворк на основе React, обладающий различными функциями для запуска как рендеринга на стороне сервера, так и создания статических веб-сайтов на стороне клиента.
Next.js дает вам потрясающий опыт разработки со всеми функциями, которые он предоставляет для любого готового приложения. Такие функции, как гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута, обеспечивают разработчикам беспрепятственный опыт разработки.
Теперь давайте рассмотрим, как добавить больше страниц в наше приложение и как управлять маршрутизацией страниц в Next.js.
В этой статье мы узнаем:
- Настроить проект в Next.js
- Создать страницы
- Используйте компонент Link, чтобы включить навигацию между страницами на стороне клиента.
1. Настройте проект в Next.js
Начнем с первоначальной настройки проекта Next.js. Если вы впервые пытаетесь создать проект в Next.js, обратитесь к Официальному сайту Nextjs, где вы получите обширные знания о Nextjs и его основных функциях.
Чтобы создать новое приложение, просто напишите следующую команду create-next-app, которая автоматически настроит все за вас. Чтобы создать проект, запустите:
npx create-next-app@latest # or yarn create next-app
После завершения установки:
- Запустите
npm run dev
илиyarn dev
, чтобы запустить сервер разработки наhttp://localhost:3000
. - Посетите
http://localhost:3000
в своем браузере, чтобы просмотреть свое приложение
2. Создайте страницы
В Next.js мы обычно создаем отдельную папку с именем pages. Эта папка состоит из всех страниц приложения. Страницы связаны с маршрутами на основе их имени файла. Например:
3. Компонент ссылки
Теперь мы используем next/link для включения перенаправления между страницами. Чтобы связать разные страницы, мы используем HTML-тег ‹a›. Next.js использует компонент ссылки из next/link для переноса тега ‹a›. ‹Ссылка› позволяет выполнять на стороне клиента переход на другую страницу приложения.
Чтобы использовать Nextjs ‹Ссылка›
Сначала откройте pages/index.js и импортируйте компонент Link из next/link, добавив эту строку вверху:
В этом примере мы создаем страницу о нас только для простоты. Поэтому открывайте pages/about.js и начинайте писать контент. Вы можете добавить остальные страницы позже.
Заворачивать
В этом уроке мы узнали, как использовать ссылку Next.js для навигации между разными страницами веб-сайтов. Next.js обладает множеством замечательных функций, включая Навигацию на стороне клиента и Динамическую навигацию, но в этом примере мы использовали навигацию на стороне клиента с помощью тега Link. Теперь связывать страницы на любом веб-сайте Next.js стало проще, чем когда-либо. Большое спасибо команде Next.js.
Демо
Вы можете получить полный код из моего репозитория GitHub. Также эта демка развернута в Верселе. Взгляни!
Первоначально опубликовано на https://letmefail.com 9 марта 2022 г.