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», который ведет его создатель Эван Ю.
Typescript
Next js и Nuxt js имеют отличную поддержку TypeScript.
Next, как и React, использует более бережливый подход к настройке TypeScript, полагаясь на как можно больше возможностей родного языка, чтобы сохранить небольшой API.
В то же время Nuxt, как и Vue, стремится предоставить более удобный API для разработчиков, полагаясь на компиляторы уровня фреймворка для настройки TypeScript.
Страницы и маршрутизация
Маршрутизация обрабатывается одинаково в обоих фреймворках. По умолчанию при создании нового приложения Next или Nuxt создается каталог страниц. URL-адреса для приложения генерируются на основе имен файлов в этом каталоге, а маршруты также могут генерироваться динамически.
Однако в 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 или Pinia?».
Короткий ответ на него заключается в том, что это зависит от сложности вашего приложения. Для более подробного объяснения, пожалуйста, обратитесь к этой статье, написанной Майклом Тиссеном, в которой рассматривается UseState vs Pinia в Nuxt.
Заключение
В этой статье не ставится цель сделать вывод о том, какой фреймворк лучше. В конце концов, все зависит от предпочтений и того, что отвечает вашим потребностям и/или потребностям вашей команды.
С учетом вышесказанного, если вам нужен прогрессивный фронтенд-фреймворк, в котором приоритетом является удобство разработки, а также оптимизация скорости и производительности, мы настоятельно рекомендуем вам попробовать Nuxt js. Команда Nuxt неустанно работает над улучшением Nuxt, продолжая выпускать еще много интересных функций, которые не были упомянуты в этой статье.
Чтобы узнать больше о возможностях Nuxt 3, посетите курсы Vue Mastery, Nuxt 3 Essentials и Build a Blog w/ Nuxt 3 Content, которые проводит посол Nuxt Бен Хонг.
Первоначально опубликовано на https://www.vuemastery.com 24 августа 2022 года.