Разработка веб-сайта должна быть свободным опытом.

Свобода выбора любого фреймворка, который вы хотите использовать, если вы используете high-code.

В компонуемой архитектуре внешнего интерфейса Fathym вы можете использовать любую среду JavaScript (и даже некоторые другие) для создания одного аспекта вашего веб-сайта. А затем, если хотите, используйте другой фреймворк или комбинацию компоновщиков с высоким, низким и нулевым кодом.

Гениально, правда? Верно.

Итак, в духе распространения компонуемых интерфейсов, которые вы можете использовать с новым пользовательским интерфейсом Fathym, мы рассмотрим один из новых фреймворков в Next.js.

Популярность Next.js

Мы изучили опрос разработчиков StackOverflow за 2022 год, в котором они назвали самые популярные фреймворки.

Хотя Svelte был №1 в 2021 году, его обогнал Phoenix Framework, и мы увидели много других новичков в списке, включая Next.js.

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

Популярность фреймворка важна по нескольким причинам.

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

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

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

Давайте посмотрим, что это такое, что он делает, а также плюсы и минусы Next.js.

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

Next.js был разработан Гильермо Раухом, генеральным директором Vercel, в 2016 году, и в настоящее время он находится в версии 12.2, выпущенной в конце июня 2022 года. На самом деле Next.js написан поверх Node.js, поэтому для него требуется наличие Node. .js для использования с диспетчером пакетов Node (npm).

Одной из особенностей Next.js является то, как он отображается на стороне сервера и на стороне клиента, также известный как «универсальные приложения». Это имеет решающее значение для одностраничных приложений (SPA), которые он создает, и как это помогает этим SPA добиться значительного успеха с точки зрения SEO (поисковой оптимизации).

Как объясняет эксперт по SEO Барри Адамс:

Что происходит, когда вы используете React без рендеринга на стороне сервера, так это то, что сканер останавливается на самой первой странице, потому что он не видит никаких гиперссылок для перехода. Он отправляет страницу индексатору, который затем должен отобразить страницу и извлечь гиперссылки, которые затем будут добавлены в очередь сканера. Затем краулер в конечном итоге просканирует следующий набор страниц и снова остановится на этом, потому что все ссылки невидимы до тех пор, пока не будет обработан JavaScript. Поэтому приходится ждать, пока индексатор вернется с новым набором URL-адресов для сканирования, — объяснил Адамс в статье на Medium.

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

Next.js отображается как на стороне клиента, так и на стороне сервера: часть или весь веб-сайт отображается на стороне сервера, поэтому поисковый робот Google может найти информацию (URL, метатеги, контент и т. д.) и, следовательно, поместить ее в результаты поиска.

Рендеринг на стороне сервера (SSR) — это популярный метод рендеринга обычно одностраничного приложения (SPA) на стороне клиента на сервере с последующей отправкой полностью обработанной страницы клиенту, — поясняет geeksforgeeks.org. .

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

Для маркетологов улучшенный SEO — это замечательно. Для владельцев бизнеса ускорение выхода на рынок веб-сайтов и приложений стало возможным благодаря множеству готовых компонентов внутри Next.js. Кроме того, поскольку Next.js помогает создавать статические сайты, повышается безопасность; также нет связи с базой данных или данными пользователя.

Преимущества и недостатки Next.js

Преимущества

  • Отличная производительность с точки зрения времени загрузки
  • Время загрузки помогло с «ленивой загрузкой» и автоматическим разделением кода
  • Тонны поддержки для разработчиков
  • Фантастический пользовательский опыт
  • Более быстрый выход на рынок

Недостатки Next.js

  • Некоторые разработчики считают это слишком самоуверенным
  • Многие разработчики жалуются на то, как Next.js выполняет маршрутизацию, другие отстаивают это.

Заключение

Вы пробовали Next.js?

Что ж, вы можете на Платформе Fathym сегодня бесплатно!

Если да, возможно, вы захотите оценить Next.js вместе с другими фреймворками, такими как React, Angular или Svelte.

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

Первоначально опубликовано на https://www.fathym.com.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.