Next.js – что это, чем отличается от React и где используется

JavaScript – язык, которым очень просто выстрелить себе (и проекту) в ногу, особенно – если речь идет о крупном проекте. Для того, чтобы разработка сложных пользовательских интерфейсов была не такой болезненной, разработчики создали множество фреймворков и библиотек, одна из самых популярных – React. React хорошо справлялся (и справляется) с Single-Page Applications, но когда речь заходит про многостраничные сайты – у React начинаются проблемы с SEO (Search Engine Optimization), Гугл и другие поисковики испытывают большие трудности с анализом страниц, созданных на React. В 2019 году эту проблему решили с помощью Next.js – фреймворке на основе библиотеки React. За прошедшие годы небольшой по тогдашним меркам фреймворк успел обрасти большим комьюнити функционалом – обо всем этом мы ниже и расскажем.

Next.js – что это, обзор

Проблемы React

Начнем с React, потому что именно его недостатки привели к появлению Next.js. React – это js-библиотека, которая позволяет создавать пользовательские интерфейсы. React полностью построен по принципу «модульность + декларативность»: каждый объект на странице изолирован от остальных, вид и поведение каждого объекта описываются декларативно – это когда мы описываем конечный результат, а способами достижения этого конечного результата занимается React.

Подход оказался настолько простым и удобным, что React быстро завоевал мировую популярность и стал одной из центральных JS-технологий. В основном модульность пригодилась в SPA – Single Page Applications, которые в те времена как раз были на подъеме. SPA – это сайты, у которых весь контент отображается на одной странице, без видимых переходов по другим ссылкам. Не нужно думать, что SPA – это только лендинги: ВКонтакте и gmail тоже относятся к SPA, потому что все действия вы совершаете на «основной странице», центральный блок которой меняется в зависимости от раздела.

Но у SPA (а, следовательно, и у Реакта) есть одна проблема: SEO. Боты поисковых машин очень хорошо справляются с HTML-разметкой и очень плохо справляются с разметкой, создаваемой JS-скриптами. Получается, что если вы хотите красивый и функциональный сайт – у вас будут проблемы с продвижением; если вы хотите сайт, который занимает ТОП поисковой выдачи – у вас не получится полноценное SPA. Бизнесы выходили из положения, создавая многостраничные сайты, мимикрирующие под SPA, пока не популяризовались технологии SSR и SSG – которые и лежат в основе Next.js.

SSR и SSG

SSR – это Server-Side Rendering, рендеринг на стороне сервера. На практике применение этой технологии означает, что HTML-страница генерируется прямо на сервере, после чего отдается клиенту. Это хорошо для клиента – ему не нужно ждать, пока страница «прогрузится», он сразу получает готовую (проблема железа клиента устраняется, остается только проблема интернет-соединения). Для SEO это тоже хорошо – роботы получают HTML-страницу, которую могут индексировать.

Но есть у SSR и серьезная проблема: нагрузка на сервера. Если при CSR (Client-Side Rendering) сервер просто отдавал скрипты, и клиент сам с ними разбирался, то при SSR вся вычислительная нагрузка ложилась на сервер, и стоимость обслуживания железа могла полностью съесть выгоду от SSR. Проблему существенно уменьшили с помощью технологии SSG – Static Site Generation. Суть проста: если без SSG мы при каждом запросе рендерим и отдаем клиенту страницу, то с SSG мы рендерим все страницы при создании (build) сайта и отдаем уже отрендеренные по запросу, если на сайте произошли изменения – просто заново рендерим измененную страницу. Получается такое глобальное кэширование.

Так вот, Next.js – это как раз фреймворк, который позволяет построить приложение с использованием SSR и SSG.

Особенности и преимущества Next.js

Фреймворк создавался с учетом 6 основных принципов:

1. Нулевая подготовка. Для того, чтобы создать приложение на Next.js, вам не нужно устанавливать сторонние зависимости – только Next и React.
2. Только JavaScript. Все приложения Next.js пишутся на одном языке – JS. Есть, правда, оговорка – можно использовать TypeScript, для которого Next предоставляет свой плагин с расширенными возможностями.
3. Разделение «клиент-сервер». Фреймворк четко делит код на клиентский и серверный – вы не можете их смешать.
4. Данные по запросу. Клиент получит только те данные от сервера, которые запросит разработчик – ничего лишнего.
5. Предугадывание запросов. Фреймворк на основе данных о действиях пользователя предугадывает последующие запросы и заранее загружает информацию.
6. Быстрый деплой. Разработчик должен иметь возможность развернуть полностью готовое приложение одной командой.

Из этих принципов выросли особенности/преимущества фреймворка:

• Быстрая загрузка страниц, простая SEO-оптимизация сайта. Последствия применения SSR и SSG.
• Разделение кода. Поскольку весь интерфейс разделен на изолированные блоки (спасибо React), Next.js может подгружать только те объекты, которые сейчас нужны пользователю.
• Быстрая замена модулей. Если вы что-то измените на сайте – Next.js тут же отрендерит статичную часть страницы.
• Ленивая загрузка. HTML-страница отправляется клиенту моментально, а все тяжелые элементы отправляются последовательно по мере возможности.
• Упрощенный роутинг. Во фреймворк вшиты простые правила роутинга на основе файловой системы – вам даже ничего не нужно поддерживать, просто создавайте файлы в нужных папках.
• Гибкое получение данных. Данные можно отправлять/получать когда угодно – от пре-рендера на сервере до локальных data fetch на стороне клиента.
• Масштабируемость. Преимущество масштабирования полностью перетекло из React в Next.js в полном объеме.

Кроме того, фреймворк разработан таким образом, чтобы деплой приложения проходил максимально легко: можно прикрутить внешний кэш и load balancing, можно задать горизонтальное масштабирование, есть опции для оптимизации работы с базами данных и так далее.

Как устроен интерфейс на Next.js

Роутинг

Как мы уже упоминали, роутинг в приложении основан на файловой системе. Все страницы лежат в каталоге «pages», если вы хотите добавить новую – просто создайте файл. Можно добавлять другие каталоги, в которых будут храниться каталоги или файлы – так вы организовываете дерево страниц, которое идентично дереву каталогов.

Описанное выше – статичные адреса, кроме них вы можете создавать динамичные. Для этого нужно будет создать каталог, имя которого помещено в квадратные скобки – так фреймворк будет знать, что здесь будут лежать страницы для динамичных путей. Данные, необходимые для формирования и страницы, и динамичного пути к нему, вы сможете запрашивать у сервера через функцию getServerSideProps().

API

Next.js позволяет добавить слой абстракции для API – без этого слоя вы в приложении делаете вызовы к API сервера напрямую, с этим слоем вы делаете запросы через специальные скрипты, расположенные в каталоге «api» проекта.

Первое преимущество такого подхода – вы можете менять адреса запросов изменением одной строки в одном конкретном файле. Второе преимущество такого подхода – вы можете создавать кастомные обработчики запросов для конкретных страниц.

Глобальные элементы

Фреймворк позволяет кастомизировать все страницы сразу – для этого существуют файлы _app.js и _document.jsx. Первый позволяет задавать логику, которая будет работать во всем приложении (авторизация, например), второй позволяет задать глобальные правила рендеринга всех страниц в проекте.

Дополнительные компоненты

Наконец, Next.js предоставляет дополнительные библиотеки на все случаи жизни. Чаще всего используются библиотеки для роутинга (расширяют возможности по генерации ссылок и сбору информации), линковки (создают ссылки с SEO-оптимизацией), работы с хедером и работы с внешними скриптами.

Плюсы и минусы Next.js по сравнению с React

Поскольку Next.js – это фреймворк, расширяющий возможности React, при анализе плюсов и минусов имеет смысл сравнивать эти технологии. Итак:

Таким образом, Next.js – это технология, которая в основном нужна средним и крупных компаниям, имеющим возможности для разработки и поддержания проекта «с нуля».

Пример приложения

Для начала вам нужно установить Node.js/npm/npx и создать новый проект следующей командой:

npx create-next-app@latest my-next-app
cd my-next-app

После этого в каталоге pages создайте страницу «about» – для этого нужно создать файл «about.js» со следующим кодом:

// pages/about.js
export default function About() {
return (
<div>
<h1>О нас</h1>
<p>Это страница о нас.</p>
</div>
);
}

Теперь нужно связать index.html с about.html – для этого в index.js добавьте следующее:

import Link from 'next/link';
export default function Home() {
return (
<div>
<h1>Главная страница</h1>
<p>Добро пожаловать на наш сайт!</p>
<Link href="/about">
<a>О нас</a>
</Link>
</div>
);
}

Готово – осталось запустить проект:

npm run dev

Приложение будет доступно по адресу http://localhost:3000

Выучить Next.js – курсы на Сравни

Конкретно по Next.js курсы найти очень сложно – технология не так распространена, как тот же React, и новичкам Next.js обычно не нужен. Если вы хотите выучить и Next.js, и React, и фронтенд в целом – вам нужны курсы, дающие профессию:

• «Frontend-разработчик» от Нетологии, длительность – 11 месяцев.
• «Frontend-разработчик» от ProductStar, длительность – 10 месяцев.
• «Frontend-разработчик» от Академии Eduson, длительность – 7.5 месяцев.
• «Фронтенд-разработчик» от Skillbox, длительность – 9 месяцев.
• «Фронтенд-разработчик» от Яндекс.Практикум, длительность – 10 месяцев.

Вывод

Тезисно:

• Next.js – это фреймворк, который позволяет строить многостраничные SEO-оптимизированные сайты с помощью Server-Side Rendering и Static Site Generation.
• Next.js – наследник React, поэтому сохранил все его преимущества, в том числе – модульность и императивность.
• Разрабатывать приложения на Next – просто, потому что фреймворк старается упростить сложные стороны разработки – работу с API, роутинг и так далее.
• В основном Next.js требуется на крупных и средних проектах, в том числе – из-за повышенных требований к инфраструктуре и повышенной нагрузке на сервера.
• Проще всего выучить Next.js и React на курсах фронтенд-разработчика.