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

Хотя перенос приложения никогда не бывает легким, мы считаем, что преимущества того стоят.

Наша текущая установка

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

К сожалению, сокращение поддержки библиотеки вынудило нашу команду перейти к другому, более стабильному решению.

Куда идем

Next.js был выпущен в 2016 году как фреймворк с открытым исходным кодом, построенный на Node.js. С тех пор он превратился в одну из ведущих фреймворков JavaScript для фронтенд-разработки и теперь известен как React Framework for Production . Фреймворк расширяет React за счет таких оптимизаций, как рендеринг на стороне сервера и статическая генерация.

Next.js поддерживается командой Vercel в сотрудничестве с такими технологическими гигантами, как Facebook и Google, которые внесли свой вклад в такие функции, как Fast Refresh, а также в повышение производительности.

Кроме того, его используют ведущие технологические компании, такие как GitHub, Netlify, Hulu, Uber и Ticketmaster, а теперь и Bellhop.

Что нам нравится в Next.js

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

• Гибрид SSG и SSR. Выберите, будут ли страницы отображаться во время сборки или во время выполнения на постраничной основе.
• Постепенное статическое возрождение (ISR). Повторно проверяйте страницы через определенное время, что означает, что вы можете обновлять статические страницы, не перестраивая весь сайт. ( Вот видео, показывающее, как это работает.)
• Next.js Analytics. Посмотрите, как ваш сайт работает на реальных устройствах ваших пользователей.
• Маршруты API. Легко добавляйте конечные точки API для обработки таких вещей, как аутентификация, отправка форм и безопасный доступ к внешним службам.
• Next Live . Сотрудничайте со своей командой в режиме реального времени. (Этот еще не был выпущен, но мы очень ждем, когда он появится.)

Хостинг на Vercel

С переходом на Next.js мы также будем переносить наш хостинг с AWS S3 на Vercel.

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

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

Здесь только несколько:

• Оценка реального опыта . Просматривайте панели мониторинга производительности, чтобы оптимизировать ваше приложение.
• Встроенная интеграция с GraphCMS. Легко интегрируйте свое приложение с GraphCMS. ( Эта функция все еще находится в разработке, но мы очень рады, что над ней работают.)
• Поддержка со стороны команды, которая поддерживает Next.js. Нет ничего лучше, чем это!
• Предварительный просмотр URL-адресов. Предварительно просмотрите свои функциональные ветки перед развертыванием в производственной среде.

Что все это значит для Bellhop

Итак, как все это приносит пользу Bellhop и нашим клиентам? Что ж, вот несколько способов, которыми, по нашему мнению, переход на Next.js окажет положительное влияние.

• Лучший опыт разработчика (DX). Благодаря таким функциям, как быстрое обновление, маршруты API, автоматические полифилы, маршрутизация файловой системы и режим предварительного просмотра, Next.js предлагает объективно лучший опыт разработчика.
• Лучший пользовательский интерфейс (UX). Пользователи также получат выгоду от более удобного использования таких функций, как ISR, что позволит им быстро получать самую свежую информацию.
• Стабильная платформа для роста. Стабильная платформа означает меньшее время простоя для наших пользователей.
• Развертывайте новые функции быстрее. Растущий фреймворк и обширная экосистема инструментов и разработчиков позволят нашей команде быстро выпускать функции.
• Собственный стек. Этот шаг даст нашей команде больше ответственности над всем нашим стеком, освободив другие команды, чтобы они могли сосредоточиться на своих собственных высокоэффективных проектах.
• Легче привлечь новые таланты. Большинство разработчиков, знакомых с React, также знают Next.js, что означает, что мы можем быстрее адаптировать новых инженеров.
• Гарантирует, что мы остаемся на передовой. Благодаря постоянному добавлению новых функций во фреймворк, мы можем гарантировать, что наша команда сможет легко адаптироваться ко всем новым вещам, происходящим в веб-разработке.

Ресурсы

Хотите узнать больше о Next.js? Ознакомьтесь с ресурсами ниже.

• Next.js документы
• Почему вы должны изучить Next.js как разработчик на React
• Потрясающий Next.js
• Next.js Учебник