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

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

Next.js против React

React, который дебютировал в 2013 году, более известен, чем Next.js. Но молодой фреймворк, выпущенный в 2016 году, становится все более популярным, с более чем 100 тысяч звезд на GitHub на март 2023 года и миллионами еженедельных загрузок npm. Давайте посмотрим, как две технологии сравниваются в четырех основных областях:

• Скорость разработки: Next.js предоставляет «из коробки» функции, которые упрощают процесс разработки сложного приложения на React. С появлением собственного компилятора в Next.js 12 фреймворк также увеличил скорость сборки. По сравнению с React, Next.js сокращает время, которое инженер должен ждать, чтобы код обновился, повышая эффективность разработчиков.
• Загрузка данных и скорость загрузки: Next.js может обходить дерево React и запрашивать данные на сервере, что позволяет предзагружать данные страницы. Это часто приводит к ускорению времени загрузки приложения для страниц Next.js, по сравнению со страницами, написанными на чистом React.
• Рендеринг и SEO: Next.js предлагает предварительный рендеринг, в то время как React использует клиентский рендеринг. Предварительно отрендеренные страницы позволяют эффективно использовать стратегии SEO, которые сложно достичь в простом React приложении.
• Маршрутизация: Next.js предоставляет структурированную, предопределенную файловую систему для маршрутизации. Его система предлагает меньшую гибкость по сравнению с различными библиотеками React (например, React Router), но упрощает настройку страниц и маршрутизацию.

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

Рендеринг в Next.js

Рендеринг – это процесс, который преобразует код React в HTML, который затем браузер отображает в качестве пользовательского интерфейса страницы. Next.js предоставляет три метода рендеринга – клиентский рендеринг (CSR), серверный рендеринг (SSR) и генерацию статических сайтов (SSG) – и дополнительный бонус инкрементальной статической регенерации (ISR). ISR объединяет серверный рендеринг с полу-статическим механизмом кэширования, который снижает нагрузку на сервер и обеспечивает скорости, аналогичные тем, которые достигаются при работе со статическим сайтом.

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

Клиентский рендеринг

Клиентский рендеринг является типичным для простых приложений на React. Этот метод генерирует HTML страницы на стороне клиента. Другими словами, рендеринг происходит в браузере пользователя, и JavaScript с устройства пользователя генерирует HTML. Пользовательский интерфейс появляется после завершения рендеринга, когда веб-страница также интерактивна (т.е. гидратирована).

CSR возможен для компонентов Next.js с использованием useEffect или useSWR React.

Серверный рендеринг

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

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

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

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

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

Оптимизация поисковых систем Next.js

Быстродействие Next.js и возможность предварительной отрисовки всех страниц сайта позволяет поисковым системам быстро и легко обходить и индексировать сайт, улучшая SEO. SEO критичен для многих бизнесов и сайтов, потому что сайты с лучшим SEO появляются выше в результатах поиска. Пользователи чаще кликают на сайты с более высоким рейтингом, причем верхний результат имеет средний процент переходов 27,6%, что в десять раз больше, чем у десятого результата – 2,4%.

Веб-сайты React с большим количеством контента и производительностью JavaScript кода, используемого для отрисовки, сталкиваются с проблемами SEO при работе с Google crawling и индексацией.

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

Начало работы с Next.js

Теперь мы рассмотрим основы настройки, маршрутизации, страниц и навигации Next.js, чтобы вы могли воспользоваться преимуществами предварительной отрисовки и SEO. Прежде чем начать наш учебник по Next.js, убедитесь, что у вас установлена последняя версия Node.js на вашей системе. Вы можете проверить версию Node.js на вашем компьютере с помощью node --version.

Существует два способа настройки проекта Next.js:

• Автоматическая настройка с предопределенными конфигурациями
• Ручная настройка и конфигурации

Мы будем следовать автоматической настройке, чтобы начать работу над нашим проектом более легко. Инструмент CLI create-next-app управляет автоматической настройкой и позволяет быстро создавать приложения. Давайте создадим наш проект с встроенной поддержкой Next.js для TypeScript, строгим синтаксическим надмножеством JavaScript, чтобы обеспечить правильную типовую структуру:

npx create-next-app@latest --typescript

create-next-app попросит ввести название вашего приложения. Название проекта должно состоять из строчных букв и использовать дефисы вместо пробелов. Например, я назвал свое приложение next-js-tutorial. После завершения настройки вы увидите уведомление об успешном завершении в вашем терминале.

В нашем новом проекте мы можем увидеть, что Next.js требует жесткой системы файловой структуры:

• pages и styles веб-сайта организованы в своих собственных папках.
• API хранятся в папке pages/api.
• Публичные доступные ресурсы хранятся в папке public.

Структура файлов для проектов Next.js

Маршрутизация и страницы Next.js

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

Мы определяем все маршруты в папке pages. Файл pages/index.tsx по умолчанию является точкой входа в приложение, где мы определяем пользовательские шрифты, коды отслеживания приложений и другие элементы, требующие глобального доступа.

Есть два способа добавления новых маршрутов:

• Добавьте файл, заканчивающийся на .tsx непосредственно в pages.
• Добавьте файл index.tsx в новую подпапку pages (index файлы автоматически маршрутизируются в корень каталога).

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

Маршруты страниц

Мы можем добавить базовый маршрут страницы, например, about-us, с файлом about-us.tsx:

|— pages
|    |— _app.tsx
|    |— about-us.tsx
|    |— api
|    |— index.tsx

Или мы можем использовать файл index.tsx в папке pages/about-us:

|— pages
|    |— _app.tsx
|    |— about-us
|    |    |— index.tsx
|    |— api
|    |— index.tsx

Добавьте маршрут страницы about-us.tsx в свой проект.

import styles from '../styles/Home.module.css'

const AboutUs: NextPage = () => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>
          About Us Example Page
        </h1>
      </main>
    </div>
  )
}

export default AboutUs

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

Вложенные маршруты

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

|— pages
|    |— _app.tsx
|    |— api
|    |— index.tsx
|    |— parent
|    |    |— child.tsx

Мы определяем вложенный маршрут /parent/child с папкой parent и вложенной папкой или файлом child (в нашем примере показан файл).

Динамические маршруты

Динамические маршруты позволяют макетам реагировать на изменения в реальном времени в случаях, когда предопределенные пути не подходят. Допустим, мы хотим создать маршрут /product/[productId] (т.е. при нажатии на продукт раскроется его компонент). Предположим, что productId – это переменная, доступная в нашем определении Product, мы можем легко добавить динамический маршрут, создав папку product и обернув нашу страницу productId в квадратные скобки:

|— pages
|    |— _app.tsx
|    |— api
|    |— index.tsx
|    |— product
|    |    |— [productId].tsx

Таким образом, маршрут product/testId будет иметь установленные параметры запроса (т.е. productId установлен на testId).

Наконец, также возможно комбинировать техники маршрутизации. Например, мы можем создать вложенный динамический маршрут pages/post/[postId]/[comment].tsx.

Навигация Next.js

Next.js использует свои собственные настраиваемые компоненты Link вместо тега HTML «<a>», когда переход между клиентскими страницами, чтобы позволить Next.js оптимизировать навигацию и предварительную загрузку данных. Операция Link работает аналогично тегу «<a>» и использует href в качестве маршрута для открытия. Вы должны использовать свойство passHref для принудительного передачи значения маршрута Link дочерним компонентам (т.е. при использовании настраиваемых стилей компонентов).

Основное преимущество использования Link вместо тега «<a>» заключается в том, что он предварительно загружает данные в фоновом режиме, когда пользователь наводит курсор на ссылку или находится рядом с ней. Это делает содержимое более доступным для обработки клиентом, обеспечивая улучшенную производительность приложения. Вы все еще можете использовать тег «<a>» в Next.js при ссылках на внешние страницы за пределами приложения.

Чтобы перейти на страницу “О нас” из чертежа проекта Next.js, откройте основной файл приложения pages/index.tsx. Сначала мы импортируем компонент Link из next/link, а затем добавляем связанный параграф ниже компонента <h1>:

<p className={styles.description}>
  Here's our example <Link href="/about-us">About Us</Link> page
</p>

Теперь мы можем запустить наше приложение с помощью командной оболочки npm run dev, посетить [http://localhost:3000] (http://localhost:3000/), и увидеть, что наш добавленный текст и страница “О нас” работают по адресу [http://localhost:3000/about-us] (http://localhost:3000/about-us) (маршрут, возвращаемый после нажатия «О нас»).

Ускорение веб-приложений с помощью Next.js

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