Next.js – это производственный фреймворк для React.
Next.js используется поверх React, расширяя его возможности и оптимизируя процесс разработки: React не обязательно должен работать с Next.js, но Next.js использует React для развертывания приложений.
Этот инструмент был создан компанией Vercel в 2016 году, он быстро завоевал популярность среди разработчиков, благодаря своей гибкости и производительности.
Одним из главных преимуществ Next.js является его способность выполнять предварительную загрузку данных еще до того, как основной JavaScript-файл будет загружен. Благодаря этому отображение страницы происходит быстрее и плавнее с точки зрения пользователя. В то же время, все преимущества и возможности React продолжают работать без потерь.
Ключевые особенности Next.js включают в себя:
встроенный рендеринг (как статический, так и серверный);
поддержку TypeScript;
множество дополнительных инструментов, которые делают разработку более продуктивной.
Преимущества Next.js:
Его легко кодировать – по сравнению с самим React и другими фреймворками, работающими с React, Next.js требует меньше кода. Разработчикам достаточно создать страницу и разместить ссылку на компонент в заголовке, что означает меньше кода, лучшую читаемость и улучшенное управление проектом.
Скорость – Приложения, созданные с помощью Next.js, работают быстро благодаря рендерингу на стороне сервера и генерации статики, обеспечивая более разумный способ обработки данных. Рендеринг на стороне сервера будет работать настолько быстро, насколько быстро сервер обрабатывает запросы. Статическая генерация выполняется быстро, поскольку она может обслуживаться из CDN. Встроенные функции оптимизации изображений также повышают производительность.
Быстрый рендеринг – каждое изменение в файле сразу же становится видимым при обновлении страницы. Компонент рендерится на месте, что облегчает слежение за изменениями по мере их внесения.
Встроенный CSS – с Next.Js вы можете импортировать стили CSS из файла JavaScript, чтобы использовать их в строке для более быстрого рендеринга.
Лучшая оптимизация изображений – изображения изменяются в размерах и передаются с использованием лучших, современных форматов, таких как WebP (при этом они открыты для новых форматов), а изображения настраиваются для адаптации к небольшим экранам просмотра.
SEO – Для тех, кто стремится к улучшению SEO, заголовки и ключевые слова для каждой страницы легко создать. Просто используйте компонент featured Head, чтобы разместить их на каждой странице.
Совместимость с ESLint – Разработчики могут использовать ESLint с Next.js, используя “scripts”: { “lint”: “next lint”} . Это так просто.
Простая настройка и развертывание – Next.js использует такие плагины, как Babel, что делает его очень настраиваемым. Развертывание очень простое и интуитивно понятное, что позволяет быстро запускать приложения.
Поддержка API – API сторонних разработчиков могут расширить возможности вашего проекта, а Next.js легко подключается к ним, помогая создавать собственные маршруты API.
Основные концепции и архитектура Next.js.
Для начала будет необходимо создать проект, проще всего это сделать с использованием create-next-app. Вводим в терминале npx create-next-app
В ходе создания нужно будет определиться с конфигурацией проекта:
Переходим в папку с проектом cd next-app
Открываем проект в редакторе кода VS Code code .
Запускаем проект в режиме разработки с помощью команды yarn dev
После чего, в браузере должна запуститься страница с базовым приложением Next.Js:
Роутинг в Next.js
Использование встроенного роутинга в Next.js.
Next.js использует маршрутизацию файловой системы, что означает, что маршруты в приложении определяются тем, как вы структурируете свои файлы.
Создание динамических маршрутов и параметров.
Практическое задание: Создание многостраничного приложения с использованием роутинга в Next.js.
Server Side Rendering (SSR) и статическая генерация страниц
Понятие SSR и статической генерации страниц в Next.js.
Работа с функциями getServerSideProps и getStaticProps.
Практическое задание: Реализация SSR и статической генерации страниц в приложении Next.js.
Работа с формами через react-hook-form
Использование библиотеки react-hook-form для управления формами.
Валидация форм, обработка ошибок и отправка данных.
Практическое задание: Создание формы с использованием react-hook-form в приложении Next.js.
Создание компонентов
Основы создания компонентов в React.
Разделение компонентов на функциональные и классовые.
Практическое задание: Создание компонентов для отображения данных и управления состоянием.
Работа с контекстом
Создание и использование контекста в React.
Передача данных через контекст между компонентами.
Практическое задание: Создание контекста для передачи глобальных данных в приложении.
Встроенные компоненты Next.js
Использование встроенных компонентов Next.js, таких как Head, Image и Link.
Их особенности и применение в приложении.
Практическое задание: Использование встроенных компонентов Next.js для улучшения пользовательского интерфейса.
Стилизация и работа с MUI
Основы стилизации компонентов с помощью MUI.
Использование тем и настройка стилей.
Практическое задание: Создание пользовательской формы с использованием компонентов MUI.
Работа с фейковыми данными с использованием Faker.js
Импорт и использование библиотеки Faker.js для генерации фейковых данных.
Практическое задание: Создание компонента, который использует Faker.js для отображения фейковых данных.
Итог каждого ишью должен быть оформлен в отдельный МР и быть раздеплоен в нетлифай, в комментариях к МР должна быть ссылка на раздеплоенную версию.
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
Next.js
