Содержание[Скрывать][Показывать]
При выборе программной библиотеки или фреймворка обычно учитывается опыт разработчика.
Когда я упоминаю «опыт разработчика», я имею в виду то, как разработчики на самом деле выполняют свою работу. Разработчики выбирают библиотеки или фреймворки, которыми приятно пользоваться.
Это одна из основных причин, почему сейчас у нас есть самые популярные библиотеки и фреймворки. Нам, как разработчикам, не нужно начинать с нуля, когда уже существуют инструменты, созданные для помощи в решении наших задач.
Фреймворки — это части программного обеспечения, которые создаются и используются разработчиками для создания приложений, и NextJS — одна из них.
В этом посте мы рассмотрим Nextjs, его ключевые функции и то, как мы можем использовать его для создания приложения. Давайте прыгать прямо в.
Что такое Next.js?
Next.js — это среда JavaScript для быстрого и простого создания статических веб-страниц и онлайн-приложений на основе React. Он позволяет создавать отличные веб-приложения для различных платформ, включая Windows, Linux и Mac.
Вы должны быть знакомы с фреймворком Next.js, если у вас есть минимальное представление о реакции и вы хотите узнать больше об экосистеме реакции.
Несмотря на то, что Next.js поставляется со всем необходимым для начала работы, вы можете выбирать между NPM и Yarn, JavaScript и TypeScript, CSS и SCSS, статическим экспортом и бессерверным развертыванием.
Особенности
- Маршрутизация выполняется автоматически — вам не нужно ничего настраивать, потому что любой URL-адрес сопоставляется с файловой системой, с файлами в папке страниц (конечно, у вас есть параметры настройки).
- Компоненты одного файла. Добавлять стили в область действия компонента очень просто с помощью styled-jsx, полностью интегрированного и созданного той же командой.
- Перезагрузка горячего кода — когда Next.js обнаруживает изменение, сохраненное на диске, он перезагружает страницу.
- Динамические компоненты — вы можете динамически загружать модули JavaScript и компоненты React.
- Статический экспорт — Next.js позволяет вам экспортировать полностью статический сайт из вашего приложения с помощью следующей команды экспорта.
- Совместимость с окружающей средой — Next.js легко интегрируется с экосистемами JavaScript, Node и React.
- Автоматическое разделение кодов — для рендеринга страниц используются только те библиотеки и JavaScript, которые необходимы. Вместо создания одного файла JavaScript, содержащего весь код приложения, Next.js разумно разделяет приложение на множество ресурсов.
Как создать приложение next.js?
Установка
Вы можете использовать команду node npx для установки и сборки проекта Next.js.
Это создаст папку и все файлы, конфигурации и другие элементы, необходимые для запуска проекта Next.js.
Вы можете запустить приложение после его создания.
Страницы и маршрутизация
Для обработки маршрутов с помощью Next.js нам не нужно использовать структуру маршрутизации. Маршрутизация с помощью Next.js очень проста в настройке. Когда вы используете команду create-next-app для создания нового приложения Next.js, приложение по умолчанию создает папку с именем «pages».
В этой папке «страницы» вы храните свои маршруты. В результате каждый файл компонентов реакции в подкаталоге будет обрабатываться как отдельный маршрут.
Например, если папка содержит эти файлы:
- index.js
- о.js
- статьи.js
Этот файл будет автоматически преобразован тремя способами:
- Индексная страница localhost/index
- О странице localhost/about
- Страница блога localhost/articles
Пример страницы about.js показан ниже. Как видите, о странице ничего не сообщается. Это просто стандартный функциональный компонент React.
Маршруты
Чтобы сделать вложенные маршруты, вы должны сначала создать подпапку. Например: страницы/статьи. Создайте свой реагирующий компонент «contact.js» в этой папке, и он сгенерирует страницу localhost/articles/contact.
Если вы поместите один файл в pages/articles.js, а другой — в pages/articles/index.js. Оба отражают один и тот же путь localhost/blog. В этой ситуации Next.js просто отобразит файл article.js. Как насчет динамических маршрутов, в которых у каждого поста в блоге есть свой собственный путь:
- локальный/блог/первая статья
- локальный/блог/-вторая статья
Используя нотацию скобок, вы можете определить динамический маршрут в Next.js. Например: страницы/статья/[slug].js
Связать маршруты
Вы завершили свой первый маршрут. Я предполагаю, что вы спрашиваете, как подключить страницы к этим маршрутам. Для этого вам понадобится «далее/ссылка».
Вот пример домашней страницы со ссылкой на страницу «О программе»:
Если вы хотите оформить ссылку, используйте следующий синтаксис:
Перенаправление маршрутов
Что делать, если вам нужно принудительно перенаправить на определенную страницу? Например, при нажатии кнопки? Вы можете сделать это, используя 'router.push':
SEO
Страницы в веб-приложениях требуют мета-элементов (заголовков) в дополнение к данным в теле HTML. Это потребует установки дополнительного требования под названием React Helmet в приложении React.
Мы можем использовать компонент Head из next/head в Next, чтобы легко добавлять метаданные на наши веб-страницы, которые будут отображаться в результатах поиска и встраиваниях:
Компоненты
Вам часто потребуется разрабатывать компоненты или файл макета. Например, компонент, который отображает панель навигации. До сих пор мы использовали только папку pages. Что делать, если ваш компонент не предназначен для использования в качестве страницы маршрута?
Вы не хотите, чтобы пользователь переходил на такую страницу, как localhost/navbar. Если вы поместите компонент Navbar.js в папку pages, произойдет вот что. Что делать в ситуации?
Просто сохраните все ваши компоненты «не страницы» в отдельной папке. Большинство проектов Next.js используют прозвище «компоненты», и эта папка создается в корневой папке вашего проекта.
Головной компонент
Начальная загрузка страницы обрабатывается Next.js на стороне сервера. Он делает это, изменяя HTML-код вашей страницы. Раздел заголовка включен.
Компонент Next.js Head используется для предоставления тегов раздела заголовка, таких как заголовок и мета. Компонент Head используется в этом примере компонента Layout.
Создать страницу 404 не найдено
Можно создать собственную страницу ошибки 404. Вы можете настроить сообщение или добавить свой собственный дизайн страницы. В папке pages создайте файл 404.js.
При возникновении ошибки 404 Next.js автоматически перенаправляет на эту страницу. Вот пример персонализированной страницы 404:
Получение данных со стороны сервера
Вместо того, чтобы загружать данные на стороне клиента, Next.js позволяет вам провести начальное заполнение данных, что подразумевает отправку страницы с данными, уже заполненными с сервера.
У вас есть два варианта реализации выборки данных на стороне сервера:
- Данные должны извлекаться при каждом запросе.
- Получайте данные только один раз в процессе строительства (статический сайт)
Извлекать данные по каждому запросу
Метод getServerSideProps используется для обработки каждого запроса на стороне сервера. Эта функция может быть включена в конец файла вашего компонента. Next.js автоматически заполнит свойства вашего компонента объектом getServerSideProps, если эта функция присутствует в вашем файле компонента.
Получить данные во время сборки
Метод getStaticProps используется для рендеринга на стороне сервера во время сборки. Эта функция может быть включена в конец файла вашего компонента. Этот метод запускает код сервера и отправляет запрос GET на сервер, но только один раз, когда наш проект завершен.
Почему вам стоит изучить Next.js?
Одна из причин этого заключается в том, что Next.js построен поверх React, набора инструментов для разработки интерфейса. создание пользовательских интерфейсов это мой любимый выбор для разработки веб-приложений.
Но этого было бы недостаточно, если бы Next.js не был хорош в том, что он делал… верно?
Итак, что именно он делает?
Мы должны сначала определить несколько понятий, чтобы понять это. Next.js приобрел популярность, потому что он решил проблему, с которой сталкивались многие веб-разработчики с клиентскими веб-приложениями (в браузере). Эти одностраничные приложения (SPA) были удобнее, поскольку им не требовалось, чтобы пользователь перезагружал страницу, и они обеспечивали большую интерактивность.
Однако, поскольку большая часть материала в таком приложении становится видимой только тогда, когда она выполняется в браузере, веб-краулерам трудно понять текстовое содержимое такого приложения.
В результате, несмотря на свою популярность, многие SPA оставались в значительной степени анонимными для крупных поисковых систем, таких как Google. Next.js теперь включает в себя более надежный встроенный механизм рендеринга на стороне сервера (SSR) компонентов React.
Next.js позволяет разработчикам создавать код JavaScript на сервере в процессе сборки и предоставлять пользователю базовый индексируемый HTML.
Плюсы
- Отлично подходит для пользовательского опыта
- Отлично подходит для SEO
- Создайте сверхбыстрый статический веб-сайт, который ведет себя как динамический
- Гибкость в построении UI и UX.
- Много преимуществ разработки
- Отличная поддержка сообщества
Минусы
- Веб-сайты или приложения имеют определенное количество времени для создания или разработки.
- Для определенных задач Next.js не подходит. Разработчики должны иметь возможность создавать динамические маршруты с помощью инструментов Node.js.
Заключение
Как видите, Next.js упрощает разработку приложений React и позволяет вам сосредоточиться на самом важном — логике вашего приложения и пользовательском интерфейсе. Он включает в себя все необходимое для создания современных приложений с широким интерфейсом и API.
Он также подходит для проектов, связанных только с контентом, таких как блоги и бизнес-сайты, благодаря возможности создания статических HTML-страниц.
В текущих выпусках Next.js не только поддерживает высокий уровень опыта разработчиков, но также предоставляет инструменты для повышения визуальной производительности и удобства пользователей, обеспечивая светлое будущее для этой платформы.
Оставьте комментарий