Введение
Добро пожаловать в документацию Next.js!
Что такое Next.js?
Next.js — это фреймворк React для создания полнофункциональных веб-приложений. Вы используете React-компоненты для построения пользовательского интерфейса, а Next.js — для дополнительных возможностей и оптимизаций.
Под капотом Next.js также абстрагирует и автоматически настраивает инструменты, необходимые для работы с React, такие как сборка, компиляция и другие. Это позволяет сосредоточиться на разработке приложения вместо траты времени на конфигурацию.
Независимо от того, являетесь ли вы индивидуальным разработчиком или частью большой команды, Next.js поможет вам создавать интерактивные, динамичные и быстрые React-приложения.
Основные возможности
Некоторые ключевые возможности Next.js включают:
| Возможность | Описание |
|---|---|
| Роутинг (Routing) | Файловая система маршрутизации, построенная на основе серверных компонентов (Server Components), с поддержкой макетов, вложенных маршрутов, состояний загрузки, обработки ошибок и многого другого. |
| Рендеринг (Rendering) | Рендеринг на стороне клиента (Client-side Rendering) и сервера (Server-side Rendering) с использованием клиентских и серверных компонентов. Дополнительная оптимизация с помощью статического (Static Rendering) и динамического рендеринга (Dynamic Rendering) на сервере. Потоковая передача данных (Streaming) на рантаймах Edge и Node.js. |
| Получение данных (Data Fetching) | Упрощённое получение данных с помощью async/await в серверных компонентах и расширенный API fetch для мемоизации запросов, кэширования данных и их повторной валидации. |
| Стилизация (Styling) | Поддержка различных методов стилизации, включая CSS Modules, Tailwind CSS и CSS-in-JS |
| Оптимизации (Optimizations) | Оптимизация изображений, шрифтов и скриптов для улучшения Core Web Vitals и пользовательского опыта. |
| TypeScript | Улучшенная поддержка TypeScript с более строгой проверкой типов, эффективной компиляцией, а также пользовательскими плагинами и проверщиками типов. |
Как пользоваться документацией
В левой части экрана вы найдёте навигационное меню документации. Страницы документации организованы последовательно — от базовых к продвинутым — чтобы вы могли следовать им шаг за шагом при разработке приложения. Однако вы можете читать их в любом порядке или переходить сразу к нужным разделам.
В правой части экрана отображается оглавление, которое упрощает навигацию по разделам страницы. Если вам нужно быстро найти страницу, воспользуйтесь строкой поиска вверху или горячими клавишами (Ctrl+K или Cmd+K).
Чтобы начать, ознакомьтесь с руководством по установке.
App Router vs Pages Router
В Next.js есть два разных маршрутизатора: App Router и Pages Router. App Router — это новый маршрутизатор, позволяющий использовать последние возможности React, такие как серверные компоненты (Server Components) и потоковую передачу данных (Streaming). Pages Router — это оригинальный маршрутизатор Next.js, который позволяет создавать серверные React-приложения и продолжает поддерживаться для старых приложений.
В верхней части боковой панели вы заметите выпадающее меню, позволяющее переключаться между функциями App Router и Pages Router. Поскольку для каждого маршрутизатора есть уникальные возможности, важно следить за тем, какая вкладка выбрана.
Хлебные крошки в верхней части страницы также указывают, какую документацию вы просматриваете — для App Router или Pages Router.
Необходимые знания
Хотя наша документация рассчитана на начинающих, нам важно установить базовый уровень, чтобы сосредоточиться на функциональности Next.js. Мы будем предоставлять ссылки на соответствующую документацию при введении новых концепций.
Для максимально эффективного использования документации рекомендуется иметь базовое понимание HTML, CSS и React. Если вам нужно освежить знания по React, ознакомьтесь с нашим курсом Next.js Foundations, который познакомит вас с основами.
Доступность
Для оптимальной доступности при использовании экранного диктора мы рекомендуем Firefox с NVDA или Safari с VoiceOver.
Присоединяйтесь к сообществу
Если у вас есть вопросы по Next.js, вы всегда можете задать их нашему сообществу на GitHub Discussions, Discord, Twitter и Reddit.