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

Что такое React.js и Next.js

Сейчас React.js - это один из самых популярных фреймворков, с которым должен уметь работать хотя бы на примитивном уровне любой веб-разработчик. Появился он в 2013 году под покровительством команды Facebook. На базе React были созданы дополнительные фреймворки, призванные расширить функционал оригинала и упростить выполнение некоторых задач. Одним из таких решений является Next.js, увидивший свет в 2019 году.

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

Итак, в React и других фреймворках, на нем основанных, базисом являются:

  1. Компонент - кусок код, определяющий тот или иной элемент на странице сайта или приложения. У них может быть своя иерархия, благодаря чему реализована поддержка вложенности элементов.
  2. Состояние - информация о компоненте, отвечающая за его отображение. Свойства позволяют кастомизировать объект под задачи конкретного проекта.

Классический React можно использовать для разработки любых веб-приложений и сервисов, чей функционал не выходит за рамки SPA, то есть одностраничника. Конечно, с помощью некоторых “костылей” можно обойти имеющиеся ограничения - на React написано немало и многостраничных сайтов. Однако, мало того, что применение “костылей” не очень удобно в процессе разработки, так еще есть риски негативного влияния на SEO-продвижение и ранжирование сайта в выдачи поисковых систем.

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

Основные особенности фреймворка Next.js

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

  1. Server Side Render (далее SSR) - это добавленный инструмент для взаимодействия с серверной частью проекта. Позволяет получить и настроить доступ ко всем необходимым данным на стороне сервера, в том числе и live-server, когда изменения в коде отображаются на странице в режиме реального времени. Этот инструмент позволяет веб-страницам загружаться за меньший промежуток времени, плюс делает работу со стороны пользователя более удобной за счет улучшения скорости отклика.
  2. Улучшенная поисковая оптимизация проектов. Отчасти это заслуга SSR, так как более лучшая работа с серверной частью дает преимущество в SEO-оптимизации. Поисковые системы лучше ранжируют сайты, у которых более быстрый отклик, а SSR как раз способствует более быстрой загрузке страниц.
  3. Возможность редактирования тега <head>. В React.js этот тег не поддавался редактирования, а ведь он является основной мета-составляющей сайта, которая способствует продвижению сайта в выдаче поисковых систем.

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

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

  • Загрузка приложений происходит значительно быстрее, чем аналогов, разработанных на чистом React. Это достигается благодаря встроенному рендерингу на сторону сервера.
  • Есть поддержка функции экспорта статических сайтов.
  • Очень легко освоить, если вы ранее работали с фреймворком React.js.
  • Предусмотрено автоматическое разделение кода для страниц.
  • Упрощено создание внутренних API-интерфейсов и конечные API-точки. Это возможно благодаря наличию встроенных API-маршрутов.
  • Есть поддержка маршрутизации страниц и файлов CSS, JSX и TypeScript.
  • Имеются собственные плагины для работы именно с Next.js. Их наличие позволяет адаптировать рабочую среду полностью под ваши запросы.
  • Поддерживается большинство сторонних плагинов для React.js. Они будут корректно работать и с Next.js.
  • Логика работы с компонентами и свойствами практически не отличается от подобной в React.js.

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

Работа с Next.js

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

Установка и подключение Next.js к проекту

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

Установка же самого Next.js и подключение его к проекту происходит по следующей пошаговой инструкции:

1. Создать проект лучше всего через терминал, используя команду yarn create next-app app-name. Если требуется поддержка TypeScript, то дополнительно к этой команде требуется прописать --typescript.

2. Теперь установите зависимости. Это делается с помощью данной команды: yarn add next react react-dom.

3. Откройте файл package.json. Там нужно обновить блок “scripts”, прописав там следующий блок:

"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}

4. Теперь можно снова вернуться к терминалу. Туда пропишите команду yarn dev для запуска проекта.

Основные элементы

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

Стартовая страница Next.js

Работа со страницами

Все страницы в Next.js представлены в виде React-компонентов, поэтому взаимодействие с ними производится по похожему принципу. Каждая страница имеет ассоциацию с определенным маршрутом по названию. Собственно, страницы часто используются не как отдельные элементы сайта, а как компоненты конструкции. Например, к странице “О нас” может быть подключено несколько таких элементов.

Это позволяет делать динамические маршруты, например, для страницы, расположенной по адресу pages/about[id] адрес будет динамическим. Значит, она будет доступна по адресам about/1, about/2 и далее по аналогии. Динамическая адресация позволяет добиться лучшей производительности, а оно в свою очередь влияет на SEO-продвижение сайта.

Предварительный рендеринг

У Next.js предусмотрено две формы предварительного рендеринга: static generation - SSG и server-side rendering - SSR.

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

Чтобы сгенерировать страницу по форме SSG, пропишите следующий кусок кода:

export default function About() {
return <div>О нас</div>
}

В итоге вы получите пустую страницу без данных, где будет только блок с надписью “О нас”.

Если требуется сгенерировать страницу с уже заданными данными, то тут есть два варианта:

  • Использовать метод getStaticProps, если контент страницы будет зависеть от внешних данных.
  • Использовать метод getStaticPaths, если контент сами пути страниц зависят от внешних данных. Правда, данный метод часто используется в связке с getStaticProps.

Форма обработки SSR предназначена для рендеринга страницы со стороны сервера. Отличительной особенностью является использование асинхронной функции getServerSideProps. Она должна быть прописана всегда при вызове страницы по такой форме.

Технические подробности функций getStaticProps

Выше были рассмотрены вкратце функции, используемые в процессе рендеринга. Отдельно стоит рассмотреть контекст их использования в проекте:

  • getStaticProps не может использовать определенные данные из запроса, например, строки запроса или HTTP-заголовок. Это обусловлено тем, что функция запускается непосредственно во время сборки проекта;
  • getStaticProps предназначена только для запуска на стороне сервера. Использовать ее для обращения к локальным и внутренним путям нельзя;
  • getStaticProps производит генерацию файлов формата HTML и JSON. Разработчиком используется только первый файл, в то время как второй часто игнорируется. Однако удалять его из проекта не рекомендуется, так как он содержит результаты выполнения функции и используется на стороне клиента для формирования маршрутов компонентов;
  • getStaticProps допускается к использованию только в контексте компонента-страницы. Все данные для рендеринга должны быть доступны, поэтому и было наложено такое ограничение;
  • getStaticProps должна вызываться при каждом запросе в режиме разработки.

Встроенная поддержка CSS

Next.js поддерживает добавление как локальных, так и глобальных стилей, которые будут применяться ко всему проекту. Глобальные стили легко добавляются с помощью команды import ‘./style.css’. Они автоматически будут применяться ко всем страницам и компонентам в приложении. Чтобы избежать возможных конфликтов, категорически не рекомендуется выполнять импорт где-либо кроме pages/_app.js, то есть основного файла веб-приложения.

Примерно глобального импорта CSS в проект на Next.js

Добавление стилей на уровне компонента производится посредством CSS-модулей. Импортируемые файлы должны иметь название соответствующего вида: style.module.css. Такой модуль будет импортирован как объект с ключами, которые являются названиями соответствующих классов.

Пример импорта модуля CSS

Next.js также поддерживает не только CSS, но и препроцессоры SASS и SCSS, правда, только на уровне компонентов. Глобальное подключение возможно только для файлов на чистом CSS. Чтобы проводить автоматическую компиляцию SASS в CSS прямо в проекте, требуется сделать установку SASS. Используйте эту команду в терминале: yarn add sass.

Заключение

Фреймворк Next.js пускай и “произошел” от React.js имеет по сравнению с ним определенные различия. Он более удобен, особенно, если речь идет о многостраничных динамических проектах. Разработчики, которые освоили React на базовом уровне, смогут без проблем перейти на Next. Однако этот фреймворк сравнительно молодой и пока используется нечасто. Это может создавать некоторые проблемы для новичков, так как в русскоязычном пространстве интернета профессиональных статей, посвященных Next.js не так много, а о формировании сообщества пока говорить вообще не приходится. В англоязычном сегменте интернета профессиональной информации больше, но это преимущественно документация.