Введение
Добро пожаловать в документацию Next.js!
Что такое Next.js?
Next.js — это фреймворк React для создания полнофункциональных веб-приложений. Вы используете React-компоненты для построения пользовательских интерфейсов, а Next.js предоставляет дополнительные возможности и оптимизации.
Под капотом Next.js также абстрагирует и автоматически настраивает инструменты, необходимые для работы с React, такие как сборка, компиляция и другие. Это позволяет сосредоточиться на разработке приложения вместо траты времени на конфигурацию.
Независимо от того, являетесь ли вы индивидуальным разработчиком или частью команды, Next.js поможет вам создавать интерактивные, динамичные и быстрые React-приложения.
Основные возможности
Некоторые ключевые возможности Next.js:
| Возможность | Описание |
|---|---|
| Маршрутизация (Routing) | Файловая система маршрутизации, построенная на основе серверных компонентов (Server Components), с поддержкой макетов, вложенных маршрутов, состояний загрузки, обработки ошибок и многого другого. |
| Рендеринг (Rendering) | Рендеринг на стороне клиента и сервера с использованием клиентских и серверных компонентов. Дополнительная оптимизация с помощью статического и динамического рендеринга на сервере в Next.js. Потоковая передача на рантаймах 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, ознакомьтесь с нашим курсом по основам React, который познакомит вас с базовыми концепциями. Затем изучите Next.js, создав приложение-дашборд.
Доступность
Для оптимальной доступности при использовании скринридера мы рекомендуем Firefox с NVDA или Safari с VoiceOver.
Присоединяйтесь к сообществу
Если у вас есть вопросы по Next.js, вы всегда можете задать их нашему сообществу на GitHub Discussions, Discord, Twitter и Reddit.