Введение

Одна из самых первых причин вставать рано, когда вы на пляже, — это увидеть красивый восход солнца. Сегодня я провел время на пляже, пытаясь завершить статью, которую начал вчера вечером. Это небольшая статья, в которой я написал о навигации 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 г.