Next.js или React: что лучше использовать?

React — это инструмент для создания внешнего интерфейса. Next.js служит той же цели. Однако оба инструмента предлагают несколько разные наборы функций. Точнее, Next.js дает вам больше, чем React. Но это не значит, что вы должны выбирать его каждый раз.

Смотрите также почему я использую Next.js в своих проектах.

Разница между Next.js и React: Next.js дает больше возможностей

Преимущества React.js

Если вы не знаете, что такое React, это инструмент, упрощающий разработку веб-страниц. Это позволяет вам создавать компоненты (таким образом, разделяя ваши страницы и элементы пользовательского интерфейса на удобные части), используя выгодную разметку (JSX).

Angular и Vue выполняют одну и ту же работу с некоторыми различиями в реализации. Однако эти инструменты приносят нам удобство в разработке Интернета.

С React просто начать проект (используйте создать-реагировать-приложение), и у нас есть упаковщик и компилятор. Следующий шаг — запустить приложение с помощью одной команды. «Мы поняли. Это просто, хорошо, хорошо!»

Чтобы сравнить React и Next.js, давайте посмотрим, что позволяет нам делать Next.

Преимущества Next.js

Удовлетворительное тл;др было бы: » Next.js — это React, но с большим количеством функций.«Далее — фреймворк, использующий React. React — это библиотека, которая дает вам плюсы, о которых вы читали выше, но также дает вам свободу выбора. Кроме того, вы выбираете свой набор инструментов: систему маршрутизации, компилятор SCSS (если вам нужен SCSS вместо CSS) и так далее.

Next.js дает вам React, но с улучшенным интерфейсом разработчика. Вам не нужно тратить время на выбор. Но если хотите, то можете, конечно.

Давайте посмотрим на конкретные преимущества Next по сравнению с React.

Next.js экономит ваше время, а React дает больше вариантов, которые вам могут не понадобиться.

Маршрутизация

Зачем заботиться: вам не нужно тратить время на выбор роутера. Существует множество маршрутизаторов для React, и вы можете не знать, какой из них лучше всего подходит для вашей ситуации.

Далее встроен роутер. Вам нужно только поместить свои страницы в src/pages папка. Итак, «contact.tsx»(tsx представляет собой файл JSX с Typescript) будет доступен в виде страницы по адресу «yourAppAddress/contact». Также есть поддержка динамических маршрутов.

Генерация статических страниц

Почему это важно: если вам нужны статические страницы для вашего приложения (например, целевая страница, которая ведет к приложению), и вы не хотите делать их динамическими (из-за производительности), вам нужно настроить сервер, который будет обслуживать HTML-страницы в дополнение к вашему приложению React.

Вы можете создавать статические страницы с помощью Next.js, потому что он имеет встроенный сервер.

Зачем это нужно: то же самое, что и выше, за исключением того, что вы хотите генерировать страницу при каждом запросе.

Статическая генерация выводит HTML, который будет повторно использоваться при каждом запросе. Метод рендеринга на стороне сервера будет генерировать HTML при каждом запросе. Первый рекомендуется из-за лучшей производительности.

Получение данных

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

Методы выборки данных Next.js позволяют вам делать все это без настройки сервера. Например, вы можете создать статическую страницу, используя выборку локальных файлов во время сборки. Или можно запросить сторонний сервер без CORS, потому что у Next есть посредник — сервер API.

Оптимизация изображения

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

Обычно с изображениями возникают две очевидные проблемы:

1. Размер изображения. То есть сведение 3 МБ JPG в 40 КБ Webp.
2. Загрузка их после рендеринга страницы для снижения нагрузки на сеть.

Next решает эти проблемы для разработчика, чтобы он мог подумать о других частях приложения. Все изображения внутри этого использования next/image будет оптимизирован и лениво загружен. Кроме того, вы можете установить приоритет загрузки для каждого из них.

Оно использует СВК

Почему это важно: вам нужно более быстрое время сборки.

Next использует SWC, который, по их утверждению, » В 20 раз быстрее, чем Babel на одном потоке и в 70 раз быстрее на четырех ядрах». Такие скорости являются хорошим улучшением во время сборки и «горячей» перезагрузки.

Встроенный ESlint

Какая забота: вы тратите время на настройку ESlint.

Представьте, что вы написали несколько строк кода и уже получили предупреждения о проблемах с lint.

Встроенная поддержка TypeScript

Какая забота: вы хотите писать на Typescript, но настройка занимает некоторое время.

Эта функция является для меня огромным препятствием, потому что настройка Typescript требует времени. Иногда это просто установка пакета(npm install typescript), и добавление основного tsconfig.json. Тем не менее, вам необходимо правильно настроить его в соответствии с потребностями вашего проекта. Поскольку у вас есть различные файлы в проекте Next.js (таблицы стилей, public файлы, JSX, js), представьте, что вы просматриваете их, чтобы выяснить, что можно игнорировать, какие правила (конфигурации) добавить, а затем нужно отменить изменения с обновлениями фреймворка.

Next.js делает это за нас, ура!

Переменные среды

Зачем это нужно: если вы хотите хранить некоторую личную информацию, такую ​​как секреты, ключи API и т. д., и не хотите раскрывать их в пакете приложения. Вы можете создать сервер для извлечения этих данных или использовать стороннего поставщика, но это требует времени и еще одного места для вашего кода.

Платформа поддерживает .env файлы: создать .env.local, добавляйте секреты, и их никто не увидит. Вы также можете раскрыть некоторые из них, поставив перед ними префикс NEXT_PUBLIC_.

Работа со скриптами и производительность

Почему это важно: вы думаете о ленивой загрузке некоторых сценариев Javascript (также сторонних), загрузке их в первую очередь или установке любого другого приоритета.

Next.js может сделать все это, если вы используете \<Script\> вместо стандартного \<script\>. Кроме того, он может разгружать сценарии веб-воркеру, используя Город веселья.

У него есть сервер

Зачем это нужно: вам нужна серверная среда. Например, для выполнения запросов к базе данных.

Мы говорили об этом в разделе «Выборка данных», но это хороший момент, чтобы выделить еще раз, потому что вам может понадобиться сервер не только для выборки данных. Например, возможно, вам нужно выполнить некоторую логику, связанную с файловой системой, а затем получить результаты через сервер API Next.js.

Так зачем же тогда React?

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

Иногда вам не нужен такой зверь для простого варианта использования. Например, если у вас есть одна статическая страница, и вы не получаете никаких данных. Кроме того, у вас не так много динамической логики. Таким образом, нет необходимости приносить все упомянутые функции, потому что вам нужно изучить структуру (хотя ее документы великолепны) и ресурсы для поддержки накладных расходов на сборку. Т.е. зачем настраивать процесс CI Next.js, если у вас может быть просто HTML-страница?

Выберите Next.js для более удобного взаимодействия с разработчиком, чтобы вам не нужно было тратить время на настройку некоторых инструментов, а только на написание кода.

Оригинальная статья