Роутер страниц (Pages Router)

Новый курс по App Router: Вы просматриваете курс по Pages Router. Перейти к новому курсу по App Router.

Для создания полноценного веб-приложения на React с нуля необходимо учитывать множество важных аспектов:

• Код нужно собирать с помощью бандлера, такого как webpack, и преобразовывать с помощью компилятора, например Babel.
• Требуется выполнять оптимизацию для продакшена, например, разделение кода (code splitting).
• Возможно, вы захотите предварительно рендерить некоторые страницы статически для повышения производительности и SEO. Также может потребоваться использовать серверный рендеринг (SSR) или клиентский рендеринг (CSR).
• Возможно, придётся писать серверный код для подключения React-приложения к хранилищу данных.

Эти проблемы может решить фреймворк. Но такой фреймворк должен иметь правильный уровень абстракции — иначе он окажется бесполезным. Кроме того, он должен обеспечивать отличный "опыт разработчика" (Developer Experience), гарантируя, что вам и вашей команде будет комфортно писать код.

Next.js: React-фреймворк

Познакомьтесь с Next.js — React-фреймворком. Next.js предлагает решения для всех перечисленных выше проблем. Но что ещё важнее, он помогает вам и вашей команде избежать распространённых ошибок при создании React-приложений (pit of success).

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

• Интуитивная маршрутизация на основе страниц (с поддержкой динамических маршрутов)
• Предварительный рендеринг, включая статическую генерацию (SSG) и серверный рендеринг (SSR) на уровне отдельных страниц
• Автоматическое разделение кода для ускорения загрузки страниц
• Клиентская маршрутизация с оптимизированным предварительным получением данных (prefetching)
• Встроенная поддержка CSS и Sass, а также совместимость с любыми библиотеками CSS-in-JS
• Среда разработки с поддержкой быстрого обновления (Fast Refresh)
• API-маршруты для создания API-эндпоинтов с помощью Serverless Functions
• Полная расширяемость

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

О данном руководстве

Это бесплатное интерактивное руководство поможет вам начать работу с Next.js.

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

https://next-learn-starter.vercel.app (исходный код)

Данное руководство предполагает базовое знание JavaScript и React. Если вы никогда не писали код на React, сначала пройдите официальное руководство по React.

Если вы ищете документацию, перейдите в раздел документации Next.js.

Присоединяйтесь к обсуждению

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

Давайте начнём!