~ 10 минут
Next.js - фреймворк на основе React, для улучшенной производительности и пользовательского опыта. Предварительный рендеринг, включая SSR и SSG, создает улучшенные веб-приложения
Вадим Пашаев
8/4/2023
Next.js - это фреймворк, основанный на React, который позволяет создавать веб-приложения с улучшенной производительностью и улучшенным пользовательским опытом с помощью дополнительных функций предварительного рендеринга, таких как полноценный рендеринг на стороне сервера (SSR) и статическая генерация страниц (SSG).
Таким образом приложения Next.js используют все преимущества библиотеки React и просто добавляют дополнительные функции:
Server Side Rendering. SSR позволяет получать доступ ко всем необходимым данным для построения страницы на сервере. Затем страница полностью отправляется обратно в браузер и сразу же отображается. SSR позволяет веб-страницам загружаться за меньшее время и повышает удобство работы пользователей за счет повышения скорости отклика.
SEO или просто поисковая оптимизация. Использование SSR также дает вам преимущество в SEO, что помогает вашему сайту занимать более высокие позиции на страницах результатов поисковых систем. SSR повышает рейтинг веб-сайтов для SEO, потому что они загружаются быстрее и больше контента сайта можно сканировать с помощью трекеров SEO.
Тег <head>
. Next.js также позволяет вам редактировать тег <head>
сайта, что вы не можете сделать в React. Тег <head> является основной частью метаданных веб-страницы и способствует повышению SEO-рейтинга сайта.
Основное преимущество Next.js - встроенная поддержка SSR для повышения производительности и SEO. Рендеринг на стороне сервера работает путем изменения потока запросов приложения React, так что все компоненты, кроме клиента, отправляют свою информацию на сервер.
Имея всю информацию на сервере, клиент может получить предварительную версию HTML-кода страницы. Клиент может отправить один запрос на сервер и получить полноценную HTML-страницу вместо того, чтобы запрашивать каждый компонент по отдельности с рендерингом на стороне клиента.
Плюсы:
Минусы:
Единственным реальным недостатком Next.js является то, что это самостоятельный фреймворк, то есть у него есть определенный метод и набор инструментов, которые он хочет, чтобы вы использовали для создания своих приложений.
Однако возможности Next.js вполне подходят для большинства проектов.
Next.js лучше всего подходит, когда необходимо создать оптимизированный лендинг или домашнюю страницу, а также любые другие страницы, которые полагаются на органический поисковый трафик. Эти страницы получат наибольшую выгоду от встроенных функций Next.js.
Давайте посмотрим на пример полноценного приложения Next.js, чтобы вы могли увидеть, как оно устроено. Мы будем использовать приложение Next.js по умолчанию, созданное с помощью команды:
Файл index.js, представляет отдельную страницу в этом проекте и выглядит следующим образом:
По сути, индексный файл является ядром этого приложения, поскольку каждый файл в каталоге pages
является отдельной страницей. Реальные веб-сайты будут содержать несколько страниц в папке pages
, которая сопоставляется с соответствующим URL-адресом веб-приложения.
Теперь давайте подойдем с практической точки зрения и взглянем на код Next.js. Рассмотрим 5 основных концепций, которые представили нам разработчики фреймворка и которые понадобятся вам для создания собственного проекта на Next.js.
Прежде чем мы начнем, давайте настроим все, что вам нужно. Помимо самого фреймворка Next.js. вам потребуются Node.js, npm и npx.
Вы можете установить Node.js с их официального сайта. Чтобы убедиться, что он загружен правильно, введите в командной строке node -v
. Обычно npm и npx одновременно устанавливаются при установке Node.js.
Чтобы убедиться, что они установлены правильно, введите в командной строке
npm -v
иnpx -v
. Каждый вернет свою версию соответственно.
Если все три инструмента установлены правильно, вы cможете установить Next.js с помощью Node. Введите npm install next react react-dom
в командную строку.
После успешной установки вы получите cообщение с вашими текущими версиями Next и React.
Есть два способа создания приложения на Next.js, первый с помощью команды
create-next-app
или второй - вручную. Использоватьcreate-next-app
проще, поскольку все, что вам нужно сделать, это ввестиnpm create-next-app <app-name>
в командную строку. Но ниже мы будем делать это вручную.
Кроме того, вы можете открыть файл package.json
и ввести следующие сценарии:
Это позволяет запускать новое приложение в разных режимах:
dev
запускает Next.js в режиме разработки;start
запускает Next.js в режиме Production;build
собирает ваше приложение Next.js для Production. Независимо от того, какой метод вы выберете, он сгенерирует базовый шаблон приложения Next.js, который мы видели ранее.Если вы запустите это приложение с помощью next dev
и перейдете Next.js по умолчанию на , то увидите примерно следующее:
Оценка проекта
И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию