React — это инструмент для создания внешнего интерфейса. Next.js служит той же цели. Однако оба инструмента предлагают несколько разные наборы функций. Точнее, Next.js дает вам больше, чем React. Но это не значит, что вы должны выбирать его каждый раз.
Преимущества React.js
Если вы не знаете, что такое React, это инструмент, упрощающий разработку веб-страниц. Это позволяет вам создавать компоненты (таким образом, разделяя ваши страницы и элементы пользовательского интерфейса на удобные части), используя выгодную разметку (JSX).
Angular и Vue выполняют одну и ту же работу с некоторыми различиями в реализации. Однако эти инструменты приносят нам удобство в разработке Интернета.
С React просто запустить проект (используйте create-react-app), и у нас есть сборщик и компилятор. Следующий шаг — запустить приложение с помощью одной команды. "Мы поняли. Все просто, хорошо, хорошо!»
Чтобы сравнить React и Next.js, давайте посмотрим, что позволяет нам делать Next.
Преимущества Next.js
Удовлетворительным tl;dr будет: «Next.js — это React, но с большим количеством функций». Next — это фреймворк, использующий React. React — это библиотека, которая дает вам плюсы, о которых вы читали выше, но также дает вам свободу выбора. Вы можете использовать другой компилятор или упаковщик, или вы можете использовать его на платформе, основанной на реакции. Кроме того, вы выбираете свой набор инструментов: систему маршрутизации, компилятор SCSS (если вам нужен SCSS вместо CSS) и так далее.
Next.js дает вам React, но с улучшенным интерфейсом разработчика. Вам не нужно тратить время на выбор. Но если хотите, то можете, конечно.
Давайте посмотрим на конкретные преимущества Next по сравнению с React.
Маршрутизация
Зачем беспокоиться: вам не нужно тратить время на выбор маршрутизатора. Существует множество маршрутизаторов для React, и вы можете не знать, какой из них лучше всего подходит для вашей ситуации.
Далее встроен роутер. Вам нужно только поместить свои страницы в папку `src/pages`. Таким образом, файл «contact.tsx» («tsx» — это JSX с Typescript) будет доступен как страница по адресу «yourAppAddress/contact». Также есть поддержка динамических маршрутов.
Генерация статических страниц
Почему это важно: если вам нужны статические страницы для вашего приложения (например, целевая страница, которая ведет к приложению) и вы не хотите делать их динамическими (из-за производительности), вам нужно настроить сервер, который будет обслуживать HTML-страницы в дополнение к вашему приложению React.
Вы можете создавать статические страницы с помощью Next.js, потому что он имеет встроенный сервер.
Рендеринг на стороне сервера
Зачем: то же самое, что и выше, за исключением того, что вы хотите создавать страницу при каждом запросе.
Статическая генерация выводит HTML-код, который будет повторно использоваться при каждом запросе. Метод рендеринга на стороне сервера будет генерировать HTML при каждом запросе. Первый рекомендуется из-за лучшей производительности.
Получение данных
Почему это важно: если вы хотите получать данные, минуя CORS, или получать данные из базы данных непосредственно из вашего приложения, или читать файлы, вам понадобится сервер.
Методы выборки данных Next.js позволяют вам делать все это без настройки сервера. Например, вы можете создать статическую страницу, используя выборку локальных файлов во время сборки. Или вы можете запросить сторонний сервер без CORS, потому что у Next есть посредник — сервер API.
Оптимизация изображения
Зачем беспокоиться: вам не нужно думать об оптимизации изображений. То есть, как уменьшить размер изображения, какой формат выбрать и как отложить загрузку изображений.
Обычно с изображениями возникают две очевидные проблемы:
- Размер изображения. То есть, уменьшение JPG размером 3 МБ до Webp размером 40 КБ.
- Загрузка их после рендеринга страницы для снижения нагрузки на сеть.
Next решает эти проблемы для разработчика, чтобы он мог подумать о других частях приложения. Все изображения внутри, использующие `next/image`, будут оптимизированы и загружены с отложенной загрузкой. Кроме того, вы можете установить приоритет загрузки для каждого из них.
Он использует SWC
Почему это важно: вам нужно ускорить время сборки.
Next использует SWC, который, согласно их заявлению, «в 20 раз быстрее, чем Babel на одном потоке и в 70 раз быстрее на четырех ядрах». Такие скорости являются хорошим улучшением во время сборки и «горячей» перезагрузки.
Встроенный ESlint
Зачем беспокоиться: вы тратите время на настройку ESlint.
Представьте, что вы написали несколько строк кода и уже получили предупреждения о проблемах с lint.
Встроенная поддержка TypeScript
Зачем вам это нужно: вы хотите писать на Typescript, но его настройка занимает некоторое время.
Эта функция является для меня огромным препятствием, потому что настройка Typescript требует времени. Иногда это просто установка пакета (`npm install typescript`) и добавление базового `tsconfig.json`. Тем не менее, вам необходимо правильно настроить его в соответствии с потребностями вашего проекта. Поскольку у вас есть различные файлы в проекте Next.js (таблицы стилей, «общедоступные» файлы, JSX, js), представьте, что вы просматриваете их, чтобы выяснить, что можно игнорировать, какие правила (конфигурацию) добавить, а затем сломать. меняется с обновлениями фреймворка.
Next.js делает это за нас, ура!
Переменные среды
Зачем это нужно: если вы хотите хранить некоторую личную информацию, такую как секреты, ключи API и т. д., и не хотите раскрывать их в пакете приложения. Вы можете создать сервер для извлечения этих данных или использовать стороннего поставщика, но это потребует времени и еще одного места для вашего кода.
Фреймворк поддерживает файлы `.env`: создайте `.env.local`, добавьте секреты, и никто их не увидит. Вы также можете раскрыть некоторые из них, поставив перед ними префикс NEXT_PUBLIC_.
Работа со скриптами и производительность
Почему это важно: вы думаете об отложенной загрузке некоторых сценариев Javascript (в том числе сторонних), загрузке их в первую очередь или установке любого другого приоритета.
Next.js может сделать все это, если вы используете `‹Script›` вместо стандартного `‹script›`. Кроме того, он может разгружать скрипты веб-воркеру с помощью Partytown.
У него есть сервер
Зачем вам это нужно? Вам нужна серверная среда. Например, для выполнения запросов к базе данных.
Мы говорили об этом в разделе «Выборка данных», но это хороший момент, чтобы подчеркнуть еще раз, потому что вам может понадобиться сервер не только для выборки данных. Например, возможно, вам нужно выполнить некоторую логику, связанную с файловой системой, а затем получить результаты через сервер API Next.js.
Так зачем же тогда React?
Next.js имеет больше функций, чем я описал здесь (те, которые мне лично нравятся и которые я хотел выделить). Итак, мы подошли к вопросу, зачем нужен React при старте нового проекта.
Иногда вам не нужен такой зверь для простого варианта использования. Например, если у вас есть одна статическая страница, и вы не получаете никаких данных. Кроме того, у вас не так много динамической логики. Таким образом, нет необходимости приносить все упомянутые функции, потому что вам нужно изучить фреймворк (хотя его документы великолепны) и ресурсы для поддержки накладных расходов на сборку. То есть, зачем настраивать процесс CI Next.js, если у вас может быть просто HTML-страница?
Выберите Next.js для лучшего опыта разработчиков, чтобы вам не нужно было тратить время на настройку некоторых инструментов, а только на программирование.
"Источник"
