Что такое Next.js и почему разработчики любят его

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

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

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

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

Оглавление

• Что такое Next.js
  • Генерация статических сайтов
  • Рендеринг на стороне сервера
  • Инкрементная статическая регенерация
  • Рендеринг на стороне клиента
• Что делает Next.js уникальным?
• Для каких типов веб-сайтов лучше всего подходит Next.js?
• Кто использует Next.js
  • Backlinko
  • Hulu
• Плюсы Next.js
• Минусы Next.js
• Как начать новый проект Next.js
  • Маршрутизация страниц
  • Рендеринг страниц
  • Развертывание Next.js
• Заключение

Что такое Next.js

Next.js — это основанная на React платформа для разработки веб-сайтов, которая работает как фронтенд, так и бэкенд. Он позволяет разработчикам легко создавать полноценные веб-сайты, экономя время и усилия.

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

Next.js обеспечивает потрясающий опыт разработчика благодаря таким функциям, как интеграция TypeScript и ESLing и быстрое обновление при разработке веб-сайта. При развертывании Next.js выполняет автоматическую компиляцию, пакетирование и минификацию.

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

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

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

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

Next.js предоставляет возможность рендеринга страниц во время сборки, что делает их более быстрыми и безопасными. Статические страницы можно обслуживать из сети доставки контента (CDN), что дает множество преимуществ.

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

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

Статические сайты очень просты в развертывании и, к счастью, наиболее экономически эффективны.

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

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

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

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

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

Рендеринг на стороне сервера происходит на сервере (как следует из названия). Пользователи, которые физически находятся далеко от этого сервера, имеют повышенную задержку.

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

Чтобы устранить эти недостатки, Next.js можно развернуть в бессерверной среде.

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

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

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

Самый быстрый способ выполнить рендеринг на стороне сервера — использовать сервер, а не бессерверную среду.

Инкрементная статическая регенерация

Инкрементная статическая регенерация или сокращенно ISR — это гибрид статической генерации сайта и рендеринга на стороне сервера. Он позволяет статически генерировать страницы, но при этом периодически генерировать их обновленные версии.

Он также позволяет статически генерировать страницы по требованию, а не во время сборки.

Эта техника позволяет генерировать только часть страниц вашего сайта, а остальные — по требованию, когда их запрашивают пользователи.

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

Рендеринг на стороне клиента

Рендеринг на стороне клиента — это то, что вы делаете при использовании React, но даже в приложениях Next.js он имеет свое предназначение.

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

Что делает Next.js уникальным?

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

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

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

Это делает излишним наличие прокси-сервиса бэкенда. Разработчики Next.js могут сосредоточиться на интеграции фронтенда с предпочитаемым источником данных, не слишком беспокоясь о разработке бэкенда.

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

Динамические маршруты страниц, перенаправления, переписывание, промежуточные механизмы и i18n — вот лишь некоторые из тех вещей, которые делают Next.js таким отличным решением.

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

Маркетологам понравится A/B сплит-тестирование контента и автономность создания страниц через CMS.

Оптимизаторам поисковых систем понравится высокая скорость загрузки страниц и полностью настраиваемые метаданные, такие как теги Open Graph и структурированные данные.

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

Для каких типов веб-сайтов лучше всего подходит Next.js?

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

Чаще всего Next.js используется для создания сайтов, управляемых контентом, таких как корпоративные блоги, порталы для клиентов, сайты документации и магазины электронной коммерции.

Однако есть несколько моментов, о которых следует помнить.

Маршруты API Next.js могут обрабатывать простые запросы JSON, но если вам нужно что-то более сложное, например, веб-крючки или события, посылаемые сервером, вам придется искать другое место.

Кто использует Next.js

Next.js используют все — от программистов-любителей до компаний из списка Fortune 500.

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

Backlinko

Один из самых известных SEO-блогов, Backlinko, испытывал серьезные проблемы с производительностью.

Их старый сайт WordPress не справлялся с задачей в 2021 году, поэтому они решили полностью перестроить его с помощью Next.js, сохранив при этом все свои данные в WordPress.

Это решение отлично сработало, поскольку их новый сайт загружается в три раза быстрее.

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

Hulu

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

Одним из основных требований для Hulu была возможность рендеринга на стороне сервера. Next.js невероятно упростил реализацию этого требования.

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

Благодаря Next.js в Hulu стало меньше ошибок и повысилась производительность разработчиков.

Hulu — отличный пример того, как Next.js может справиться даже с самыми критическими требованиями.

Плюсы Next.js

До сих пор мы говорили о том, кто использует Next.js и каковы их причины. Давайте разложим все по полочкам.

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

Эти сторонние инструменты позволяют быстро и легко реализовать такие общие функции, как:

• Аутентификация с помощью next-auth
• Поисковая оптимизация с помощью next-seo
• безопасные с точки зрения типов маршруты API с помощью trpc

Помимо специфических пакетов Next.js, вы также можете использовать все пакеты React.

Они значительно ускорят время разработки и сократят время выхода на рынок.

Методы статического рендеринга позволяют в полной мере использовать преимущества SEO, особенно если в настоящее время вы используете рендеринг на стороне клиента.

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

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

Я за то, чтобы дать вам целостный взгляд на вещи, не продавая вам змеиное масло.

Давайте рассмотрим, почему вам не стоит использовать Next.js.

Минусы Next.js

Next.js — это не весь солнечный свет и розы, и есть некоторые недостатки, о которых вы должны знать.

В отличие от большинства полнофункциональных фреймворков, таких как Django, Spring или Rails, Next.js еще не настолько созрел.

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

Существует не так много согласованных шаблонов того, как следует строить веб-приложение, что приводит к множеству догадок и ошибок.

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

Вещи, которые не работают хорошо:

• Тестирование
• Аутентификация
• Базы данных

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

Легко направить проект Next.js в неправильное русло, если вы не знаете, что делаете.

В Next.js есть много странностей, о которых знают только опытные профессионалы. Такие вещи, как:

• Отсутствие префикса локали по умолчанию
• Многие вещи откажут вам в полной генерации статики
• Проблемы с производительностью рендеринга на стороне сервера

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

Как начать новый проект Next.js

Чтобы начать новый проект Next.js, на вашем компьютере должен быть установлен Node.js.

Создайте новый проект Next.js с помощью npx

npx create-next-app@latest

Откроется мастер, который проведет вас через создание проекта.

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

Страница в расположении pages/index.jsx сопоставлена с / на вашем сайте.

Выполните команду npm run dev для запуска сервера разработки и посетите http://localhost:3000, чтобы посмотреть, как работает ваше приложение.

Не стесняйтесь изменять содержимое файла pages/index.jsx, чтобы увидеть, как оно меняется в реальном времени.

Маршрутизация страниц

Чтобы увидеть маршрутизацию страниц Next.js в действии, создайте файл about.jsx в папке pages/.

Этот файл будет отображаться на /about в вашем приложении.

Заполните файл этим кодом, чтобы создать простую страницу:

const AboutPage = () => {
  return <div>Hello World</div>;
};

export default AboutPage;

Рендеринг страниц

Поведение Next.js по умолчанию заключается в предварительном рендеринге каждой страницы. Это наиболее оптимальный способ рендеринга вашего веб-приложения.

Давайте посмотрим, как мы можем загрузить некоторые данные на нашей странице about.

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

Измените содержимое страницы about, чтобы получить последние ежедневные факты о кошках:

const AboutPage = ({ facts }) => {
  return (
    <ul>
      {facts.map(({ _id, text }) => (
        <li key={_id}>{text}</li>
      ))}
    </ul>
  );
};

export const getStaticProps = async () => {
  const res = await fetch("https://cat-fact.herokuapp.com/facts");
  const json = await res.json();
  return { props: { facts: json } };
};

export default AboutPage;

Теперь вы создали свое собственное приложение с кошачьими фактами!

Развертывание Next.js

Развертывание вашего приложения Next.js зависит от того, какие методы рендеринга вы используете в своем приложении.

Если ваше приложение на 100% статично, вы можете сделать так называемый статический экспорт. Next.js создаст сайт в полностью статических файлах.

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

Статические сайты проще и дешевле всего рендерить. Я рекомендую использовать выделенный хост Next.js, такой как:

• Netlify
• Vercel
• DigitalOcean
• Рендеринг
• layer0
• Heroku

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

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

Бессерверная платформа или серверная платформа.

Быстро отметим различия:

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

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

Для бессерверных решений у вас есть следующие варианты:

• Netlify
• Vercel
• layer0

А для сервера у вас есть:

• DigitalOcean
• Heroku
• Render

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

Заключение

В этой статье мы рассмотрели:

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

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