Nextjs против Nuxtjs: какой из них использовать?

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

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

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

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

Что такое NuxtJS?

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

Основой вашего проекта Vue.js является NuxtJS, который обеспечивает структуру и гибкость, поэтому вы можете уверенно его создавать. Сосредоточив внимание на предоставлении фантастических возможностей для разработчиков, NuxtJS стремится сделать веб-разработку простой и эффективной. С его помощью вы можете сосредоточиться на том, что важно — на создании приложения.

Новые функции публичной бета-версии NuxtJS 3, выпущенной в октябре, дали разработчикам больше времени, чтобы сосредоточиться на создании замечательных пользовательских интерфейсов. В результате рост сообщества NuxtJS резко возрос.

Экосистема модулей

Чтобы расширить базу фреймворка и упростить интеграцию, NuxtJS предлагает модульную систему. Модульная система более высокого порядка, предлагаемая NuxtJS, позволяет расширять ядро. Когда NuxtJS загружается, модули — это функции, которые вызываются по порядку. Если для него существует модуль NuxtJS, вам не нужно создавать его с нуля или поддерживать шаблон. «Nuxt.config» можно использовать для добавления модулей NuxtJS.

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

Это одна из причин, по которой NuxtJS предлагает модульную архитектуру, позволяющую расширять ядро. В дополнение ко многим другим полезным действиям они могут настраивать загрузчики веб-пакетов, устанавливать библиотеки CSS и изменять файлы шаблонов. Распространение модулей NuxtJS в пакетах npm — лучшая часть. Чтобы узнать больше о модулях NuxtJS, нажмите здесь и здесь .

Автоимпорт компонентов

Чтобы выполнить выборку данных, получить доступ к контексту приложения и конфигурации среды выполнения, управлять состоянием или создавать компоненты и плагины, NuxtJS автоматически импортирует функции и компонуемые объекты. NuxtJS немедленно импортирует любые компоненты в вашем каталоге components/ (вместе с компонентами, зарегистрированными любыми модулями, которые вы можете использовать).

| components/
--| TheHeader.vue
--| TheFooter.vue

layouts/default.vue:

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

В NuxtJS 3 мы получаем новую дополнительную папку с именем «composables/», которая будет автоматически импортировать написанную вами функцию Composition API. Компоненты автоматически импортируются в папку «components/», а маршрутизация на основе файлов — в папку «pages/». Нажмите здесь, чтобы узнать больше об автоимпорте NuxtJS.

Режимы рендеринга

Рендеринг — это процесс, посредством которого браузер и сервер переводят компоненты Vue.js в элементы HTML, читая код JavaScript.

NuxtJS поддерживает как клиентскую, так и глобальную визуализацию. Сложный динамический пользовательский интерфейс (UI) с плавным переходом между страницами можно создать с помощью методов рендеринга на стороне клиента. Сохраняя преимущества рендеринга на стороне клиента, универсальный рендеринг позволяет приложениям NuxtJS предлагать быструю загрузку страниц. Кроме того, поскольку содержимое уже включено в текст HTML, поисковые роботы могут индексировать его без дополнительных усилий.

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

Приложения JavaScript часто сталкиваются с трудностями при работе с SEO и метатегами. Это связано с тем, что страница изначально пуста, когда мы полагаемся на JavaScript для получения наших данных, таких как контент и метаописания. Кроме того, нет материалов для индексации или обработки перед выполнением JavaScript. Кроме того, многие поисковые роботы не поддерживают JavaScript. В результате, если вы поделитесь статьей из своего JavaScript-блога на Facebook, она может появиться с заголовком «undefined», а не с оригинальным заголовком статьи. Рендеринг на стороне сервера (SSR) может спасти нас в этой ситуации. Целью SSR является размещение сервера, который будет генерировать HTML-ответ и предоставлять его сканеру или клиенту. В результате в упомянутом выше примере сервер обработает вызов API, после чего будут установлены метаданные и будет доставлена ​​финальная страница.

С NuxtJS 3 теперь возможен гибридный рендеринг. Это позволит вам использовать такие функции, как добавочная статическая генерация, которая сочетает в себе рендеринг на стороне сервера (SSR) и генерацию статического сайта (SSG), а также другие сложные режимы. Режимы рендеринга также можно найти здесь и здесь .

Маршрутизация файловой системы

Для каждой страницы NuxtJS предлагает автоматическую маршрутизацию и разделение кода. NuxtJS автоматически создает конфигурацию Vue-маршрутизатора на основе дерева файлов Vue внутри каталога pages. Вам не нужно выполнять какую-либо дополнительную настройку после создания файла .vue в каталоге ваших страниц, чтобы заставить работать базовую маршрутизацию.

Это файловое дерево:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

автоматически сгенерирует:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

Используя Vue Router в качестве серверной части, можно использовать маршрутизацию на основе файлов для построения маршрутов в вашем онлайн-приложении. Если вы используете только app.vue, vue-router не будет включен, потому что этот каталог является необязательным, что уменьшает размер пакета вашего приложения. Во всем вашем приложении NuxtJS предлагает настраиваемую платформу промежуточного программного обеспечения маршрута, которая идеально подходит для извлечения кода, который вы хотите выполнить, прежде чем перейти к определенному маршруту.

Запустите в компоненте Vue вашего приложения NuxtJS промежуточное ПО маршрута. Несмотря на схожее имя, они не совпадают с промежуточным программным обеспечением сервера, которое работает на сервере Nitro вашего приложения. Подробнее о маршрутизации файлов NuxtJS можно узнать здесь .

Нулевая конфигурация

Конфигурация NuxtJS по умолчанию охватывает большинство вариантов использования. Файл nuxt.config.js позволяет заменить конфигурацию по умолчанию. Вы можете использовать NuxtJS, чтобы указать глобальные файлы CSS, модули и библиотеки, которые вы хотите использовать (включены на каждую страницу). Добавьте эти ресурсы CSS в nuxt.config.js:

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss'
  ]
}

NuxtJS автоматически определит тип файла на основе его расширения и использует соответствующий загрузчик препроцессора для веб-пакета. Вы все равно должны установить необходимый загрузчик, если хотите их использовать. Вы можете опустить расширение файла для файлов, указанных в массиве CSS в вашем файле конфигурации NuxtJS, таких как CSS, SCSS, Postcss, Less, Stylus и т. д.

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

NuxtJS берет на себя все остальное, пока вы работаете непосредственно над кодом своего приложения. Вот дополнительная информация о конфигурации NuxtJS.

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

Вы можете использовать NuxtJS для получения контента из любого источника в ваши компоненты Vue с поддержкой SSR. NuxtJS предлагает метод Fetch и метод asyncData в качестве двух (2) методов для получения данных из API.

После того, как экземпляр компонента установлен, Fetch представляет собой ловушку, вызываемую как на клиенте во время навигации, так и во время рендеринга на стороне сервера. Хук fetch должен (явно или неявно через async/await) возвращать обещание, которое будет выполнено: до того, как первая страница будет отображена на сервере, и после того, как компонент будет смонтирован на клиенте.

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

Другой хук для глобального извлечения данных — это asyncData . В отличие от Fetch, который требует выполнения действий Vuex или изменения свойств экземпляра компонента для сохранения асинхронного состояния, asyncData просто объединяет возвращаемое значение с локальным состоянием вашего компонента. Используя библиотеку @nuxt/http, рассмотрим следующий пример:

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

N/B: asyncData доступен только для страниц; хук не имеет к нему доступа. Более подробную информацию о выборке данных можно найти в этом руководстве .

SEO-оптимизация

С NuxtJS у вас есть три варианта включения метаданных в ваше приложение:

1. Глобальное использование nuxt.config.js
2. Локальное использование головы как объекта
3. Локальное использование головы в качестве функции для извлечения данных и вычисляемых свойств

NuxtJS предлагает управление метатегами и более быстрое получение контента для отличной индексации. Вот еще руководство по метатегам и SEO.

Плюсы NuxtJS

NuxtJS является расширяемым и позволяет легко интегрировать ваши любимые конечные точки REST или GraphQL, CMS, CSS-фреймворки и многое другое благодаря надежной экосистеме модулей и движку хуков. Ниже приведены некоторые из многих преимуществ использования NuxtJS:

• Вы можете развернуть полнофункциональные приложения Vue, которые будут быстрыми и оптимизированными для SEO, с помощью NuxtJS, который также предоставляет убедительное решение и отличную экосистему.
• Благодаря инновационному подходу NuxtJS ускоряет создание и функциональность вашего будущего веб-сайта или приложения, объединяя превосходный опыт разработчика с многоразовыми, полностью интегрированными функциями.
• Простота NuxtJS и постепенная кривая обучения делают его фантастическим вариантом.
• Между рендерингом на стороне сервера (SSR) и созданием статического сайта NuxtJS обеспечивает универсальность (SSG).
• В дополнение к продуманной настройке и структуре, NuxtJS предлагает автоматическое разделение кода, эффективную командную работу, надежную структуру каталогов и соглашения.

Минусы NuxtJS

Каждое преимущество имеет соответствующий недостаток. Недостатки использования NuxtJS перечислены ниже:

• Для NuxtJS доступно меньше ресурсов и, возможно, менее подробная документация по продукту из-за небольшого сообщества.
• На вашем сервере высокий трафик может быть особенно обременительным.
• Только определенные хуки позволяют вам взаимодействовать и запрашивать DOM.
• Получить настроенные библиотеки для работы с NuxtJS может быть непросто.
• Несомненно, есть популярные, надежные плагины или отсутствующие элементы, такие как Календарь, Карты Google, векторные карты и т. д. Хотя есть дополнительные компоненты, они, как правило, плохо поддерживаются.

Что такое Next.js?

Next.js — лучший инструмент для любого разработчика React, позволяющий изучать и улучшать свои проекты. Это среда веб-разработки с открытым исходным кодом, построенная на основе Node.js и облегчающая рендеринг на стороне сервера и развертывание статических веб-сайтов для веб-приложений на основе React.

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

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

Маршрутизация файловой системы

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

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

'pages/index.js' → '/'
'pages/blog/index.js' → '/blog'

Маршрутизатор совместим с вложенными файлами в маршруте Nested, и структура вложенных папок по-прежнему будет автоматически передавать файлы аналогичным образом.

'pages/blog/first-post.js' → '/blog/first-post'
'pages/dashboard/settings/username.js' → '/dashboard/settings/username'

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

'pages/blog/[slug].js' → '/blog/:slug' ('/blog/hello-world')
'pages/[username]/settings.js' → '/:username/settings' ('/foo/settings')
'pages/post/[...all].js' → '/post/*' ('/post/2020/id/title')

Ознакомьтесь с документацией по маршрутам , чтобы узнать больше о том, как они работают.

Рендеринг на стороне сервера

В зависимости от варианта использования вашего приложения выборка данных в Next.js позволяет отображать информацию различными способами. К ним относятся предварительный рендеринг с использованием статической генерации сайта (SSG) или рендеринга на стороне сервера (SSR), а также динамическое создание или обновление контента с использованием добавочной статической регенерации. Next.js будет предварительно отображать страницу, используя информацию, предоставленную функцией getServerSideProps (рендеринг на стороне сервера), если вы экспортируете ее со страницы.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Каждый 'prop' будет отправлен компоненту страницы независимо от метода рендеринга, и первый HTML-код может быть прочитан на стороне клиента. Это необходимо для правильного увлажнения страницы.

Генерация статического сайта

Список путей, которые должны создаваться статически, должен быть определен, если страница использует «getStaticProps» и содержит динамические маршруты. Любые пути, предоставленные функцией getStaticPaths (генерация статического сайта), экспортированные со страницы, использующей динамические маршруты, будут статически предварительно обработаны Next.js.

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

Справочник по API охватывает все параметры и свойства, которые можно использовать с getStaticPaths. Next.js выполняет предварительную визуализацию страниц во время сборки (SSG) или во время запроса (SSR) в одном проекте.

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

Элемент HTML imgбыл расширен для современной сети с помощью компонента «next/image» в Next.js. Вы можете получить хорошие показатели Core Web Vitals с помощью ряда встроенных улучшений производительности. Эти рейтинги являются важным показателем того, насколько хорошо пользователи реагируют на ваш веб-сайт, и учитываются Google при определении результатов поиска. Next.js автоматически рассчитает ширину и высоту изображения, используя импортированный файл в качестве основы. Пока ваше изображение загружается, эти настройки используются для остановки кумулятивных сдвигов макета .

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt= "Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

Автоматическое разделение кода

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

Существует одно примечательное исключение. Если импорт используется как минимум на 50% страниц сайта, он перемещается в основной пакет JavaScript.

Поддержка машинописного текста

Next.js имеет сильную поддержку TypeScript, потому что он написан на TypeScript. Благодаря нулевой настройке конфигурации и встроенным типам для страниц, API и т. д. Next.js предлагает интегрированный интерфейс TypeScript. Используя флаг «—ts, —typescript», вы можете использовать «create-next-app» для создания проекта TypeScript следующим образом:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

Проверка типов — стандартная функция «следующей сборки» Next.js. Чтобы узнать больше о машинописном тексте Next.js, нажмите здесь .

Маршрут API

Одной из революционных функций Next.js является универсальный подход к созданию полнофункциональных приложений React, позволяющий писать серверный код с использованием маршрутов API. Маршруты API Next.js предлагают способ создания вашего API.

Любой файл в папке «pages/api» сопоставляется с «/api/*» и обрабатывается скорее как конечная точка API, чем как «страница». Они не увеличивают размер вашего пакета на стороне клиента, поскольку являются пакетами только на стороне сервера.

Плюсы Next.js

Next.js часто используют крупнейшие и наиболее известные компании по всему миру. Он считается одним из фреймворков React с одним из самых высоких темпов роста и отлично подходит для использования со статическими сайтами. Преимущества использования Next заключаются в следующем:

• Для SEO Next.js является фантастическим. Он позволяет создавать веб-приложения со всеми необходимыми возможностями и интерактивностью, сохраняя при этом SEO-преимущества статической текстовой веб-страницы. Благодаря этому вы можете создать мощное присутствие в Интернете.
• Пользовательский опыт с Next.js превосходен. Вы не обязаны придерживаться каких-либо плагинов, шаблонов или других ограничений, налагаемых платформами электронной коммерции или CMS. У вас есть полная свобода изменять интерфейс так, как вы считаете нужным, и вы также можете творчески редактировать вещи без каких-либо ограничений.
• Производительность вашего веб-сайта или веб-приложения повышается с помощью Next.js. Хотя одновременная загрузка и запуск значительного объема кода JavaScript не приводит к остановке браузера, это может значительно улучшить такие показатели, как общее время блокировки (TBT). Всегда стремитесь к времени менее 300 мс. Чем быстрее растет ваш TBT, тем быстрее люди найдут ценность в вашем онлайн-приложении.
• Ваш веб-сайт или приложение будут в безопасности, если вы используете Next.js. Статические веб-сайты Next.js не имеют прямого подключения к базе данных, зависимостям, пользовательским данным или любым другим личным данным, потому что у них нет ничего из этого. Таким образом гарантируется безопасность данных.
• Webpack, компонент Next.js, предоставляет готовую помощь для компиляции ресурсов, горячей перезагрузки и разделения кода, что может ускорить разработку. По мере того, как React и Next.js становятся все более популярными, растет и сообщество разработчиков, которые их используют. Будет просто найти компанию или независимого подрядчика для внесения изменений. Наилучшую поддержку для компиляции ресурсов, разделения кода и горячей перезагрузки разработчики постоянно находят в Next.js.

Минусы Next.js

Хотя Next.js предлагает фантастический опыт разработки, всегда есть ограничения. Команда Next.js усердно работает над устранением проблем. Таким образом, ограничений с каждым днем ​​становится все меньше и меньше. Ниже приведены некоторые ограничения на использование Next.js:

• Для Next.js существует слабая экосистема плагинов. Простые в адаптации плагины ограничены в своем использовании.
• Внутреннего менеджера состояния также нет. Это означает, что вы должны включить в свое приложение Redux, MobX или другой менеджер состояния, если он вам нужен.
• У универсальности, которую предлагает Next.js, есть недостаток — постоянное обслуживание. Вам потребуется целеустремленный человек с необходимыми знаниями для успешного внедрения любых запрошенных корректировок.
• Next.js может использовать только один маршрутизатор. Другими словами, метод, использующий маршруты, нельзя изменить. Если в вашем проекте используются динамические маршруты, вы должны использовать сервер Node.js.

Сравнение Next.js и NuxtJS

Next.js — это первый выбор для разработчиков при создании сложных веб-приложений из-за его способности быстро создавать сложные веб-сайты. Разработчики Next.js продвигают его как однокомандную цепочку инструментов без настройки для проектов React. Это платформа React, которая прозрачно управляет рендерингом на стороне сервера для вас и предлагает общую архитектуру, упрощающую создание интерфейсного приложения React. Когда Next.js замечает изменение, сохраненное на диске, страница перезагружается. Он хорошо работает с другими компонентами JavaScript, Node и React. Перед передачей HTML клиенту вы можете визуализировать компоненты React на стороне сервера с помощью Next.js.

Популярный фреймворк Vue.js — NuxtJS. Это упрощает создание одностраничных или глобальных программ Vue.js для Интернета. Фреймворк NuxtJS стремится быть достаточно универсальным, чтобы служить основной базой проектов для веб-разработчиков. Благодаря NuxtJS вы можете сконцентрироваться на логике своего веб-приложения, разделяя один и тот же код между сервером и клиентом. NuxtJS позволяет вам получить доступ к многочисленным свойствам ваших компонентов, таким как «isClient» и «isServer», поэтому вы можете быстро определить, рендерите ли вы что-то на сервере или на клиенте. Это лишь начало обширного списка преимуществ NuxtJS для разработки универсальных веб-приложений.

Next.js лучше, чем NuxtJS?

Высшей структуры нет. Это зависит от того, что вы считаете эффективным, и от его различных качеств.

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

С другой стороны, NuxtJS — это фреймворк Vue, который помогает упростить и ускорить процесс веб-разработки.

Лучшие варианты использования NuxtJS

NuxtJS был создан для решения проблем, связанных с созданием одностраничных приложений (SPA), которые находятся в центре внимания многих современных фреймворков JavaScript. Принуждение к соглашению по стратегии конфигурации — наиболее характерное применение NuxtJS. Вам не нужно создавать много файлов конфигурации при использовании NuxtJS. Вместо этого вы настраиваете структуру папок, чтобы NuxtJS мог ее понять, а затем формировать окончательный пакет приложения после этого.

Высокооптимизированный пакет вашего приложения создается с помощью NuxtJS. Примером использования являются сайты Storyblok и Pentest Tools .

Лучшие варианты использования Next.js

Одной из лучших особенностей Next.js является то, что вы можете создавать статические страницы, которые, тем не менее, функционируют как динамические. Это идеально, когда: (а) содержимое будет регулярно меняться или должно быть постоянно актуальным. (b) Возможности публикации в реальном времени требуются, например, для многопользовательских сайтов. (c) Восстановление всего веб-сайта займет много времени (и денег) с использованием SSG и не подвергается риску. Хорошим примером является значительный веб-сайт электронной коммерции.

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

Некоторыми очень хорошими примерами являются сайты Hulu и Typeform .

Вывод

Преимущества и недостатки фреймворков Next.js и NuxtJS могут быть вам ясны после прочтения всего текста. Мы не можем не подчеркнуть, насколько широко распространен Javascript и как почти все современные мобильные и онлайн-приложения создаются с его использованием, что делает необходимым использование таких фреймворков, как Next.js и NuxtJS. Следовательно, нужно выбрать и использовать наиболее эффективную структуру для своих нужд. Я надеюсь, что этот пост поможет вам сделать выбор между Next.js и NuxtJS для вашего будущего проекта.

Ссылка: https://blog.openreplay.com/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses

#nuxtjs #nextjs #javascript

What is GEEK

Buddha Community

Nextjs против Nuxtjs: какой из них использовать?

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

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

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

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

Что такое NuxtJS?

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

Основой вашего проекта Vue.js является NuxtJS, который обеспечивает структуру и гибкость, поэтому вы можете уверенно его создавать. Сосредоточив внимание на предоставлении фантастических возможностей для разработчиков, NuxtJS стремится сделать веб-разработку простой и эффективной. С его помощью вы можете сосредоточиться на том, что важно — на создании приложения.

Новые функции публичной бета-версии NuxtJS 3, выпущенной в октябре, дали разработчикам больше времени, чтобы сосредоточиться на создании замечательных пользовательских интерфейсов. В результате рост сообщества NuxtJS резко возрос.

Экосистема модулей

Чтобы расширить базу фреймворка и упростить интеграцию, NuxtJS предлагает модульную систему. Модульная система более высокого порядка, предлагаемая NuxtJS, позволяет расширять ядро. Когда NuxtJS загружается, модули — это функции, которые вызываются по порядку. Если для него существует модуль NuxtJS, вам не нужно создавать его с нуля или поддерживать шаблон. «Nuxt.config» можно использовать для добавления модулей NuxtJS.

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

Это одна из причин, по которой NuxtJS предлагает модульную архитектуру, позволяющую расширять ядро. В дополнение ко многим другим полезным действиям они могут настраивать загрузчики веб-пакетов, устанавливать библиотеки CSS и изменять файлы шаблонов. Распространение модулей NuxtJS в пакетах npm — лучшая часть. Чтобы узнать больше о модулях NuxtJS, нажмите здесь и здесь .

Автоимпорт компонентов

Чтобы выполнить выборку данных, получить доступ к контексту приложения и конфигурации среды выполнения, управлять состоянием или создавать компоненты и плагины, NuxtJS автоматически импортирует функции и компонуемые объекты. NuxtJS немедленно импортирует любые компоненты в вашем каталоге components/ (вместе с компонентами, зарегистрированными любыми модулями, которые вы можете использовать).

| components/
--| TheHeader.vue
--| TheFooter.vue

layouts/default.vue:

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

В NuxtJS 3 мы получаем новую дополнительную папку с именем «composables/», которая будет автоматически импортировать написанную вами функцию Composition API. Компоненты автоматически импортируются в папку «components/», а маршрутизация на основе файлов — в папку «pages/». Нажмите здесь, чтобы узнать больше об автоимпорте NuxtJS.

Режимы рендеринга

Рендеринг — это процесс, посредством которого браузер и сервер переводят компоненты Vue.js в элементы HTML, читая код JavaScript.

NuxtJS поддерживает как клиентскую, так и глобальную визуализацию. Сложный динамический пользовательский интерфейс (UI) с плавным переходом между страницами можно создать с помощью методов рендеринга на стороне клиента. Сохраняя преимущества рендеринга на стороне клиента, универсальный рендеринг позволяет приложениям NuxtJS предлагать быструю загрузку страниц. Кроме того, поскольку содержимое уже включено в текст HTML, поисковые роботы могут индексировать его без дополнительных усилий.

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

Приложения JavaScript часто сталкиваются с трудностями при работе с SEO и метатегами. Это связано с тем, что страница изначально пуста, когда мы полагаемся на JavaScript для получения наших данных, таких как контент и метаописания. Кроме того, нет материалов для индексации или обработки перед выполнением JavaScript. Кроме того, многие поисковые роботы не поддерживают JavaScript. В результате, если вы поделитесь статьей из своего JavaScript-блога на Facebook, она может появиться с заголовком «undefined», а не с оригинальным заголовком статьи. Рендеринг на стороне сервера (SSR) может спасти нас в этой ситуации. Целью SSR является размещение сервера, который будет генерировать HTML-ответ и предоставлять его сканеру или клиенту. В результате в упомянутом выше примере сервер обработает вызов API, после чего будут установлены метаданные и будет доставлена ​​финальная страница.

С NuxtJS 3 теперь возможен гибридный рендеринг. Это позволит вам использовать такие функции, как добавочная статическая генерация, которая сочетает в себе рендеринг на стороне сервера (SSR) и генерацию статического сайта (SSG), а также другие сложные режимы. Режимы рендеринга также можно найти здесь и здесь .

Маршрутизация файловой системы

Для каждой страницы NuxtJS предлагает автоматическую маршрутизацию и разделение кода. NuxtJS автоматически создает конфигурацию Vue-маршрутизатора на основе дерева файлов Vue внутри каталога pages. Вам не нужно выполнять какую-либо дополнительную настройку после создания файла .vue в каталоге ваших страниц, чтобы заставить работать базовую маршрутизацию.

Это файловое дерево:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

автоматически сгенерирует:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

Используя Vue Router в качестве серверной части, можно использовать маршрутизацию на основе файлов для построения маршрутов в вашем онлайн-приложении. Если вы используете только app.vue, vue-router не будет включен, потому что этот каталог является необязательным, что уменьшает размер пакета вашего приложения. Во всем вашем приложении NuxtJS предлагает настраиваемую платформу промежуточного программного обеспечения маршрута, которая идеально подходит для извлечения кода, который вы хотите выполнить, прежде чем перейти к определенному маршруту.

Запустите в компоненте Vue вашего приложения NuxtJS промежуточное ПО маршрута. Несмотря на схожее имя, они не совпадают с промежуточным программным обеспечением сервера, которое работает на сервере Nitro вашего приложения. Подробнее о маршрутизации файлов NuxtJS можно узнать здесь .

Нулевая конфигурация

Конфигурация NuxtJS по умолчанию охватывает большинство вариантов использования. Файл nuxt.config.js позволяет заменить конфигурацию по умолчанию. Вы можете использовать NuxtJS, чтобы указать глобальные файлы CSS, модули и библиотеки, которые вы хотите использовать (включены на каждую страницу). Добавьте эти ресурсы CSS в nuxt.config.js:

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss'
  ]
}

NuxtJS автоматически определит тип файла на основе его расширения и использует соответствующий загрузчик препроцессора для веб-пакета. Вы все равно должны установить необходимый загрузчик, если хотите их использовать. Вы можете опустить расширение файла для файлов, указанных в массиве CSS в вашем файле конфигурации NuxtJS, таких как CSS, SCSS, Postcss, Less, Stylus и т. д.

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

NuxtJS берет на себя все остальное, пока вы работаете непосредственно над кодом своего приложения. Вот дополнительная информация о конфигурации NuxtJS.

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

Вы можете использовать NuxtJS для получения контента из любого источника в ваши компоненты Vue с поддержкой SSR. NuxtJS предлагает метод Fetch и метод asyncData в качестве двух (2) методов для получения данных из API.

После того, как экземпляр компонента установлен, Fetch представляет собой ловушку, вызываемую как на клиенте во время навигации, так и во время рендеринга на стороне сервера. Хук fetch должен (явно или неявно через async/await) возвращать обещание, которое будет выполнено: до того, как первая страница будет отображена на сервере, и после того, как компонент будет смонтирован на клиенте.

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

Другой хук для глобального извлечения данных — это asyncData . В отличие от Fetch, который требует выполнения действий Vuex или изменения свойств экземпляра компонента для сохранения асинхронного состояния, asyncData просто объединяет возвращаемое значение с локальным состоянием вашего компонента. Используя библиотеку @nuxt/http, рассмотрим следующий пример:

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

N/B: asyncData доступен только для страниц; хук не имеет к нему доступа. Более подробную информацию о выборке данных можно найти в этом руководстве .

SEO-оптимизация

С NuxtJS у вас есть три варианта включения метаданных в ваше приложение:

1. Глобальное использование nuxt.config.js
2. Локальное использование головы как объекта
3. Локальное использование головы в качестве функции для извлечения данных и вычисляемых свойств

NuxtJS предлагает управление метатегами и более быстрое получение контента для отличной индексации. Вот еще руководство по метатегам и SEO.

Плюсы NuxtJS

NuxtJS является расширяемым и позволяет легко интегрировать ваши любимые конечные точки REST или GraphQL, CMS, CSS-фреймворки и многое другое благодаря надежной экосистеме модулей и движку хуков. Ниже приведены некоторые из многих преимуществ использования NuxtJS:

• Вы можете развернуть полнофункциональные приложения Vue, которые будут быстрыми и оптимизированными для SEO, с помощью NuxtJS, который также предоставляет убедительное решение и отличную экосистему.
• Благодаря инновационному подходу NuxtJS ускоряет создание и функциональность вашего будущего веб-сайта или приложения, объединяя превосходный опыт разработчика с многоразовыми, полностью интегрированными функциями.
• Простота NuxtJS и постепенная кривая обучения делают его фантастическим вариантом.
• Между рендерингом на стороне сервера (SSR) и созданием статического сайта NuxtJS обеспечивает универсальность (SSG).
• В дополнение к продуманной настройке и структуре, NuxtJS предлагает автоматическое разделение кода, эффективную командную работу, надежную структуру каталогов и соглашения.

Минусы NuxtJS

Каждое преимущество имеет соответствующий недостаток. Недостатки использования NuxtJS перечислены ниже:

• Для NuxtJS доступно меньше ресурсов и, возможно, менее подробная документация по продукту из-за небольшого сообщества.
• На вашем сервере высокий трафик может быть особенно обременительным.
• Только определенные хуки позволяют вам взаимодействовать и запрашивать DOM.
• Получить настроенные библиотеки для работы с NuxtJS может быть непросто.
• Несомненно, есть популярные, надежные плагины или отсутствующие элементы, такие как Календарь, Карты Google, векторные карты и т. д. Хотя есть дополнительные компоненты, они, как правило, плохо поддерживаются.

Что такое Next.js?

Next.js — лучший инструмент для любого разработчика React, позволяющий изучать и улучшать свои проекты. Это среда веб-разработки с открытым исходным кодом, построенная на основе Node.js и облегчающая рендеринг на стороне сервера и развертывание статических веб-сайтов для веб-приложений на основе React.

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

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

Маршрутизация файловой системы

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

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

'pages/index.js' → '/'
'pages/blog/index.js' → '/blog'

Маршрутизатор совместим с вложенными файлами в маршруте Nested, и структура вложенных папок по-прежнему будет автоматически передавать файлы аналогичным образом.

'pages/blog/first-post.js' → '/blog/first-post'
'pages/dashboard/settings/username.js' → '/dashboard/settings/username'

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

'pages/blog/[slug].js' → '/blog/:slug' ('/blog/hello-world')
'pages/[username]/settings.js' → '/:username/settings' ('/foo/settings')
'pages/post/[...all].js' → '/post/*' ('/post/2020/id/title')

Ознакомьтесь с документацией по маршрутам , чтобы узнать больше о том, как они работают.

Рендеринг на стороне сервера

В зависимости от варианта использования вашего приложения выборка данных в Next.js позволяет отображать информацию различными способами. К ним относятся предварительный рендеринг с использованием статической генерации сайта (SSG) или рендеринга на стороне сервера (SSR), а также динамическое создание или обновление контента с использованием добавочной статической регенерации. Next.js будет предварительно отображать страницу, используя информацию, предоставленную функцией getServerSideProps (рендеринг на стороне сервера), если вы экспортируете ее со страницы.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Каждый 'prop' будет отправлен компоненту страницы независимо от метода рендеринга, и первый HTML-код может быть прочитан на стороне клиента. Это необходимо для правильного увлажнения страницы.

Генерация статического сайта

Список путей, которые должны создаваться статически, должен быть определен, если страница использует «getStaticProps» и содержит динамические маршруты. Любые пути, предоставленные функцией getStaticPaths (генерация статического сайта), экспортированные со страницы, использующей динамические маршруты, будут статически предварительно обработаны Next.js.

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

Справочник по API охватывает все параметры и свойства, которые можно использовать с getStaticPaths. Next.js выполняет предварительную визуализацию страниц во время сборки (SSG) или во время запроса (SSR) в одном проекте.

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

Элемент HTML imgбыл расширен для современной сети с помощью компонента «next/image» в Next.js. Вы можете получить хорошие показатели Core Web Vitals с помощью ряда встроенных улучшений производительности. Эти рейтинги являются важным показателем того, насколько хорошо пользователи реагируют на ваш веб-сайт, и учитываются Google при определении результатов поиска. Next.js автоматически рассчитает ширину и высоту изображения, используя импортированный файл в качестве основы. Пока ваше изображение загружается, эти настройки используются для остановки кумулятивных сдвигов макета .

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt= "Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

Автоматическое разделение кода

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

Существует одно примечательное исключение. Если импорт используется как минимум на 50% страниц сайта, он перемещается в основной пакет JavaScript.

Поддержка машинописного текста

Next.js имеет сильную поддержку TypeScript, потому что он написан на TypeScript. Благодаря нулевой настройке конфигурации и встроенным типам для страниц, API и т. д. Next.js предлагает интегрированный интерфейс TypeScript. Используя флаг «—ts, —typescript», вы можете использовать «create-next-app» для создания проекта TypeScript следующим образом:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

Проверка типов — стандартная функция «следующей сборки» Next.js. Чтобы узнать больше о машинописном тексте Next.js, нажмите здесь .

Маршрут API

Одной из революционных функций Next.js является универсальный подход к созданию полнофункциональных приложений React, позволяющий писать серверный код с использованием маршрутов API. Маршруты API Next.js предлагают способ создания вашего API.

Любой файл в папке «pages/api» сопоставляется с «/api/*» и обрабатывается скорее как конечная точка API, чем как «страница». Они не увеличивают размер вашего пакета на стороне клиента, поскольку являются пакетами только на стороне сервера.

Плюсы Next.js

Next.js часто используют крупнейшие и наиболее известные компании по всему миру. Он считается одним из фреймворков React с одним из самых высоких темпов роста и отлично подходит для использования со статическими сайтами. Преимущества использования Next заключаются в следующем:

• Для SEO Next.js является фантастическим. Он позволяет создавать веб-приложения со всеми необходимыми возможностями и интерактивностью, сохраняя при этом SEO-преимущества статической текстовой веб-страницы. Благодаря этому вы можете создать мощное присутствие в Интернете.
• Пользовательский опыт с Next.js превосходен. Вы не обязаны придерживаться каких-либо плагинов, шаблонов или других ограничений, налагаемых платформами электронной коммерции или CMS. У вас есть полная свобода изменять интерфейс так, как вы считаете нужным, и вы также можете творчески редактировать вещи без каких-либо ограничений.
• Производительность вашего веб-сайта или веб-приложения повышается с помощью Next.js. Хотя одновременная загрузка и запуск значительного объема кода JavaScript не приводит к остановке браузера, это может значительно улучшить такие показатели, как общее время блокировки (TBT). Всегда стремитесь к времени менее 300 мс. Чем быстрее растет ваш TBT, тем быстрее люди найдут ценность в вашем онлайн-приложении.
• Ваш веб-сайт или приложение будут в безопасности, если вы используете Next.js. Статические веб-сайты Next.js не имеют прямого подключения к базе данных, зависимостям, пользовательским данным или любым другим личным данным, потому что у них нет ничего из этого. Таким образом гарантируется безопасность данных.
• Webpack, компонент Next.js, предоставляет готовую помощь для компиляции ресурсов, горячей перезагрузки и разделения кода, что может ускорить разработку. По мере того, как React и Next.js становятся все более популярными, растет и сообщество разработчиков, которые их используют. Будет просто найти компанию или независимого подрядчика для внесения изменений. Наилучшую поддержку для компиляции ресурсов, разделения кода и горячей перезагрузки разработчики постоянно находят в Next.js.

Минусы Next.js

Хотя Next.js предлагает фантастический опыт разработки, всегда есть ограничения. Команда Next.js усердно работает над устранением проблем. Таким образом, ограничений с каждым днем ​​становится все меньше и меньше. Ниже приведены некоторые ограничения на использование Next.js:

• Для Next.js существует слабая экосистема плагинов. Простые в адаптации плагины ограничены в своем использовании.
• Внутреннего менеджера состояния также нет. Это означает, что вы должны включить в свое приложение Redux, MobX или другой менеджер состояния, если он вам нужен.
• У универсальности, которую предлагает Next.js, есть недостаток — постоянное обслуживание. Вам потребуется целеустремленный человек с необходимыми знаниями для успешного внедрения любых запрошенных корректировок.
• Next.js может использовать только один маршрутизатор. Другими словами, метод, использующий маршруты, нельзя изменить. Если в вашем проекте используются динамические маршруты, вы должны использовать сервер Node.js.

Сравнение Next.js и NuxtJS

Next.js — это первый выбор для разработчиков при создании сложных веб-приложений из-за его способности быстро создавать сложные веб-сайты. Разработчики Next.js продвигают его как однокомандную цепочку инструментов без настройки для проектов React. Это платформа React, которая прозрачно управляет рендерингом на стороне сервера для вас и предлагает общую архитектуру, упрощающую создание интерфейсного приложения React. Когда Next.js замечает изменение, сохраненное на диске, страница перезагружается. Он хорошо работает с другими компонентами JavaScript, Node и React. Перед передачей HTML клиенту вы можете визуализировать компоненты React на стороне сервера с помощью Next.js.

Популярный фреймворк Vue.js — NuxtJS. Это упрощает создание одностраничных или глобальных программ Vue.js для Интернета. Фреймворк NuxtJS стремится быть достаточно универсальным, чтобы служить основной базой проектов для веб-разработчиков. Благодаря NuxtJS вы можете сконцентрироваться на логике своего веб-приложения, разделяя один и тот же код между сервером и клиентом. NuxtJS позволяет вам получить доступ к многочисленным свойствам ваших компонентов, таким как «isClient» и «isServer», поэтому вы можете быстро определить, рендерите ли вы что-то на сервере или на клиенте. Это лишь начало обширного списка преимуществ NuxtJS для разработки универсальных веб-приложений.

Next.js лучше, чем NuxtJS?

Высшей структуры нет. Это зависит от того, что вы считаете эффективным, и от его различных качеств.

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

С другой стороны, NuxtJS — это фреймворк Vue, который помогает упростить и ускорить процесс веб-разработки.

Лучшие варианты использования NuxtJS

NuxtJS был создан для решения проблем, связанных с созданием одностраничных приложений (SPA), которые находятся в центре внимания многих современных фреймворков JavaScript. Принуждение к соглашению по стратегии конфигурации — наиболее характерное применение NuxtJS. Вам не нужно создавать много файлов конфигурации при использовании NuxtJS. Вместо этого вы настраиваете структуру папок, чтобы NuxtJS мог ее понять, а затем формировать окончательный пакет приложения после этого.

Высокооптимизированный пакет вашего приложения создается с помощью NuxtJS. Примером использования являются сайты Storyblok и Pentest Tools .

Лучшие варианты использования Next.js

Одной из лучших особенностей Next.js является то, что вы можете создавать статические страницы, которые, тем не менее, функционируют как динамические. Это идеально, когда: (а) содержимое будет регулярно меняться или должно быть постоянно актуальным. (b) Возможности публикации в реальном времени требуются, например, для многопользовательских сайтов. (c) Восстановление всего веб-сайта займет много времени (и денег) с использованием SSG и не подвергается риску. Хорошим примером является значительный веб-сайт электронной коммерции.

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

Некоторыми очень хорошими примерами являются сайты Hulu и Typeform .

Вывод

Преимущества и недостатки фреймворков Next.js и NuxtJS могут быть вам ясны после прочтения всего текста. Мы не можем не подчеркнуть, насколько широко распространен Javascript и как почти все современные мобильные и онлайн-приложения создаются с его использованием, что делает необходимым использование таких фреймворков, как Next.js и NuxtJS. Следовательно, нужно выбрать и использовать наиболее эффективную структуру для своих нужд. Я надеюсь, что этот пост поможет вам сделать выбор между Next.js и NuxtJS для вашего будущего проекта.

Ссылка: https://blog.openreplay.com/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses

#nuxtjs #nextjs #javascript

Implement a Dynamic Breadcrumb in React/NextJS

 Breadcrumbs are a website navigation tool that allows a user to see their current page's "stack" of how it is nested under any parent pages. Users can then jump back to a parent page by clicking the associated breadcrumb link. These "Crumbs" increase the User Experience of the application, making it easier for the users to navigate nested pages efficiently and effectively.

 

Breadcrumbs are popular enough that if you are building a web dashboard or application, you may have considered adding them. Generating these breadcrumb links efficiently and with the appropriate context is key to an improved user experience.

Let's build a smart NextBreadcrumbs React component that will parse the current route and build a dynamic breadcrumbs display that can handle both static & dynamic routes efficiently.

My projects usually revolve around Nextjs and MUI (formerly Material-UI) so that is the angle that I am going to approach this problem from, although the solution should work for any Nextjs-related application.

#Static Route Breadcrumbs

To start, our NextBreadcrumbs component will only handle static routes, meaning that our project has only static pages defined in the pages directory.

The following are examples of static routes because they do not contain [s and ]s in the route names, meaning the directory structure lines up 1:1 exactly with the expected URLs that they serve.

• pages/index.js --> /
• pages/about.js --> /about
• pages/my/super/nested/route.js --> /my/super/nested/route

The solution will be extended to handle dynamic routes later.

#Defining the Basic Component

We can start with the basic component that uses the MUI Breadcrumbs component as a baseline.

import Breadcrumbs from '@mui/material/Breadcrumbs';
import * as React from 'react';

export default function NextBreadcrumbs() {
  return (
    <Breadcrumbs aria-label="breadcrumb" />
  );
}

The above creates the basic structure of the NextBreadcrumbs React component, imports the correct dependencies, and renders an empty Breadcrumbs MUI component.

We can then add in the next/router hooks, which will allow us to build the breadcrumbs from the current route.

We also create a Crumb component that will be used to render each link. This is a pretty dumb component for now, except that it will render normal text instead of a link for the last breadcrumb.

In a situation like /settings/notifications, it would render as the following:

Home (/ link) > Settings (/settings link) > Notifications (no link)

This is because the user is already on the last breadcrumb's page, so there is no need to link out to the same page. All the other crumbs are rendered as links to be clicked.

import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import { useRouter } from 'next/router';
import React from 'react';


export default function NextBreadcrumbs() {
  // Gives us ability to load the current route details
  const router = useRouter();
  
  return (
    <Breadcrumbs aria-label="breadcrumb" />
  );
}


// Each individual "crumb" in the breadcrumbs list
function Crumb({ text, href, last=false }) {
  // The last crumb is rendered as normal text since we are already on the page
  if (last) {
  	return <Typography color="text.primary">{text}</Typography>
  }

  // All other crumbs will be rendered as links that can be visited 
  return (
    <Link underline="hover" color="inherit" href={href}>
      {text}
    </Link>
  );
}

With this layout, we can then dive back into the NextBreadcrumbs component to generate the breadcrumbs from the route. Some existing code will start to be omitted to keep the code pieces smaller. The full example is shown below.

We will generate a list of breadcrumb objects that contain the information to be rendered by each Crumb element. Each breadcrumb will be created by parsing the Nextjs router's asPath property, which is a string containing the route as shown in the browser URL bar.

We will strip any query parameters, such as ?query=value, from the URL to make the breadcrumb creation process more straightforward.

export default function NextBreadcrumbs() {
  // Gives us ability to load the current route details
  const router = useRouter();
  
  function generateBreadcrumbs() {
    // Remove any query parameters, as those aren't included in breadcrumbs
    const asPathWithoutQuery = router.asPath.split("?")[0];
	
	// Break down the path between "/"s, removing empty entities
	// Ex:"/my/nested/path" --> ["my", "nested", "path"]
	const asPathNestedRoutes = asPathWithoutQuery.split("/")
												 .filter(v => v.length > 0);
	
	// Iterate over the list of nested route parts and build
	// a "crumb" object for each one.
	const crumblist = asPathParts.map((subpath, idx) => {
	  // We can get the partial nested route for the crumb
	  // by joining together the path parts up to this point.
	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
	  // The title will just be the route string for now
	  const title = subpath;
  	  return { href, text }; 
    })
	
	// Add in a default "Home" crumb for the top-level
	return [{ href: "/", text: "Home" }, ...crumblist];
  }
  
  // Call the function to generate the breadcrumbs list
  const breadcrumbs = generateBreadcrumbs();
  
  return (
    <Breadcrumbs aria-label="breadcrumb" />
  );
}

With this list of breadcrumbs, we can now render them using the Breadcrumbs and Crumb components. As previously mentioned, only the return portion of our component is shown for brevity.

  // ...rest of NextBreadcrumbs component above...
  return (
    {/* The old breadcrumb ending with '/>' was converted into this */}
    <Breadcrumbs aria-label="breadcrumb">
	  {/*
	    Iterate through the crumbs, and render each individually.
		We "mark" the last crumb to not have a link.
      */}
	  {breadcrumbs.map((crumb, idx) => (
	    <Crumb {...crumb} key={idx} last={idx === breadcrumbs.length - 1} />
	  ))}
	</Breadcrumbs>
  );

This should start generating some very basic - but working - breadcrumbs on our site once rendered; /user/settings/notifications would render as

Home > user > settings > notifications

#Memoizing Generated Breadcrumbs

There is a quick improvement that we can make before going further though. Right now the breadcrumb list is recreated every time the component re-renders, so we can memoize the crumb list for a given route to save some performance. To accomplish this, we can wrap our generateBreadcrumbs function call in the useMemo React hook.

  const router = useRouter();
  
  // this is the same "generateBreadcrumbs" function, but placed
  // inside a "useMemo" call that is dependent on "router.asPath"
  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathWithoutQuery = router.asPath.split("?")[0];
	const asPathNestedRoutes = asPathWithoutQuery.split("/")
												 .filter(v => v.length > 0);

	const crumblist = asPathParts.map((subpath, idx) => {
	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return { href, text: subpath }; 
    })
	
	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath]);
  
  return // ...rest below...

#Improving Breadcrumb Text Display

Before we start incorporating dynamic routes, we can clean this current solution up more by including a nice way to change the text shown for each crumb generated.

Right now, if we have a path like /user/settings/notifications, then it will show:

Home > user > settings > notifications

which is not very appealing. We can provide a function to the NextBreadcrumbs component that will try to generate a more user-friendly name for each of these nested route crumbs.

const _defaultGetDefaultTextGenerator= path => path

export default function NextBreadcrumbs({ getDefaultTextGenerator=_defaultGetDefaultTextGenerator }) {
  const router = useRouter();

  // Two things of importance:
  // 1. The addition of getDefaultTextGenerator in the useMemo dependency list
  // 2. getDefaultTextGenerator is now being used for building the text property
  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathWithoutQuery = router.asPath.split("?")[0];
	const asPathNestedRoutes = asPathWithoutQuery.split("/")
												 .filter(v => v.length > 0);

	const crumblist = asPathParts.map((subpath, idx) => {
	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return { href, text: getDefaultTextGenerator(subpath, href) }; 
    })

	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath, getDefaultTextGenerator]);
  
  return ( // ...rest below

and then our parent component can have something like the following, to title-ize the subpaths, or maybe even replace them with a new string.

{/* Assume that `titleize` is written and works appropriately */}
<NextBreadcrumbs getDefaultTextGenerator={path => titleize(path)} />

This implementation would then result in the following breadcrumbs. The full code example at the bottom has more examples of this.

Home > User > Settings > Notifications

#Nextjs Dynamic Routes

Nextjs's router allows for including dynamic routes that uses Pattern Matching to allow for URLs to have slugs, UUIDs, and other dynamic values that will then be passed to your views.

For example, if your Nextjs application has a page component at pages/post/[post_id].js, then the routes /post/1 and /post/abc will match it.

For our breadcrumbs component, we would like to show the name of the associated post instead of just its UUID. This means that the component will need to dynamically look up the post data based on the nested URL route path and regenerate the text of the associated crumb.

Right now, if you visit /post/abc, you would see breadcrumbs that look like

post > abc

but if the post with UUID has a title of My First Post, then we want to change the breadcrumbs to say

post > My First Post

Let's dive into how that can happen using async functions.

#Nextjs Router: asPath vs pathname

The next/router router instance in our code has two useful properties for our NextBreadcrumbs component; asPath and pathname. The router asPath is the URL path as shown directly in the URL bar of the browser. The pathname is a more internal version of the URL that has the dynamic parts of the path replaced with their [parameter] components.

For example, consider the path /post/abc from above.

The asPath would be /post/abc as the URL is shown

The pathname would be /post/[post_id] as our pages directory dictates

We can use these two URL path variants to build a way to dynamically fetch information about the breadcrumb, so we can show more contextually appropriate information to the user.

There is a lot going on below, so please re-read it - and the helpful notes below it - a few times over if needed.

const _defaultGetTextGenerator = (param, query) => null;
const _defaultGetDefaultTextGenerator = path => path;

// Pulled out the path part breakdown because its
// going to be used by both `asPath` and `pathname`
const generatePathParts = pathStr => {
  const pathWithoutQuery = pathStr.split("?")[0];
  return pathWithoutQuery.split("/")
						 .filter(v => v.length > 0);
}

export default function NextBreadcrumbs({
  getTextGenerator=_defaultGetTextGenerator,
  getDefaultTextGenerator=_defaultGetDefaultTextGenerator
}) {
  const router = useRouter();

  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathNestedRoutes = generatePathParts(router.asPath);
	const pathnameNestedRoutes = generatePathParts(router.pathname);

	const crumblist = asPathParts.map((subpath, idx) => {
	  // Pull out and convert "[post_id]" into "post_id"
	  const param = pathnameNestedRoutes[idx].replace("[", "").replace("]", "");

	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return {
	  	href, textGenerator: getTextGenerator(param, router.query),
		text: getDefaultTextGenerator(subpath, href)
	  }; 
    })

	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath, router.pathname, router.query, getTextGenerator, getDefaultTextGenerator]);
  
  return ( // ...rest below

The asPath breakdown was moved to a generatePathParts function since the same logic is used for both router.asPath and router.pathname.

Determine the parameter that lines up with the dynamic route value, so abc would result in post_id.

The nested route parameter and all associated query values (router.query) are passed to a provided getTextGenerator which will return either a null value or a Promise response that should return the dynamic string to use in the associated breadcrumb.

The useMemo dependency array has more dependencies added; router.pathname, router.query, and getTextGenerator.

Finally, we need to update the Crumb component to use this textGenerator value if it is provided for the associated crumb object.

function Crumb({ text: defaultText, textGenerator, href, last=false }) {

  const [text, setText] = React.useState(defaultText);
  
  useEffect(async () => {
    // If `textGenerator` is nonexistent, then don't do anything
    if (!Boolean(textGenerator)) { return; }
	// Run the text generator and set the text again
    const finalText = await textGenerator();
    setText(finalText);
  }, [textGenerator]);

  if (last) {
  	return <Typography color="text.primary">{text}</Typography>
  }

  return (
    <Link underline="hover" color="inherit" href={href}>
      {text}
    </Link>
  );
}

 

The breadcrumbs can now handle both static routes and dynamic routes cleanly with the potential to display user-friendly values. While the above code is the business logic of the component, this can all be used with a parent component that looks like the final example below.

#Full Example

// NextBreadcrumbs.js

const _defaultGetTextGenerator = (param, query) => null;
const _defaultGetDefaultTextGenerator = path => path;

// Pulled out the path part breakdown because its
// going to be used by both `asPath` and `pathname`
const generatePathParts = pathStr => {
  const pathWithoutQuery = pathStr.split("?")[0];
  return pathWithoutQuery.split("/")
						 .filter(v => v.length > 0);
}

export default function NextBreadcrumbs({
  getTextGenerator=_defaultGetTextGenerator,
  getDefaultTextGenerator=_defaultGetDefaultTextGenerator
}) {
  const router = useRouter();

  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathNestedRoutes = generatePathParts(router.asPath);
	const pathnameNestedRoutes = generatePathParts(router.pathname);

	const crumblist = asPathParts.map((subpath, idx) => {
	  // Pull out and convert "[post_id]" into "post_id"
	  const param = pathnameNestedRoutes[idx].replace("[", "").replace("]", "");

	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return {
	  	href, textGenerator: getTextGenerator(param, router.query),
		text: getDefaultTextGenerator(subpath, href)
	  }; 
    })

	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath, router.pathname, router.query, getTextGenerator, getDefaultTextGenerator]);
  
  return (
    <Breadcrumbs aria-label="breadcrumb">
	  {breadcrumbs.map((crumb, idx) => (
	    <Crumb {...crumb} key={idx} last={idx === breadcrumbs.length - 1} />
	  ))}
	</Breadcrumbs>
  );
}


function Crumb({ text: defaultText, textGenerator, href, last=false }) {

  const [text, setText] = React.useState(defaultText);
  
  useEffect(async () => {
    // If `textGenerator` is nonexistent, then don't do anything
    if (!Boolean(textGenerator)) { return; }
	// Run the text generator and set the text again
    const finalText = await textGenerator();
    setText(finalText);
  }, [textGenerator]);

  if (last) {
  	return <Typography color="text.primary">{text}</Typography>
  }

  return (
    <Link underline="hover" color="inherit" href={href}>
      {text}
    </Link>
  );
}

and then an example of this NextBreadcrumbs being used can be seen below. Note that useCallback is used to create only one reference to each helper function which will prevent unnecessary re-renders of the breadcrumbs when/if the page layout component re-rendered. You could also move this out to the top-level scope of the file, but I don't like to pollute the global scope like that.

// MyPage.js (Parent Component)

import React from 'react';
import NextBreadcrumbs from "./NextBreadcrumbs";


function MyPageLayout() {

  // Either lookup a nice label for the subpath, or just titleize it
  const getDefaultTextGenerator = React.useCallback((subpath) => {
    return {
	  "post": "Posts",
	  "settings": "User Settings",
	}[subpath] || titleize(subpath);
  }, [])
  
  // Assuming `fetchAPI` loads data from the API and this will use the
  // parameter name to determine how to resolve the text. In the example,
  // we fetch the post from the API and return it's `title` property
  const getTextGenerator = React.useCallback((param, query) => {
    return {
	  "post_id": () => await fetchAPI(`/posts/${query.post_id}/`).title,
	}[param];
  }, []);

  return () {
    <div>
	  {/* ...Whatever else... */}
	  <NextBreadcrumbs
	    getDefaultTextGenerator={getDefaultTextGenerator}
		getTextGenerator={getTextGenerator}
	  />
	  {/* ...Whatever else... */}
	</div>
  }

}

---

This is one of my more in-depth and technical posts, so I hope you enjoyed it, and please comment or reach out so that I can ensure consistency and correctness. Hopefully, this post taught you a few strategies or concepts about Nextjs.

Source: https://hackernoon.com/implement-a-dynamic-breadcrumb-in-reactnextjs

#react #nextjs 

Implementar Una Ruta De Navegación Dinámica En React/NextJS

Las migas de pan son una herramienta de navegación del sitio web que permite a un usuario ver la "pila" de su página actual de cómo está anidada debajo de las páginas principales. Luego, los usuarios pueden regresar a una página principal haciendo clic en el enlace de ruta de navegación asociado. Estas "migajas" aumentan la experiencia del usuario de la aplicación, lo que facilita que los usuarios naveguen por páginas anidadas de manera eficiente y efectiva.

 

Las migas de pan son lo suficientemente populares como para que, si está creando un panel de control web o una aplicación, haya considerado agregarlas. Generar estos enlaces de migas de pan de manera eficiente y con el contexto apropiado es clave para una experiencia de usuario mejorada.

Construyamos un NextBreadcrumbs componente React inteligente que analice la ruta actual y construya una pantalla de migas de pan dinámicas que pueda manejar rutas tanto estáticas como dinámicas de manera eficiente.

Mis proyectos generalmente giran en torno a Nextjs y MUI (anteriormente Material-UI), por lo que ese es el ángulo desde el que abordaré este problema, aunque la solución debería funcionar para cualquier aplicación relacionada con Nextjs.

#Breadcrumbs de ruta estática

Para empezar, nuestro NextBreadcrumbscomponente solo manejará rutas estáticas, lo que significa que nuestro proyecto solo tiene páginas estáticas definidas en el pagesdirectorio.

Los siguientes son ejemplos de rutas estáticas porque no contienen [s y ]s en los nombres de ruta, lo que significa que la estructura del directorio se alinea 1:1 exactamente con las URL esperadas que sirven.

• pages/index.js-->/
• pages/about.js-->/about
• pages/my/super/nested/route.js-->/my/super/nested/route

La solución se ampliará para manejar rutas dinámicas más adelante.

#Definiendo el Componente Básico

Podemos comenzar con el componente básico que usa el componente MUIBreadcrumbs como línea de base.

import Breadcrumbs from '@mui/material/Breadcrumbs';
import * as React from 'react';

export default function NextBreadcrumbs() {
  return (
    <Breadcrumbs aria-label="breadcrumb" />
  );
}

Lo anterior crea la estructura básica del NextBreadcrumbscomponente React, importa las dependencias correctas y genera un Breadcrumbscomponente MUI vacío.

Luego podemos agregar los next/routerganchos, lo que nos permitirá construir las migas de pan a partir de la ruta actual.

También creamos un Crumbcomponente que se usará para representar cada enlace. Este es un componente bastante tonto por ahora, excepto que mostrará texto normal en lugar de un enlace para la última ruta de navegación.

En una situación como /settings/notifications, se representaría de la siguiente manera:

Home (/ link) > Settings (/settings link) > Notifications (no link)

Esto se debe a que el usuario ya está en la última página de migas de pan, por lo que no es necesario vincular a la misma página. Todas las demás migajas se representan como enlaces en los que se puede hacer clic.

import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import { useRouter } from 'next/router';
import React from 'react';


export default function NextBreadcrumbs() {
  // Gives us ability to load the current route details
  const router = useRouter();
  
  return (
    <Breadcrumbs aria-label="breadcrumb" />
  );
}


// Each individual "crumb" in the breadcrumbs list
function Crumb({ text, href, last=false }) {
  // The last crumb is rendered as normal text since we are already on the page
  if (last) {
  	return <Typography color="text.primary">{text}</Typography>
  }

  // All other crumbs will be rendered as links that can be visited 
  return (
    <Link underline="hover" color="inherit" href={href}>
      {text}
    </Link>
  );
}

Con este diseño, podemos volver a sumergirnos en el NextBreadcrumbscomponente para generar las migas de pan a partir de la ruta. Parte del código existente comenzará a omitirse para mantener las piezas de código más pequeñas. El ejemplo completo se muestra a continuación.

Generaremos una lista de objetos de migas de pan que contienen la información que cada Crumbelemento debe representar. Cada ruta de navegación se creará analizando la propiedad del enrutador NextjsasPath , que es una cadena que contiene la ruta como se muestra en la barra de URL del navegador.

Quitaremos todos los parámetros de consulta, como ?query=value, de la URL para que el proceso de creación de la ruta de navegación sea más sencillo.

export default function NextBreadcrumbs() {
  // Gives us ability to load the current route details
  const router = useRouter();
  
  function generateBreadcrumbs() {
    // Remove any query parameters, as those aren't included in breadcrumbs
    const asPathWithoutQuery = router.asPath.split("?")[0];
	
	// Break down the path between "/"s, removing empty entities
	// Ex:"/my/nested/path" --> ["my", "nested", "path"]
	const asPathNestedRoutes = asPathWithoutQuery.split("/")
												 .filter(v => v.length > 0);
	
	// Iterate over the list of nested route parts and build
	// a "crumb" object for each one.
	const crumblist = asPathParts.map((subpath, idx) => {
	  // We can get the partial nested route for the crumb
	  // by joining together the path parts up to this point.
	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
	  // The title will just be the route string for now
	  const title = subpath;
  	  return { href, text }; 
    })
	
	// Add in a default "Home" crumb for the top-level
	return [{ href: "/", text: "Home" }, ...crumblist];
  }
  
  // Call the function to generate the breadcrumbs list
  const breadcrumbs = generateBreadcrumbs();
  
  return (
    <Breadcrumbs aria-label="breadcrumb" />
  );
}

Con esta lista de migas de pan, ahora podemos renderizarlas usando los componentes Breadcrumbsy . CrumbComo se mencionó anteriormente, solo returnse muestra la parte de nuestro componente por brevedad.

  // ...rest of NextBreadcrumbs component above...
  return (
    {/* The old breadcrumb ending with '/>' was converted into this */}
    <Breadcrumbs aria-label="breadcrumb">
	  {/*
	    Iterate through the crumbs, and render each individually.
		We "mark" the last crumb to not have a link.
      */}
	  {breadcrumbs.map((crumb, idx) => (
	    <Crumb {...crumb} key={idx} last={idx === breadcrumbs.length - 1} />
	  ))}
	</Breadcrumbs>
  );

Esto debería comenzar a generar algunas migas de pan muy básicas, pero que funcionan, en nuestro sitio una vez renderizado; /user/settings/notificationsrepresentaría como

Home > user > settings > notifications

#Memoizing Breadcrumbs generados

Sin embargo, hay una mejora rápida que podemos hacer antes de seguir adelante. En este momento, la lista de migas de pan se recrea cada vez que el componente se vuelve a renderizar, por lo que podemos memorizar la lista de migas de una ruta determinada para ahorrar algo de rendimiento. Para lograr esto, podemos envolver nuestra generateBreadcrumbsllamada de función en el useMemogancho React.

  const router = useRouter();
  
  // this is the same "generateBreadcrumbs" function, but placed
  // inside a "useMemo" call that is dependent on "router.asPath"
  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathWithoutQuery = router.asPath.split("?")[0];
	const asPathNestedRoutes = asPathWithoutQuery.split("/")
												 .filter(v => v.length > 0);

	const crumblist = asPathParts.map((subpath, idx) => {
	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return { href, text: subpath }; 
    })
	
	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath]);
  
  return // ...rest below...

#Mejora de la visualización del texto de la ruta de navegación

Antes de comenzar a incorporar rutas dinámicas, podemos limpiar más esta solución actual al incluir una forma agradable de cambiar el texto que se muestra para cada migaja generada.

En este momento, si tenemos una ruta como /user/settings/notifications, se mostrará:

Home > user > settings > notifications

que no es muy atractivo. Podemos proporcionar una función al NextBreadcrumbscomponente que intentará generar un nombre más fácil de usar para cada uno de estos fragmentos de ruta anidados.

const _defaultGetDefaultTextGenerator= path => path

export default function NextBreadcrumbs({ getDefaultTextGenerator=_defaultGetDefaultTextGenerator }) {
  const router = useRouter();

  // Two things of importance:
  // 1. The addition of getDefaultTextGenerator in the useMemo dependency list
  // 2. getDefaultTextGenerator is now being used for building the text property
  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathWithoutQuery = router.asPath.split("?")[0];
	const asPathNestedRoutes = asPathWithoutQuery.split("/")
												 .filter(v => v.length > 0);

	const crumblist = asPathParts.map((subpath, idx) => {
	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return { href, text: getDefaultTextGenerator(subpath, href) }; 
    })

	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath, getDefaultTextGenerator]);
  
  return ( // ...rest below

y luego nuestro componente principal puede tener algo como lo siguiente, para titular las rutas secundarias, o tal vez incluso reemplazarlas con una nueva cadena.

{/* Assume that `titleize` is written and works appropriately */}
<NextBreadcrumbs getDefaultTextGenerator={path => titleize(path)} />

Esta implementación daría como resultado las siguientes migas de pan. El ejemplo de código completo en la parte inferior tiene más ejemplos de esto.

Home > User > Settings > Notifications

#Nextjs Rutas dinámicas

El enrutador de Nextjs permite incluir rutas dinámicas que usan Pattern Matching para permitir que las URL tengan slugs, UUID y otros valores dinámicos que luego se pasarán a sus vistas.

Por ejemplo, si su aplicación Nextjs tiene un componente de página en pages/post/[post_id].js, las rutas /post/1y /post/abccoincidirán con él.

Para nuestro componente de migas de pan, nos gustaría mostrar el nombre de la publicación asociada en lugar de solo su UUID. Esto significa que el componente deberá buscar dinámicamente los datos de la publicación en función de la ruta de la ruta URL anidada y regenerar el texto de la migaja asociada.

En este momento, si visitas /post/abc, verás migas de pan que parecen

post > abc

pero si la publicación con UUID tiene un título de My First Post, entonces queremos cambiar las migas de pan para decir

post > My First Post

Profundicemos en cómo puede suceder eso usando asyncfunciones.

Enrutador #Nextjs: asPathvspathname

La next/routerinstancia del enrutador en nuestro código tiene dos propiedades útiles para nuestro NextBreadcrumbscomponente; asPathy pathname. El enrutador asPathes la ruta URL como se muestra directamente en la barra de URL del navegador. Es pathnameuna versión más interna de la URL que tiene las partes dinámicas de la ruta reemplazadas por sus [parameter]componentes.

Por ejemplo, considere el camino /post/abcdesde arriba.

El asPathsería /post/abccomo se muestra la URL

El pathnamesería como dicta /post/[post_id]nuestro directoriopages

Podemos usar estas dos variantes de ruta de URL para crear una forma de obtener información dinámicamente sobre la ruta de navegación, de modo que podamos mostrar información contextualmente más apropiada para el usuario.

Están sucediendo muchas cosas a continuación, así que vuelva a leerlo, y las notas útiles a continuación, unas cuantas veces si es necesario.

const _defaultGetTextGenerator = (param, query) => null;
const _defaultGetDefaultTextGenerator = path => path;

// Pulled out the path part breakdown because its
// going to be used by both `asPath` and `pathname`
const generatePathParts = pathStr => {
  const pathWithoutQuery = pathStr.split("?")[0];
  return pathWithoutQuery.split("/")
						 .filter(v => v.length > 0);
}

export default function NextBreadcrumbs({
  getTextGenerator=_defaultGetTextGenerator,
  getDefaultTextGenerator=_defaultGetDefaultTextGenerator
}) {
  const router = useRouter();

  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathNestedRoutes = generatePathParts(router.asPath);
	const pathnameNestedRoutes = generatePathParts(router.pathname);

	const crumblist = asPathParts.map((subpath, idx) => {
	  // Pull out and convert "[post_id]" into "post_id"
	  const param = pathnameNestedRoutes[idx].replace("[", "").replace("]", "");

	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return {
	  	href, textGenerator: getTextGenerator(param, router.query),
		text: getDefaultTextGenerator(subpath, href)
	  }; 
    })

	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath, router.pathname, router.query, getTextGenerator, getDefaultTextGenerator]);
  
  return ( // ...rest below

El asPathdesglose se movió a una generatePathPartsfunción ya que se usa la misma lógica para ambos router.asPathy router.pathname.

Determine el paraméter que se alinea con el valor de la ruta dinámica, por lo que abcdaría como resultado post_id.

El éter de ruta anidado paramy todos los valores de consulta asociados ( router.query) se pasan a un proveedor getTextGeneratorque devolverá un nullvalor o una Promiserespuesta que debería devolver la cadena dinámica para usar en la ruta de navegación asociada.

La useMemomatriz de dependencia tiene más dependencias agregadas; router.pathname, router.queryy getTextGenerator.

Finalmente, necesitamos actualizar el Crumbcomponente para usar este textGeneratorvalor si se proporciona para el objeto migas asociado.

function Crumb({ text: defaultText, textGenerator, href, last=false }) {

  const [text, setText] = React.useState(defaultText);
  
  useEffect(async () => {
    // If `textGenerator` is nonexistent, then don't do anything
    if (!Boolean(textGenerator)) { return; }
	// Run the text generator and set the text again
    const finalText = await textGenerator();
    setText(finalText);
  }, [textGenerator]);

  if (last) {
  	return <Typography color="text.primary">{text}</Typography>
  }

  return (
    <Link underline="hover" color="inherit" href={href}>
      {text}
    </Link>
  );
}

 

Las migas de pan ahora pueden manejar rutas estáticas y rutas dinámicas de forma limpia con el potencial de mostrar valores fáciles de usar. Si bien el código anterior es la lógica comercial del componente, todo esto se puede usar con un componente principal que se parece al ejemplo final a continuación.

#Ejemplo Completo

// NextBreadcrumbs.js

const _defaultGetTextGenerator = (param, query) => null;
const _defaultGetDefaultTextGenerator = path => path;

// Pulled out the path part breakdown because its
// going to be used by both `asPath` and `pathname`
const generatePathParts = pathStr => {
  const pathWithoutQuery = pathStr.split("?")[0];
  return pathWithoutQuery.split("/")
						 .filter(v => v.length > 0);
}

export default function NextBreadcrumbs({
  getTextGenerator=_defaultGetTextGenerator,
  getDefaultTextGenerator=_defaultGetDefaultTextGenerator
}) {
  const router = useRouter();

  const breadcrumbs = React.useMemo(function generateBreadcrumbs() {
    const asPathNestedRoutes = generatePathParts(router.asPath);
	const pathnameNestedRoutes = generatePathParts(router.pathname);

	const crumblist = asPathParts.map((subpath, idx) => {
	  // Pull out and convert "[post_id]" into "post_id"
	  const param = pathnameNestedRoutes[idx].replace("[", "").replace("]", "");

	  const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/");
  	  return {
	  	href, textGenerator: getTextGenerator(param, router.query),
		text: getDefaultTextGenerator(subpath, href)
	  }; 
    })

	return [{ href: "/", text: "Home" }, ...crumblist];
  }, [router.asPath, router.pathname, router.query, getTextGenerator, getDefaultTextGenerator]);
  
  return (
    <Breadcrumbs aria-label="breadcrumb">
	  {breadcrumbs.map((crumb, idx) => (
	    <Crumb {...crumb} key={idx} last={idx === breadcrumbs.length - 1} />
	  ))}
	</Breadcrumbs>
  );
}


function Crumb({ text: defaultText, textGenerator, href, last=false }) {

  const [text, setText] = React.useState(defaultText);
  
  useEffect(async () => {
    // If `textGenerator` is nonexistent, then don't do anything
    if (!Boolean(textGenerator)) { return; }
	// Run the text generator and set the text again
    const finalText = await textGenerator();
    setText(finalText);
  }, [textGenerator]);

  if (last) {
  	return <Typography color="text.primary">{text}</Typography>
  }

  return (
    <Link underline="hover" color="inherit" href={href}>
      {text}
    </Link>
  );
}

y luego se puede ver un ejemplo de este NextBreadcrumbsuso a continuación. Tenga en cuenta que useCallbackse utiliza para crear solo una referencia a cada función auxiliar, lo que evitará que se vuelvan a procesar innecesariamente las migas de pan cuando/si el componente de diseño de página se vuelve a procesar. También puede mover esto al alcance de nivel superior del archivo, pero no me gusta contaminar el alcance global de esa manera.

// MyPage.js (Parent Component)

import React from 'react';
import NextBreadcrumbs from "./NextBreadcrumbs";


function MyPageLayout() {

  // Either lookup a nice label for the subpath, or just titleize it
  const getDefaultTextGenerator = React.useCallback((subpath) => {
    return {
	  "post": "Posts",
	  "settings": "User Settings",
	}[subpath] || titleize(subpath);
  }, [])
  
  // Assuming `fetchAPI` loads data from the API and this will use the
  // parameter name to determine how to resolve the text. In the example,
  // we fetch the post from the API and return it's `title` property
  const getTextGenerator = React.useCallback((param, query) => {
    return {
	  "post_id": () => await fetchAPI(`/posts/${query.post_id}/`).title,
	}[param];
  }, []);

  return () {
    <div>
	  {/* ...Whatever else... */}
	  <NextBreadcrumbs
	    getDefaultTextGenerator={getDefaultTextGenerator}
		getTextGenerator={getTextGenerator}
	  />
	  {/* ...Whatever else... */}
	</div>
  }

}

---

Esta es una de mis publicaciones más profundas y técnicas, así que espero que la hayas disfrutado, y por favor comenta o comunícate para que pueda garantizar la coherencia y la corrección. Con suerte, esta publicación le enseñó algunas estrategias o conceptos sobre Nextjs.

Fuente: https://hackernoon.com/implement-a-dynamic-breadcrumb-in-reactnextjs

#react #nextjs 

Nextjs 與 Nuxtjs：你應該使用哪一個？

隨著每年新框架的發布，要跟上 JavaScript 生態系統的發展速度是一項挑戰。了解不同的 JavaScript 框架至關重要，尤其是如果您是需要更直接方法的初學者。

如果沒有 JavaScript 框架，現代前端 Web 開發是不完整的，它為程序員提供了可靠的工具來創建可擴展的動態 Web 應用程序。今天，前端開發專業通常需要熟悉框架，因為許多現代企業都將它們用作基本的工具組件。我希望本文能為您在了解不同框架時提供一個很好的起點。

對於有抱負的前端開發人員來說，在學習框架時決定從哪裡開始可能具有挑戰性，因為有很多選擇，不斷創建新的，它們在很大程度上操作相似但執行某些任務不同，還有一些需要注意的事情在使用框架時。

在本文結束時，您將熟悉Next.js和NuxtJS的組件，並對這兩個框架有基本的了解並選擇適合您的。

什麼是 NuxtJS？

NuxtJS 是一個免費的開源 JavaScript 框架，用於構建 Vue.js 應用程序。它的目標是讓 Vue 開發人員從尖端技術中受益，使其變得簡單、快速和有條理。NuxtJS 受到 Next.js 的影響，Next.js 是一個基於 React.js 構建的框架，具有類似的目標。

您的 Vue.js 項目的基礎是 NuxtJS，它提供了結構和靈活性，因此您可以放心地構建它。NuxtJS 專注於提供出色的開發人員體驗，旨在使 Web 開髮變得簡單有效。你可以專注於重要的事情——創建你的應用程序——用它。

NuxtJS 3 公測版中的新功能於 10 月發布，讓開發人員有更多時間專注於創造出色的用戶體驗。結果，NuxtJS 社區的發展呈爆炸式增長。

模塊生態系統

為了擴展框架的基礎並簡化集成，NuxtJS 提供了一個模塊系統。NuxtJS 提供的高階模塊系統使內核得以擴展。NuxtJS 啟動時，模塊是按順序調用的函數。如果有一個現有的 NuxtJS 模塊，您不需要從頭開始創建它或維護樣板。“Nuxt.config”可用於添加 NuxtJS 模塊。

可以將插件和配置設置添加到 NuxtJS，但在各種項目中管理這些調整可能是費力、重複和耗時的。但是，如果 NuxtJS 要開箱即用地滿足每個項目的要求，那麼使用起來會過於復雜和具有挑戰性。

這是 NuxtJS 提供模塊化架構以支持核心擴展的原因之一。除了許多其他有用的活動外，他們還可以配置 webpack 加載器、安裝 CSS 庫和更改模板文件。NuxtJS 模塊在 npm 包中的分佈是最好的部分。要了解有關 NuxtJS 模塊的更多信息，請單擊此處和此處。

組件自動導入

為了執行數據獲取、訪問應用程序上下文和運行時配置、管理狀態或構建組件和插件，NuxtJS 自動導入函數和可組合項。您的 components/ 目錄中的任何組件都會立即由 NuxtJS 導入（以及您可能正在使用的任何模塊註冊的組件）。

| components/
--| TheHeader.vue
--| TheFooter.vue

layouts/default.vue：

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

在 NuxtJS 3 中，我們收到了一個名為“composables/”的新文件夾，它將自動導入您編寫的 Composition API 函數。組件在“components/”文件夾中自動導入，基於文件的路由在“pages/”文件夾中。單擊此處了解有關 NuxtJS 自動導入的更多信息。

渲染模式

渲染是瀏覽器和服務器通過讀取 JavaScript 代碼將 Vue.js 組件轉換為 HTML 元素的過程。

NuxtJS 支持客戶端和全局渲染。可以使用客戶端呈現技術創建具有無縫頁面轉換的複雜動態用戶界面 (UI)。在保持客戶端渲染優勢的同時，通用渲染使 NuxtJS 應用程序能夠提供快速的頁面加載。此外，由於內容已經包含在 HTML 文本中，爬蟲可以不費力地對其進行索引。

除了確定服務器應如何響應特定 URL 上的新請求外，混合渲染還允許每個路由使用各種緩存規則。

JavaScript 應用程序經常難以處理 SEO 和 Meta 標籤。這是因為當我們依賴 JavaScript 來獲取我們的數​​據（例如內容和元描述）時，頁面最初是空的。此外，在執行 JavaScript 之前沒有要索引或處理的材料。此外，很多爬蟲不支持 JavaScript。因此，如果您在 Facebook 上分享來自 JavaScript 博客的文章，則該文章的標題可能會顯示為“未定義”，而不是原始文章的標題。服務器端渲染（SSR）可以在這種情況下拯救我們。SSR 背後的目標是託管一個服務器，該服務器將生成 HTML 響應並將其提供給爬蟲或客戶端。因此，在上面提到的示例中，服務器將處理對 API 的調用，之後將設置元數據，並傳遞最終頁面。

使用 NuxtJS 3，現在可以進行混合渲染。這將使您可以使用增量靜態生成等功能，它結合了服務器端渲染 (SSR) 和靜態站點生成 (SSG) 以及其他復雜模式。渲染模式也可以在這里和這裡找到。

文件系統路由

對於每個頁面，NuxtJS 都提供自動路由和代碼拆分。NuxtJS 會根據 pages 目錄中的 Vue 文件樹自動創建 Vue-router 配置。在頁面目錄中創建 .vue 文件以使基本路由正常工作後，您無需進行任何其他配置。

這個文件樹：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

會自動生成：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

使用 Vue Router 作為後端，可以使用基於文件的路由在您的在線應用程序中構建路由。如果您只使用 app.vue，則不會包含 vue-router，因為此目錄是可選的，從而減少了應用程序的包大小。在整個應用程序中，NuxtJS 提供了一個定制的路由中間件框架，非常適合在轉到特定路由之前提取要執行的代碼。

在 NuxtJS 應用程序的 Vue 組件中運行的是路由中間件。儘管名稱相似，但它們與在應用的 Nitro 服務器上運行的服務器中間件不同。可以在此處找到有關 NuxtJS 文件路由的更多信息。

零配置

NuxtJS 的默認配置涵蓋了大多數用例。nuxt.config.js 文件允許替換默認配置。您可以使用 NuxtJS 指定要使用的全局 CSS 文件、模塊和庫（包含在每個頁面上）。將這些 CSS 資源添加到 nuxt.config.js：

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss'
  ]
}

NuxtJS 將根據其擴展名自動確定文件的類型，並為 webpack 使用適當的預處理器加載器。如果你想使用它們，你仍然必須安裝必要的加載器。您可以省略 NuxtJS 配置文件中 CSS 數組中指定的文件的文件擴展名，例如 CSS、SCSS、Postcss、Less、Stylus 等。

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

當您直接處理應用程序代碼時，NuxtJS 會處理其餘部分。這是有關 NuxtJS 配置的更多信息。

數據獲取

您可以使用 NuxtJS 將任何來源的內容獲取到支持 SSR 的 Vue 組件中。NuxtJS 提供Fetch 方法和asyncData 方法作為從 API 獲取數據的兩 (2) 種方法。

組件實例建立後，Fetch是一個鉤子，在導航和服務器端渲染期間都會在客戶端調用。fetch 鉤子應該（通過 async/await 顯式或隱式地）返回一個將被履行的承諾：在第一頁呈現在服務器上之前，以及在組件安裝到客戶端之後。

使用靜態託管時，僅在創建頁面時使用 fetch 掛鉤，然後緩存輸出以供客戶端使用。為您的組件提供一個名稱可能很重要，否則，提供一個特殊的 fetchKey 實現以防止緩存衝突。

全局數據檢索的另一個鉤子是asyncData。與 Fetch 不同，它要求您執行 Vuex 操作或更改組件實例的屬性以保留您的異步狀態，asyncData 只是將返回值與組件的本地狀態相結合。使用 @nuxt/http 庫，考慮以下示例：

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

N/B：asyncData只能由頁面訪問；鉤子無法訪問它。可以在本指南中找到有關數據獲取的更多信息。

SEO優化

NuxtJS 有三個選項可以在應用程序中包含元數據：

1. 全局使用 nuxt.config.js
2. 局部利用頭部作為對象
3. 在本地使用 head 作為函數來檢索數據和計算屬性

NuxtJS 提供元標記管理和更快的內容以實現出色的索引。這是有關元標記和 SEO 的更多指南。

NuxtJS 的優點

NuxtJS 是可擴展的，並且由於其強大的模塊生態系統和鉤子引擎，可以輕鬆集成您最喜歡的 REST 或 GraphQL 端點、CMS、CSS 框架等。以下是使用 NuxtJS 的眾多好處中的一部分：

• 您可以在 NuxtJS 的幫助下部署快速且對 SEO 友好的全棧 Vue 應用程序，它還提供了一個引人注目的解決方案和一個偉大的生態系統。
• 憑藉其創新方法，NuxtJS 將卓越的開發人員體驗與可重用、完全集成的功能融合在一起，從而加速您即將推出的網站或應用程序的創建和功能。
• NuxtJS 的簡單性和循序漸進的學習曲線使其成為一個絕佳的選擇。
• 在服務器端渲染 (SSR) 和靜態站點生成之間，NuxtJS 提供了多功能性 (SSG)。
• 除了自以為是的設置和結構外，NuxtJS 還提供自動代碼拆分、有效的團隊合作以及可靠的目錄佈局和約定。

NuxtJS 的缺點

每個好處都有一個匹配的缺點。下面列出了使用 NuxtJS 的缺點：

• 由於 NuxtJS 的社區較小，因此可用的資源較少，而且可能不太完整的產品文檔。
• 在您的服務器上，高流量可能特別費力。
• 只有特定的 Hooks 允許您與 DOM 交互和查詢。
• 讓自定義庫與 NuxtJS 一起使用可能具有挑戰性。
• 毫無疑問，有一些流行的、可靠的插件或缺少的元素，例如日曆、谷歌地圖、矢量地圖等。雖然還有額外的組件，但它們通常都沒有得到很好的維護。

Next.js 是什麼？

Next.js 是任何 React 開發人員學習和改進項目的最佳工具。它是一個構建在 Node.js 之上的開源 Web 開發框架，可促進服務器端渲染和為基於 React 的 Web 應用程序部署靜態網站。

Next.js 提供了最好的開發人員體驗，它具有生產所需的所有功能，包括 TypeScript 支持、智能捆綁、路由預取以及混合靜態和服務器渲染。無需配置。

Next.js 提供的幾項尖端功能將推動您的在線應用程序。Next.js 的特點如下：

文件系統路由

以頁面為基礎，Next.js 有一個基於文件系統的路由器。將文件添加到 pages 目錄時，路由將自動變為可用。您可以使用 pages 目錄中的文件定義大多數模式。

索引路由、嵌套路由和動態路由的分段在此處可用。當使用這個 Index 路由時，路由器會自動將名稱為 index 的文件定向到目錄的根目錄。

'pages/index.js' → '/'
'pages/blog/index.js' → '/blog'

路由器與嵌套路由中的嵌套文件兼容，嵌套文件夾結構仍會類似地自動傳輸文件。

'pages/blog/first-post.js' → '/blog/first-post'
'pages/dashboard/settings/username.js' → '/dashboard/settings/username'

此外，您可以在動態路徑段中使用括號語法。由於這一點，您現在可以匹配命名參數。

'pages/blog/[slug].js' → '/blog/:slug' ('/blog/hello-world')
'pages/[username]/settings.js' → '/:username/settings' ('/foo/settings')
'pages/post/[...all].js' → '/post/*' ('/post/2020/id/title')

查看路線文檔以了解有關它們如何工作的更多信息。

服務器端渲染

根據您的應用程序的用例，Next.js 中的數據獲取使您能夠以各種方式呈現您的信息。這些包括使用靜態站點生成 (SSG) 或服務器端呈現 (SSR) 預先呈現，以及使用增量靜態再生來創建或更新動態內容。如果您從頁面導出，Next.js 將使用名為“getServerSideProps”（服務器端渲染）的函數提供的信息預渲染頁面。

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

無論呈現方法如何，每個“prop”都將發送到頁面組件，並且可以在客戶端讀取第一個 HTML。為了適當地滋潤頁面，這是必要的。

靜態站點生成

如果頁面使用“getStaticProps”並包含動態路由，則必須定義應靜態創建的路徑列表。從使用動態路由的頁面導出的名為“getStaticPaths”（靜態站點生成）的函數提供的任何路徑都將由 Next.js 靜態預渲染。

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

API 參考涵蓋了可與“getStaticPaths”一起使用的所有選項和屬性。Next.js 在單個項目的構建時 (SSG) 或請求時 (SSR) 預呈現頁面。

圖像優化

imgNext.js 的“next/image”組件已經為現代網絡擴展了HTML元素。借助一系列內置的性能增強功能，您可以獲得良好的 Core Web Vitals。這些評級是衡量用戶對您網站的反應程度的重要指標，並且在確定搜索結果時會被 Google 考慮。Next.js 會以導入的文件為基礎，自動計算圖片的寬高。在加載圖像時，這些設置用於停止累積佈局移位。

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt= "Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

自動分碼

僅使用呈現頁面所需的 JavaScript 和庫。Next.js 不是創建包含所有應用程序代碼的單個 JavaScript 文件，而是自動將應用程序劃分為多個資源。加載頁面時，僅加載該特定頁面所需的 JavaScript。為了實現它，Next.js 會檢查導入的資源。

存在一個值得注意的例外。如果在至少 50% 的網站頁面中使用了導入，則將其移動到主 JavaScript 包中。

打字稿支持

Next.js 具有強大的 TypeScript 支持，因為它是由 TypeScript 編寫的。通過零配置設置和頁面、API 等的內置類型，Next.js 提供了集成的 TypeScript 體驗。使用 '-ts, --typescript flag'，您可以使用 'create-next-app' 創建一個 TypeScript 項目，如下所示：

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

類型檢查是 Next.js 的“下一個構建”的標準功能。要了解有關 Next.js 打字稿的更多信息，請單擊此處。

API 路由

Next.js 改變遊戲規則的功能之一是它通過使您能夠使用 API 路由編寫服務器代碼來構建全棧 React 應用程序的一體化方法。Next.js 的 API 路由提供了一種構建 API 的方法。

'pages/api' 文件夾中的任何文件都映射到 '/api/*' 並且處理起來更像 API 端點而不是 'page'。它們不會增加客戶端捆綁包的大小，因為它們只是服務器端捆綁包。

Next.js 的優點

全球最大和最知名的企業經常使用 Next.js。它被認為是增長率最高的 React 框架之一，非常適合用於靜態站點。採用Next的優點如下：

• 對於 SEO，Next.js 非常棒。它使您能夠創建具有所有必要功能和交互性的 Web 應用程序，同時保留基於靜態文本的網頁的 SEO 優勢。多虧了它，您可以建立強大的在線形象。
• Next.js 的用戶體驗非常好。您無需遵守電子商務或 CMS 平台施加的任何插件、模板或其他限制。你有完全的自由來改變你認為合適的前端，你也可以不受任何限制地創造性地編輯東西。
• 使用 Next.js 可以增強您的網站或 Web 應用程序的性能。雖然一次下載和運行大量 JavaScript 代碼不會導致瀏覽器停止，但它可以大大提高總阻塞時間 (TBT) 等指標。始終瞄準小於 300 毫秒的時間。您的 TBT 增加得越快，人們就會越快在您的在線應用中發現價值。
• 如果您使用 Next.js，您的網站或應用程序將是安全的。Next.js 靜態網站與數據庫、依賴項、用戶數據或任何其他私有數據沒有任何直接連接，因為它們沒有任何這些東西。從而保證數據安全。
• Webpack 是 Next.js 的一個組件，它允許對資產編譯、熱重載和代碼拆分提供開箱即用的幫助，所有這些都可以加快開發速度。隨著 React 和 Next.js 越來越流行，使用它們的開發者社區也越來越流行。找到一家企業或獨立承包商進行更改將很容易。開發人員一致認為 Next.js 提供了對資產編譯、代碼拆分和熱重載的最佳支持。

Next.js 的缺點

儘管 Next.js 提供了出色的開發體驗，但始終存在局限性。Next.js 團隊正在努力解決這些問題。因此，約束每天都在變得越來越小。以下是對 Next.js 使用的一些限制：

• Next.js 存在一個弱插件生態系統。易於適應的插件在使用方面受到限制。
• 也沒有內部狀態管理器。這意味著如果需要，您必須在應用程序中包含 Redux、MobX 或其他狀態管理器。
• Next.js 提供的多功能性有一個缺點，那就是持續維護。您將需要一個具有必要知識的敬業人員來成功實施任何請求的調整。
• Next.js 只允許使用一個路由器。換句話說，使用路由的方法無法調整。如果您的項目涉及動態路由，則必須使用 Node.js 服務器。

Next.js 與 NuxtJS 比較

Next.js 是開發人員構建複雜 Web 應用程序的首選，因為它能夠快速構建複雜的網站。Next.js 的開發人員將其推廣為 React 項目的單命令、零配置工具鏈。它是一個 React 框架，可以透明地為您管理服務器端渲染，並提供一個通用架構，使構建前端 React 應用程序變得簡單。當 Next.js 注意到保存到磁盤的修改時，頁面會重新加載。它與其他 JavaScript、Node 和 React 組件一起運行良好。在將 HTML 傳輸到客戶端之前，您可以使用 Next.js 在服務器端渲染 React 組件。

一個廣受歡迎的 Vue.js 框架是 NuxtJS。它使為 Web 構建單頁或全局 Vue.js 程序變得更加容易。NuxtJS 框架旨在具有足夠的通用性，以作為 Web 開發人員的主要項目基礎。借助 NuxtJS，您可以通過在服務器和客戶端之間共享相同的代碼來專注於 Web 應用程序的邏輯。NuxtJS 允許您訪問組件上的許多屬性，例如“isClient”和“isServer”，因此您可以快速確定是在服務器上還是在客戶端上呈現某些內容。這僅僅是 NuxtJS 開發通用 Web 應用程序的廣泛好處列表的開始。

Next.js 比 NuxtJS 好嗎？

沒有優越的結構。這取決於您發現什麼是有效的及其各種品質。

從本質上講，Next.js 是一個 React 框架，可以在用戶需要在具有挑戰性的環境中快速渲染時使用。

另一方面，NuxtJS 是一個 Vue 框架，有助於簡化和加速 Web 開發過程。

NuxtJS 的最佳用例

NuxtJS 的創建是為了解決與創建單頁應用程序 (SPA) 相關的問題，這是許多當代 JavaScript 框架的重點。強制約定優於配置策略是 NuxtJS 最獨特的應用。在使用 NuxtJS 時，您不必創建很多配置文件。相反，您設置文件夾結構，以便 NuxtJS 可以理解它，然後構建應用程序的最終包。

您的應用程序的高度優化包是使用 NuxtJS 創建的。一個示例用例是Storyblok和Pentest Tools站點。

Next.js 的最佳用例

Next.js 的最佳功能之一是您可以創建靜態頁面，但其功能卻與動態頁面一樣。這在以下情況下是理想的： (a) 內容將定期更改或需要始終保持最新。(b) 例如，多用戶站點需要實時發布能力。(c) 使用 SSG 重建整個網站將花費大量時間（和金錢）並且沒有風險。一個重要的電子商務網站就是一個很好的例子。

Next.js 幫助程序員避免典型問題。Next.js 通過為執行具有挑戰性的 UI 任務提供單一抽象來防止開發人員意外添加問題，例如在組件樹深處過度獲取。如果需要，開發人員確切地了解在哪裡尋求獲取新數據。複雜的底層 API 不需要任何人學習。

一些非常好的案例研究是Hulu和Typeform網站。

結論

通讀全文後，Next.js 和 NuxtJS 框架的優缺點可能會一目了然。我們無法強調 Javascript 的流行程度以及幾乎所有當前的移動和在線應用程序都是使用它構建的，因此需要使用 Next.js 和 NuxtJS 等框架。因此，必鬚根據自己的需要選擇和使用最有效的框架。我希望這篇文章能幫助您為即將到來的項目在 Next.js 和 NuxtJS 之間做出決定。

鏈接：https ://blog.openreplay.com/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses

#nuxtjs #nextjs #javascript

Nextjs Vs Nuxtjs : lequel utiliser ?

Il est difficile de suivre le rythme auquel l'écosystème JavaScript évolue avec la publication de nouveaux frameworks chaque année. Comprendre les différents frameworks JavaScript est essentiel, surtout si vous êtes un débutant qui aurait besoin d'une approche plus simple.

Le développement Web frontal moderne n'est pas complet sans les frameworks JavaScript, qui offrent aux programmeurs des outils éprouvés pour créer des applications Web évolutives et dynamiques. Aujourd'hui, la familiarité avec les frameworks est souvent requise pour les métiers du développement front-end, car de nombreuses entreprises modernes les utilisent comme composant d'outillage de base. J'espère que cet article vous fournira un endroit accueillant pour commencer pendant que vous en apprendrez plus sur les différents frameworks.

Il peut être difficile pour les aspirants développeurs front-end de décider par où commencer lors de l'apprentissage des frameworks, car il y a tellement d'options, de nouvelles sont constamment créées, elles fonctionnent en grande partie de la même manière mais effectuent certaines tâches différemment, et il y a certaines choses à surveiller pour l'utilisation de frameworks.

À la fin de cet article, vous serez familiarisé avec les composants de Next.js et NuxtJS et posséderez une compréhension de base des deux frameworks et choisirez ce qui vous convient.

Qu'est-ce que NuxtJS ?

NuxtJS est un framework JavaScript gratuit et open source utilisé pour créer des applications Vue.js. Son objectif est de permettre aux développeurs Vue de bénéficier de technologies de pointe de manière simple, rapide et organisée. NuxtJS a été influencé par Next.js, un framework construit sur React.js avec un objectif similaire.

La base de votre projet Vue.js est NuxtJS, qui fournit une structure et une flexibilité pour que vous puissiez le construire en toute confiance. En mettant l'accent sur la fourniture d'une expérience de développement fantastique, NuxtJS vise à rendre le développement Web simple et efficace. Vous pouvez vous concentrer sur ce qui compte — créer votre application — grâce à elle.

Les nouvelles fonctionnalités de la version bêta publique de NuxtJS 3, publiées en octobre, ont donné aux développeurs plus de temps pour se concentrer sur la création d'expériences utilisateur exceptionnelles. En conséquence, la croissance de la communauté NuxtJS a explosé.

Écosystème de modules

Pour étendre la base du framework et rationaliser les intégrations, NuxtJS propose un système de modules. Le système de modules d'ordre supérieur proposé par NuxtJS permet d'étendre le noyau. Lorsque NuxtJS démarre, les modules sont des fonctions qui sont appelées dans l'ordre. S'il existe un module NuxtJS pour cela, vous n'avez pas besoin de tout créer à partir de zéro ou de maintenir un passe-partout. "Nuxt.config" peut être utilisé pour ajouter des modules NuxtJS.

Des plugins et des paramètres de configuration peuvent être ajoutés à NuxtJS, mais la gestion de ces ajustements sur divers projets peut être laborieuse, répétitive et chronophage. Cependant, si NuxtJS devait répondre aux exigences de chaque projet prêt à l'emploi, il serait trop compliqué et difficile à utiliser.

C'est l'une des raisons pour lesquelles NuxtJS propose une architecture modulaire qui permet l'extension du noyau. En plus de nombreuses autres activités utiles, ils peuvent configurer des chargeurs de packs Web, installer des bibliothèques CSS et modifier des fichiers modèles. La distribution des modules NuxtJS dans les packages npm est la meilleure partie. Pour en savoir plus sur les modules NuxtJS, cliquez ici et ici .

Importation automatique des composants

Pour effectuer la récupération de données, accéder au contexte de l'application et à la configuration d'exécution, gérer l'état ou créer des composants et des plugins, NuxtJS importe automatiquement les fonctions et composables. Tous les composants de votre répertoire components/ sont immédiatement importés par NuxtJS (ainsi que les composants enregistrés par les modules que vous utilisez).

| components/
--| TheHeader.vue
--| TheFooter.vue

layouts/default.vue:

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

Dans NuxtJS 3, nous recevons un nouveau dossier supplémentaire appelé "composables/" qui importera automatiquement la fonction Composition API que vous écrivez. Les composants sont automatiquement importés dans le dossier « components/ » et le routage basé sur les fichiers se trouve dans le dossier « pages/ ». Cliquez ici pour en savoir plus sur les importations automatiques NuxtJS.

Modes de rendu

Le rendu est le processus par lequel le navigateur et le serveur traduisent les composants Vue.js en éléments HTML en lisant le code JavaScript.

Le rendu côté client et le rendu global sont tous deux pris en charge par NuxtJS. Une interface utilisateur (UI) complexe et dynamique avec des transitions de page transparentes peut être créée à l'aide de techniques de rendu côté client. Tout en conservant les avantages du rendu côté client, le rendu universel permet aux applications NuxtJS d'offrir des chargements de page rapides. De plus, puisque le contenu est déjà inclus dans le texte HTML, les crawlers peuvent l'indexer sans effort supplémentaire.

En plus de déterminer comment le serveur doit répondre à une nouvelle requête sur une URL spécifique, le rendu hybride permet diverses règles de mise en cache par route.

Les applications JavaScript ont souvent du mal à gérer le référencement et les balises Meta. En effet, la page est initialement vide lorsque nous nous appuyons sur JavaScript pour obtenir nos données, telles que le contenu et les méta descriptions. De plus, il n'y a aucun élément à indexer ou à traiter avant l'exécution de JavaScript. De plus, de nombreux robots d'exploration ne prennent pas en charge JavaScript. Par conséquent, si vous partagez un article de votre blog JavaScript sur Facebook, il peut apparaître avec le titre "indéfini" plutôt que le titre de l'article d'origine. Le rendu côté serveur (SSR) peut nous sauver de cette situation. L'objectif derrière SSR est d'héberger un serveur qui générera la réponse HTML et la fournira au crawler ou au client. En conséquence, dans l'exemple mentionné ci-dessus, le serveur gérera l'appel à l'API, après quoi les métadonnées seront définies et la page finale sera livrée.

Avec NuxtJS 3, le rendu hybride est désormais possible. Cela vous permettra d'utiliser des fonctionnalités telles que la génération statique incrémentielle, qui combine le rendu côté serveur (SSR) et la génération de site statique (SSG), ainsi que d'autres modes sophistiqués. Les modes de rendu peuvent également être trouvés ici et ici .

Routage du système de fichiers

Pour chaque page, NuxtJS propose un routage et un fractionnement de code automatiques. NuxtJS crée automatiquement la configuration Vue-router en fonction de votre arborescence de fichiers Vue dans le répertoire des pages. Vous n'avez pas besoin de faire de configuration supplémentaire une fois que vous avez créé un fichier .vue dans le répertoire de vos pages pour que le routage de base fonctionne.

Cette arborescence de fichiers :

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

générera automatiquement :

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

En utilisant Vue Router comme backend, un routage basé sur des fichiers peut être utilisé pour construire des routes dans votre application en ligne. Si vous utilisez uniquement app.vue, vue-router ne sera pas inclus car ce répertoire est facultatif, ce qui réduit la taille du bundle de votre application. Tout au long de votre application, NuxtJS propose un framework middleware de route personnalisé, parfait pour extraire le code que vous souhaitez exécuter avant de passer à une route spécifique.

L'exécution dans le composant Vue de votre application NuxtJS est un middleware de route. Bien qu'ils aient un nom similaire, ils ne sont pas identiques au middleware serveur qui s'exécute sur le serveur Nitro de votre application. Vous trouverez plus d'informations sur le routage de fichiers NuxtJS ici .

Configuration zéro

La configuration par défaut de NuxtJS couvre la majorité des cas d'utilisation. Le fichier nuxt.config.js permet de remplacer la configuration par défaut. Vous pouvez utiliser NuxtJS pour spécifier les fichiers, modules et bibliothèques CSS globaux que vous souhaitez utiliser (inclus sur chaque page). Ajoutez ces ressources CSS à nuxt.config.js :

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss'
  ]
}

NuxtJS déterminera automatiquement le type de fichier en fonction de son extension et utilisera le bon chargeur de préprocesseur pour Webpack. Vous devez toujours installer le chargeur nécessaire si vous souhaitez les utiliser. Vous pouvez omettre l'extension de fichier pour les fichiers spécifiés dans le tableau CSS de votre fichier de configuration NuxtJS, tels que CSS, SCSS, Postcss, Less, Stylus, etc.

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

NuxtJS gère le reste lorsque vous travaillez directement sur le code de votre application. Voici plus d'informations sur la configuration de NuxtJS.

Récupération de données

Vous pouvez utiliser NuxtJS pour obtenir du contenu de n'importe quelle source dans vos composants Vue compatibles SSR. NuxtJS propose la méthode Fetch et la méthode asyncData comme ses deux (2) méthodes pour obtenir des données à partir d'une API.

Une fois l'instance du composant établie, Fetch est un crochet appelé à la fois sur le client pendant la navigation et le rendu côté serveur. Le hook de récupération doit (explicitement ou implicitement via async/await) renvoyer une promesse qui sera remplie : avant que la première page ne soit rendue sur le serveur et après que le composant a été monté sur le client.

Lors de l'utilisation d'un hébergement statique , le hook de récupération n'est utilisé que lors de la création de pages, et la sortie est ensuite mise en cache pour une utilisation par le client. Il peut être indispensable de donner un nom à votre composant ou, à défaut, de proposer une implémentation spéciale de fetchKey pour éviter les conflits de cache.

asyncData est un autre crochet pour la récupération globale des données . Contrairement à Fetch, qui vous oblige à exécuter des actions Vuex ou à modifier les propriétés de l'instance du composant pour préserver votre état asynchrone, asyncData combine simplement la valeur de retour avec l'état local de votre composant. En utilisant la bibliothèque @nuxt/http, considérez l'exemple suivant :

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

N/B : asyncData est uniquement accessible pour les pages ; le crochet n'y a pas accès. Vous trouverez plus d'informations sur l'extraction de données dans ce guide .

Optimisation du référencement

Vous avez trois options avec NuxtJS pour inclure des métadonnées dans votre application :

1. Utilisation globale de nuxt.config.js
2. Utilisation locale de la tête comme objet
3. Utilisation locale de la tête en tant que fonction pour récupérer des données et des propriétés calculées

NuxtJS offre une gestion des balises meta et un temps de mise au contenu plus rapide pour une excellente indexation. Voici plus de guide sur les balises Meta et le référencement.

Avantages de NuxtJS

NuxtJS est extensible et simplifie l'intégration de vos points de terminaison REST ou GraphQL préférés, CMS, frameworks CSS, etc., grâce à son écosystème de modules robuste et à son moteur de crochets. Voici quelques-uns des nombreux avantages de l'utilisation de NuxtJS :

• Vous pouvez déployer des applications Vue complètes rapides et optimisées pour le référencement à l'aide de NuxtJS, qui fournit également une solution convaincante et un excellent écosystème.
• Grâce à son approche innovante, NuxtJS accélère la création et la fonctionnalité de votre futur site Web ou application en fusionnant une superbe expérience de développeur avec des fonctionnalités réutilisables et entièrement intégrées.
• La simplicité et la courbe d'apprentissage progressive de NuxtJS en font une option fantastique.
• Entre le rendu côté serveur (SSR) et la génération de site statique, NuxtJS offre la polyvalence (SSG).
• En plus de sa configuration et de sa structure avisées, NuxtJS offre un fractionnement automatique du code, un travail d'équipe efficace et une disposition et des conventions de répertoire solides.

Inconvénients de NuxtJS

Chaque avantage a un inconvénient correspondant. Les inconvénients de l'utilisation de NuxtJS sont énumérés ci-dessous :

• Il y a moins de ressources et peut-être une documentation produit moins complète disponible pour NuxtJS en raison de sa petite communauté.
• Sur votre serveur, un trafic élevé peut être particulièrement éprouvant.
• Seuls des Hooks spécifiques vous permettent d'interagir avec et d'interroger le DOM.
• Il peut être difficile de faire fonctionner des bibliothèques personnalisées avec NuxtJS.
• Il existe sans aucun doute des plugins populaires et fiables ou des éléments manquants, tels que Calendar, Google Maps, des cartes vectorielles, etc. Bien qu'il existe des composants supplémentaires, ils ne sont généralement pas bien entretenus.

Qu'est-ce que Next.js ?

Next.js est le meilleur outil pour tout développeur React pour apprendre et améliorer ses projets. Il s'agit d'un framework de développement Web open source construit sur Node.js et facilite le rendu côté serveur et le déploiement de sites Web statiques pour les applications Web basées sur React.

La meilleure expérience de développement est fournie par Next.js, qui possède toutes les fonctionnalités requises pour la production, y compris la prise en charge de TypeScript, le regroupement intelligent, la pré-extraction de routes et le rendu hybride statique et serveur. Il n'est pas nécessaire de configurer.

Plusieurs fonctionnalités de pointe offertes par Next.js feront progresser votre candidature en ligne. Les fonctionnalités de Next.js sont les suivantes :

Routage du système de fichiers

Utilisant l'idée des pages comme base, Next.js dispose d'un routeur basé sur le système de fichiers. Une route devient automatiquement disponible lorsqu'un fichier est ajouté au répertoire des pages. Vous pouvez définir la plupart des motifs à l'aide des fichiers du répertoire pages.

Les segments pour l'itinéraire indexé, l'itinéraire imbriqué et les itinéraires dynamiques sont disponibles ici. Le routeur dirigera automatiquement les fichiers avec le nom index vers la racine du répertoire lors de l'utilisation de cette route d'index.

'pages/index.js' → '/'
'pages/blog/index.js' → '/blog'

Le routeur est compatible avec les fichiers imbriqués dans la route imbriquée, et une structure de dossiers imbriqués transportera toujours automatiquement les fichiers de la même manière.

'pages/blog/first-post.js' → '/blog/first-post'
'pages/dashboard/settings/username.js' → '/dashboard/settings/username'

De plus, vous pouvez utiliser la syntaxe des parenthèses dans les segments de route dynamiques. Vous pouvez maintenant faire correspondre des paramètres nommés grâce à cela.

'pages/blog/[slug].js' → '/blog/:slug' ('/blog/hello-world')
'pages/[username]/settings.js' → '/:username/settings' ('/foo/settings')
'pages/post/[...all].js' → '/post/*' ('/post/2020/id/title')

Consultez la documentation des itinéraires pour en savoir plus sur leur fonctionnement.

Rendu côté serveur

Selon le cas d'utilisation de votre application, la récupération de données dans Next.js vous permet de restituer vos informations de différentes manières. Celles-ci incluent le rendu préalable à l'aide de la génération de site statique (SSG) ou du rendu côté serveur (SSR), ainsi que la création ou la mise à jour de contenu dynamique à l'aide de la régénération statique incrémentielle. Next.js pré-rendra une page en utilisant les informations fournies par une fonction appelée 'getServerSideProps' (Server-Side Rendering) si vous l'exportez à partir d'une page.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Chaque 'prop' sera envoyé au composant de la page quelle que soit la méthode de rendu, et le premier code HTML peut être lu côté client. Pour bien hydrater la page, cela est nécessaire.

Génération de sites statiques

Une liste de chemins qui doivent être créés statiquement doit être définie si une page utilise 'getStaticProps' et contient des routes dynamiques. Tous les chemins fournis par une fonction appelée « getStaticPaths » (génération de site statique) exportés à partir d'une page qui utilise des itinéraires dynamiques seront pré-rendus statiquement par Next.js.

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

La référence API couvre toutes les options et propriétés qui peuvent être utilisées avec 'getStaticPaths'. Next.js pré-rend les pages au moment de la construction (SSG) ou au moment de la demande (SSR) dans un seul projet.

Optimisation des images

L'élément HTML imga été étendu pour le Web moderne par le composant 'next/image' de Next.js. Vous pouvez obtenir de bons Core Web Vitals à l'aide d'une gamme d'améliorations de performances intégrées. Ces notes sont un indicateur crucial de la façon dont les utilisateurs réagissent à votre site Web et sont prises en compte par Google lors de la détermination des résultats de recherche. Next.js calculera automatiquement la largeur et la hauteur de l'image en utilisant le fichier importé comme base. Pendant le chargement de votre image, ces paramètres sont utilisés pour arrêter les décalages de mise en page cumulatifs .

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt= "Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

Fractionnement de code automatique

Seuls le JavaScript et les bibliothèques nécessaires au rendu des pages sont utilisés. Au lieu de créer un seul fichier JavaScript contenant tout le code de l'application, Next.js divise automatiquement l'application en plusieurs ressources. Seul le JavaScript requis pour cette page spécifique est chargé lorsqu'une page est chargée. Pour y parvenir, Next.js examine les ressources importées.

Une exception notable existe. Si une importation est utilisée dans au moins 50 % des pages du site, elle est déplacée dans le groupe JavaScript principal.

Prise en charge des scripts dactylographiés

Next.js a une forte prise en charge de TypeScript car il est écrit en TypeScript. Avec une configuration sans configuration et des types intégrés pour les pages, les API, etc., Next.js offre une expérience TypeScript intégrée. À l'aide de l'indicateur '—ts, —typescript', vous pouvez utiliser 'create-next-app' pour créer un projet TypeScript comme suit :

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

La vérification de type est une fonctionnalité standard de la « prochaine génération » de Next.js. Pour en savoir plus sur le tapuscrit Next.js, cliquez ici .

Itinéraire API

L'une des fonctionnalités révolutionnaires de Next.js est son approche tout-en-un pour créer des applications React complètes en vous permettant d'écrire du code serveur à l'aide de routes API. Les routes d'API de Next.js offrent un moyen de construire votre API.

Tout fichier du dossier 'pages/api' est mappé sur '/api/*' et est traité plus comme un point de terminaison d'API que comme une 'page'. Ils n'augmentent pas la taille de votre bundle côté client car ce sont des bundles côté serveur uniquement.

Avantages de Next.js

Les entreprises les plus grandes et les plus connues dans le monde utilisent fréquemment Next.js. Il est considéré comme l'un des frameworks React avec l'un des taux de croissance les plus élevés et est excellent pour une utilisation avec des sites statiques. Les avantages d'adopter Next sont les suivants :

• Pour le référencement, Next.js est fantastique. Il vous permet de créer des applications Web avec toutes les fonctionnalités et l'interactivité nécessaires tout en conservant les avantages SEO d'une page Web textuelle statique. Vous pouvez établir une puissante présence en ligne grâce à cela.
• L'expérience utilisateur est excellente avec Next.js. Vous n'êtes pas tenu de respecter les plug-ins, modèles ou autres limitations imposées par les plates-formes de commerce électronique ou CMS. Vous avez toute liberté pour modifier le front-end comme bon vous semble, et vous pouvez également modifier les choses de manière créative sans aucune restriction.
• Les performances de votre site Web ou de votre application Web sont améliorées à l'aide de Next.js. Bien que le téléchargement et l'exécution d'une quantité importante de code JavaScript à la fois n'entraînent pas l'arrêt du navigateur, cela peut considérablement améliorer les mesures telles que le temps de blocage total (TBT). Visez toujours un temps inférieur à 300 ms. Plus votre TBT augmente rapidement, plus les gens trouveront rapidement de la valeur dans votre application en ligne.
• Votre site Web ou votre application sera sécurisé si vous utilisez Next.js. Les sites Web statiques Next.js n'ont aucune connexion directe à la base de données, aux dépendances, aux données utilisateur ou à toute autre donnée privée, car ils n'ont aucune de ces choses. La sécurité des données est ainsi garantie.
• Webpack, un composant de Next.js, permet une assistance prête à l'emploi pour la compilation d'actifs, le rechargement à chaud et le fractionnement de code, qui peuvent tous accélérer le développement. Au fur et à mesure que React et Next.js deviennent plus populaires, la communauté des développeurs qui les utilise aussi. Il sera simple de trouver une entreprise ou un entrepreneur indépendant pour apporter des modifications. Le meilleur support pour la compilation d'actifs, le fractionnement de code et le rechargement à chaud est systématiquement trouvé par les développeurs comme étant fourni par Next.js.

Inconvénients de Next.js

Bien que Next.js offre une expérience de développement fantastique, il y a toujours des limites. L'équipe Next.js travaille d'arrache-pied pour résoudre les problèmes. Ainsi, les contraintes deviennent de plus en plus petites chaque jour. Voici quelques restrictions sur l'utilisation de Next.js :

• Un écosystème de plugin faible existe pour Next.js. Les plugins simples à adapter sont limités dans leur utilisation.
• Il n'y a pas non plus de gestionnaire d'état interne. Cela implique que vous devez inclure Redux, MobX ou un autre gestionnaire d'état dans votre application si vous en avez besoin.
• Il y a un inconvénient à la polyvalence qu'offre Next.js, et c'est la maintenance continue. Vous aurez besoin d'une personne engagée possédant les connaissances nécessaires pour mettre en œuvre avec succès les ajustements demandés.
• Un seul routeur est autorisé à être utilisé par Next.js. En d'autres termes, la méthode qui utilise les itinéraires ne peut pas être modifiée. Si votre projet implique des routes dynamiques, vous devez utiliser le serveur Node.js.

Next.js vs NuxtJS Comparaison

Next.js est le premier choix des développeurs lors de la création d'applications Web sophistiquées en raison de sa capacité à créer rapidement des sites Web complexes. Les développeurs de Next.js le présentent comme une chaîne d'outils à commande unique et sans configuration pour les projets React. Il s'agit d'un framework React qui gère de manière transparente le rendu côté serveur pour vous et offre une architecture commune qui simplifie la construction d'une application React frontale. Lorsque Next.js remarque une modification enregistrée sur le disque, la page est rechargée. Il fonctionne bien avec d'autres composants JavaScript, Node et React. Avant de transmettre le code HTML au client, vous pouvez restituer les composants React côté serveur à l'aide de Next.js.

Un framework Vue.js très apprécié est NuxtJS. Il facilite la construction de programmes Vue.js monopage ou globaux pour le Web. Le framework NuxtJS vise à être suffisamment polyvalent pour servir de base de projet principale aux développeurs Web. Vous pouvez vous concentrer sur la logique de votre application web en partageant le même code entre le serveur et le client grâce à NuxtJS. NuxtJS vous permet d'accéder à de nombreuses propriétés sur vos composants, telles que "isClient" et "isServer", afin que vous puissiez déterminer rapidement si vous rendez quelque chose sur le serveur ou le client. Ce n'est que le début de la longue liste d'avantages de NuxtJS pour le développement d'applications Web universelles.

Next.js est-il meilleur que NuxtJS ?

Il n'y a pas de structure supérieure. Cela dépend de ce que vous trouvez efficace et de ses diverses qualités.

En substance, Next.js est un framework React qui peut être utilisé lorsqu'un utilisateur a besoin d'un rendu rapide dans des circonstances difficiles.

D'autre part, NuxtJS est un framework Vue qui aide à rationaliser et à accélérer le processus de développement Web.

Meilleurs cas d'utilisation pour NuxtJS

NuxtJS a été créé pour résoudre les problèmes associés à la création d'applications à page unique (SPA), qui sont au centre de nombreux frameworks JavaScript contemporains. L'application de la convention sur la stratégie de configuration est l'application la plus distinctive de NuxtJS. Vous n'avez pas besoin de créer de nombreux fichiers de configuration lorsque vous utilisez NuxtJS. Au lieu de cela, vous configurez la structure des dossiers afin que NuxtJS puisse la comprendre, puis construisez le groupe final de l'application par la suite.

Le bundle hautement optimisé de votre application est créé à l'aide de NuxtJS. Un exemple de cas d'utilisation est les sites Storyblok et Pentest Tools .

Meilleurs cas d'utilisation pour Next.js

L'une des meilleures fonctionnalités de Next.js est que vous pouvez créer des pages statiques qui fonctionnent néanmoins comme des pages dynamiques. C'est idéal lorsque : (a) le contenu sera modifié régulièrement ou doit être à jour à tout moment. (b) Des capacités de publication en temps réel sont nécessaires, par exemple, pour les sites multi-utilisateurs. (c) La reconstruction de l'intégralité du site Web prendrait beaucoup de temps (et d'argent) en utilisant SSG et ne présente aucun risque. Un important site Web de commerce électronique en est un bon exemple.

Next.js aide les programmeurs à éviter les problèmes typiques. Next.js empêche les développeurs d'ajouter accidentellement des problèmes, tels que la surextraction en profondeur dans l'arborescence des composants, en fournissant une abstraction unique pour effectuer des tâches d'interface utilisateur complexes. Les développeurs ont compris exactement où chercher pour acquérir de nouvelles données si nécessaire. Les API sous-jacentes complexes n'avaient pas besoin d'être apprises par qui que ce soit.

Quelques très bonnes études de cas sont les sites Hulu et Typeform .

Conclusion

Les avantages et les inconvénients des frameworks Next.js et NuxtJS peuvent être clairs pour vous une fois que vous aurez lu l'intégralité du texte. Nous ne saurions trop insister sur la prévalence de Javascript et sur la façon dont presque toutes les applications mobiles et en ligne actuelles sont construites à l'aide de celui-ci, ce qui rend nécessaire l'utilisation de frameworks comme Next.js et NuxtJS. Par conséquent, il faut sélectionner et utiliser le cadre le plus efficace pour ses besoins. J'espère que cet article vous aidera à choisir entre Next.js et NuxtJS pour votre prochain projet.

Lien : https://blog.openreplay.com/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses

#nuxtjs #nextjs #javascript