Nuxt vs Next — как они сравниваются?

Автор: Дэвид Нвадиогбу

Nuxt и Next — две внешне похожие фреймворки, которые предоставляют разработчикам инструменты, необходимые для создания современных веб-приложений. Но как они сравниваются?

С одной стороны, у нас есть Nuxt js, мощная, интуитивно понятная среда Vue, в которой предварительно заданы все конфигурации, необходимые для создания готовых к производству приложений Vue. С другой стороны, есть Next js, фреймворк React, созданный Vercel и используемый для создания визуализируемых на стороне сервера и/или статических веб-приложений.

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

Так чем же похожи Nuxt js и Next js?

Сходства

  • Оба они используются при создании серверных визуализированных и/или статических веб-приложений.
  • Они оба имеют встроенную поддержку TypeScript.
  • Они оба просты в настройке и не требуют настройки при начальной сборке.
  • Они оба производят оптимизированные для SEO приложения.
  • Они оба очень хорошо справляются с автоматическим разделением кода.
  • Оба они поддерживают динамическую маршрутизацию.
  • У них обоих отличная документация и активное сообщество.
  • Они оба обладают возможностями полного стека, где вы можете запускать код серверного API из приложения.

Глядя на эти сходства, вы можете задаться вопросом… Со всеми новыми функциями Nuxt 3, которые выводят его на новый уровень для профессиональных веб-разработчиков, как новый Nuxt js сравнивается с Next js?

Давайте посмотрим.

Чем Nuxt отличается от Next

Инструменты

Next.js использует Webpack для объединения своих ресурсов, а Nuxt.js поддерживает как Webpack 5, так и Vite.js.

Важно отметить, что Vite не зависит от библиотеки/фреймворка, и многие разработчики React предпочитают использовать Vite для инструментов. Это из-за всех замечательных функций, которые приносит с собой Vite. Однако в настоящее время Vite не поддерживает Next.js, и у команды Next.js нет планов по его поддержке в будущем. Если вы хотите узнать обо всех преимуществах Vite по сравнению с Webpack, ознакомьтесь с этой статьей о Vite или курсом Vue Mastery Молниеносные сборки с Vite, который преподает его создатель Эван Ю.

Машинопись

Next js и Nuxt js имеют отличную поддержку TypeScript.

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

Между тем, Nuxt, как и Vue, стремится предоставить более удобный API для разработчиков, полагаясь на компиляторы уровня фреймворка для своей конфигурации TypeScript.

Страницы и маршрутизация

Маршрутизация обрабатывается одинаково для обоих фреймворков. Каталог pages создается по умолчанию при создании нового приложения Next или Nuxt. URL-адреса для приложения генерируются на основе имен файлов в этом каталоге, а маршруты также могут генерироваться динамически.

Однако этот каталог pages теперь совершенно необязателен в Nuxt 3, поскольку не все приложения требуют маршрутизации.

Макеты пользовательского интерфейса

При создании веб-приложений иногда вы можете столкнуться с различными типами макетов пользовательского интерфейса для других страниц в дизайне приложения. Nuxt js позволяет указать разные макеты в каталоге layouts вашего проекта. Таким образом, каждой странице можно назначить макеты, соответствующие соответствующему пользовательскому интерфейсу.

Создание многоразовых макетов — хорошая практика, поскольку она усиливает принцип DRY (не повторяйтесь).

Вот как вы можете переопределить макет по умолчанию для каждой страницы, указав собственный макет:

*page/index.vue*
<script>
definePageMeta({
  layout: "blog",
});
</script>

Автоматический глобальный импорт

Представьте, что вам больше никогда не придется писать оператор импорта. В Nuxt js все в фреймворке, такие как встроенные компонуемые элементы, такие как useHead, и компоненты, такие как NuxtLink, доступны вам в любом файле без необходимости их импорта.

Кроме того, любой компонент или составной элемент, который вы создаете в своем проекте, автоматически становится доступным на каждой странице.

Nuxt предотвращает конфликты имен, отображая предупреждение, когда это происходит. Автоматический импорт экономит разработчикам много времени и улучшает общий опыт разработки.

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

Государственное управление

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

Nuxt js предоставляет компонуемый useState, который позволяет вам определять реактивные, удобные для SSR состояния, которые могут использоваться несколькими компонентами. Напрашивается вопрос: А как насчет ref или Пинии?

Короткий ответ на это заключается в том, что это зависит от сложности вашего приложения. Для более подробного объяснения, пожалуйста, обратитесь к этой статье, написанной Майклом Тиссеном, в которой исследуется useState против Пинии Nuxt.

Заключение

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

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

Чтобы узнать больше о том, что может предложить Nuxt 3, ознакомьтесь с курсами Vue Mastery Основы Nuxt 3 и Создание блога с контентом Nuxt 3, которые ведет амбассадор Nuxt Бен Хонг.

Первоначально опубликовано на https://www.vuemastery.com 24 августа 2022 г.