Часто при разработке приложений на базе React можно столкнуться с трудностями. Например, иногда контент долго отображается на стороне пользователя или возникают ошибки маршрутизации. Устранить эти и другие недочёты React можно с помощью фреймворка Next.js. В статье рассмотрим его особенности и преимущества, а также дадим пошаговый план по созданию проектов.
Что такое Next.js и для чего он нужен
Next.js — это фреймворк для разработки веб-приложений на базе React. Компоненты React используются для построения пользовательских интерфейсов, а Next.js — для дополнительных функций и оптимизации.
Фреймворк предоставляет структуру и инструменты, которые помогают создавать быстрые, SEO-дружелюбные и масштабируемые веб-приложения. Благодаря этому разработка ПО становится менее хаотичной, а финальный продукт получается более стабильным. Также при проектировании приложений можно сосредоточиться на бизнес-логике, а не решать рутинные задачи и устранять ошибки.
Фреймворк относительно молодой: он вышел в 2016 году. При этом его почти сразу заметили и оценили крупные компании, такие как Google, Netflix, Uber и TikTok.
Next.js добавляет React такие возможности:
- Рендеринг на сервере (SSR). Страницы могут формироваться на сервере ещё до загрузки JavaScript. Это ускоряет первый показ страницы и улучшает SEO: такая возможность особенно важна для интернет-магазинов, блогов и сервисов с публичным контентом. Веб-приложение выглядит динамичным, но остаётся быстрым и предсказуемым.
- Генерация статических страниц (SSG). Фреймворк умеет заранее собирать страницы в HTML-файлы. Они хранятся как статические файлы, и сервер отдаёт их моментально.
- Встроенный роутинг (маршрутизация). С Next.js не нужно подключать и настраивать внешние библиотеки маршрутизации. Фреймворк сам обрабатывает переходы, предварительную загрузку и оптимизацию страниц: это делает навигацию плавной и быстрой. Иными словами, не нужно настраивать роутинг вручную.
- Оптимизация изображений. Next.js подбирает нужный формат, меняет размер в зависимости от экрана и предотвращает скачки вёрстки. В результате страницы с иллюстрациями загружаются быстрее, и улучшается пользовательский опыт.
- API-маршруты внутри проекта. Можно встроить минимальный бэкенд прямо в проект. Это удобно для форм, работы с базами данных и интеграций.
Кому пригодится фреймворк Next.js
Кто чаще всего пользуется фреймворком:
- Начинающие веб-разработчики. Next.js помогает стартовать без погружения в сложные настройки. В проекте сразу есть маршрутизация, оптимизация, работа с данными и понятная структура. Благодаря этому можно быстрее создать собственный проект и увидеть результат, а также понять, как устроены современные веб-приложения. Все это в том числе позволит собрать первое портфолио.
- Разработчики, которые используют React. Фреймворк превращает набор инструментов React в систему, в которой всё взаимосвязано и продумано. Можно меньше времени тратить на настройку и больше на разработку функций. Проекты становятся быстрее, а код — более структурированным.
- Команды, создающие коммерческие проекты. Next.js удобен для стартапов и компаний, которым важно быстро выводить новые функции и при этом поддерживать высокую производительность. Он хорошо работает на реальном трафике, масштабируется и поддерживает разные режимы рендеринга: это помогает строить гибкую архитектуру.
- SEO-специалистам. SEO-дружелюбность, быстрая загрузка и стабильность — ключевые особенности Next.js для e-commerce, каталогов и блогов. Так, благодаря SSR и SSG страницы индексируются лучше, контент отображается быстрее, а пользователи не уходят к конкурентам из-за долгой загрузки.
Создаём проект с помощью Next.js
Пошаговая инструкция, как использовать фреймворк Next.js в работе.
Установка Node.js
Next.js работает внутри среды Node.js — программы, которая позволяет запускать JavaScript вне браузера.
Чтобы проверить наличие Node.js, откройте терминал (командную строку) и введите node-v. Если появится версия, например, 18.17.0, значит, всё в порядке.
А если увидите ошибку — нужно установить Node.js с официального сайта.
Создание проекта
Next.js поставляется с удобной утилитой, которая разворачивает готовый каркас проекта. Это похоже на шаблон, где уже настроены все нужные папки и файлы.
Команда для создания проекта: npx create-next-app@latest my-next-app:
- npx — утилита для запуска пакетов из npm (менеджер пакетов Node.js).
- create-next-app@latest — инструмент для создания приложения, всегда последней версии.
- my-next-app — название вашего проекта и папки. Можете дать ему любое имя.
После запуска появится небольшая анкета, где нужно выбрать нужные пункты. На что стоит обратить внимание:
- TypeScript. Это надстройка над JavaScript, которая помогает избегать ошибок.
- ESLint. Инструмент для проверки качества кода.
- Tailwind CSS. Популярный и простой фреймворк для стилей.
- src/ directory. Помещает код в отдельную папку src и упорядочивает его.
- App Router. Новая модель маршрутизации в Next.js.
Чтобы упростить процесс разработки, стоит отметить галочкой эти пункты в анкете.
Запуск проекта
Перейдите в папку проекта: cd my-next-app. Теперь можно запустить сервер разработки: npm run dev. Через пару секунд проект откроется по адресу: http://localhost:3000. Это локальный сайт, который работает только на компьютере разработчика. Но именно на нём вносятся правки, пишется код и тестируется интерфейс.
Состав проекта
При создании проекта с помощью Next.js автоматически формируется структура папок. Вот некоторые из них:
- app/ или pages/ — папка со страницами. Файлы, которые станут страницами сайта. Например, app/page.js — главная страница. В старых версиях используется папка pages, в новых — app. Обе опции правильные, но App Router — это современный способ.
- public/ — статические файлы. Здесь хранятся картинки, иконки, файлы, которые нужно передавать в неизменном виде.
- styles/ — стили. CSS-файлы, которые отвечают за внешний вид сайта.
- package.json — список зависимостей. В нём указаны установленные библиотеки и доступные скрипты.
Полный список элементов есть в документации Next.js.
Создание первой страницы
Откройте файл app/page.js. Вы увидите готовый код. Удалите всё содержимое этого файла и замените его на такой шаблон:
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Главная',
};
export default function HomePage() {
return (
<div className="p-8">
<h1 className="text-3xl font-bold text-blue-600">Добро пожаловать на мой сайт!</h1>
<p className="mt-4 text-lg">Это моя первая страница на Next.js. Это так просто!</p>
<button className="mt-6 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
Кнопка, которая пока ничего не делает
</button>
</div>
);
}
Сохраните файл: можно использовать комбинацию Ctrl+S или Cmd+S. Вернитесь в браузер на http://localhost:3000. Страница должна мгновенно обновиться и отобразить ваш новый текст и кнопку.
В результате появился функциональный React-компонент HomePage. В нём использовали классы из Tailwind CSS для стилизации и сделали так, чтобы во вкладке браузера отображалось «Главная».
Создание второй и последующих страниц
Для примера рассмотрим, как создать ссылку «О компании». Для этого в папке src/app создайте новую папку с именем about. Внутри неё сформируйте файл с именем page.tsx. Добавьте такой код:
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'О компании',
};
export default function AboutPage() {
return (
<div className="p-8">
<h1 className="text-3xl font-bold text-purple-600">О компании</h1>
<p className="mt-4">Мы лучшие в своем деле! Наш сайт построен на Next.js.</p>
</div>
);
}
Сохраните файл. Теперь у вас есть страница по адресу http://localhost:3000/about. Перейдите по этому адресу и убедитесь, что всё работает исправно. По аналогии с разделом «О компании» можно создать и другие страницы сайта.
Создание ссылок внутри проекта
Теперь добавим ссылку с главной страницы на страницу «О компании». Для этого вернитесь в файл src/app/page.tsx. Импортируйте компонент Link из Next.js для навигации и добавьте ссылку. Обновленный код для src/app/page.tsx:
import { Metadata } from 'next';
import Link from 'next/link';
export const metadata: Metadata = {
title: 'Главная',
};
export default function HomePage() {
return (
<div className="p-8">
<h1 className="text-3xl font-bold text-blue-600">Добро пожаловать на мой сайт!</h1>
<p className="mt-4 text-lg">Это моя первая страница на Next.js. Это так просто!</p>
<button className="mt-6 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
Кнопка, которая пока ничего не делает
</button>
<div className="mt-8">
<Link
href="/about"
className="text-blue-500 hover:text-blue-800 underline"
>
Узнать о нас больше →
</Link>
</div>
</div>
);
}
Сохраните файл. Теперь на главной странице есть ссылка, которая плавно переводит на страницу «О компании».
Сборка проекта для запуска на сервере
Выше мы рассмотрели, как работать в «режиме разработки». Чтобы выложить сайт в интернет, его нужно «собрать» — оптимизировать и подготовить все файлы:
- В терминале нажмите Ctrl+C, чтобы остановить сервер.
- Выполните команду: npm run build. Она создаст оптимизированную версию вашего приложения в папке .next.
- Теперь можно запустить финальную версию сайта: npm start.
- Сайт снова доступен по адресу http://localhost:3000, но теперь он работает так, будто находится на реальном хостинге.
Next.js: коротко о главном
- Next.js — это полноценный фреймворк для React. Он предлагает готовые решения для маршрутизации, рендеринга, стилизации и сборки. Это позволяет разработчику сосредоточиться на логике приложения, а не на сложной настройке.
- Главная задача Next.js — создание высокопроизводительного и дружелюбного ПО. В отличие от обычных React-приложений, где контент загружается в браузере, Next.js может преобразовать код на сервере или сформировать страницу на этапе сборки, а пользователь получит готовый HTML. Благодаря этому страницы загружаются быстрее, а поисковые боты могут корректно проиндексировать контент.
- Фреймворк подходит для самых разных проектов: от простых статических сайтов и маркетплейсов до сложных интернет-магазинов и полнофункциональных SaaS-платформ.
