Экосистема React

Минусы React

сложный для начального изучения
местами слишком гибкий
нет единой структуры проекта
не решает задачи роутинга, настройку сборщика, кодсплитинг, отправку запросов на сервер, управление глобальным состоянием
PureComponent, memo, useMemo, useCallback

Why did you rerender?

Заказчик

+

❤️

=

React самый популярный 😎

jobs.tut.by

headhunter

Какой профит?

проще найти работу
больше ответов на StackOverflow :)
проще найти разработчиков под новый проект и поддерживать проект в дальнейшем
больше комьюнити
самая богатая экосистема

Веб — это сложно 😩

Технологии нужно изучать и применять для решения задач, а не потому что они популярные 👆

Ship

Инфраструктура

Старт проекта

Код должен быть объединен с помощью сборщика, такого как webpack, и преобразован с помощью компилятора, такого как Babel.
Вам необходимо провести оптимизацию, например, разделение кода.
Возможно, вы захотите статически предварительно сгенерировать некоторые страницы для повышения производительности и SEO. Вы также можете использовать рендеринг на стороне сервера или на стороне клиента.
Возможно, вам придется написать код на стороне сервера, чтобы подключить приложение React к хранилищу данных.

Webpack

Роутер

В Next.js страница - это компонент React, экспортированный из файла .js, .jsx, .ts или .tsx в папке pages.

Каждая страница связана с маршрутом на основе имени файла.

Пример: если вы создаете файл pages/about.js, в которой экспортируется компонент React, как показано ниже, он будет будет доступен по адресу /about.

Динамические пути

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)

pages/[username]/settings.js → /:username/settings (/foo/settings)

Динамические пути

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)

pages/[username]/settings.js → /:username/settings (/foo/settings)

Встроенные страницы

pages/_app
pages/_document
pages/404
pages/500

next/link

next/router

Стили

Глобальные стили могут быть импортированы только в pages/_app
Next.js поддерживает CSS модули, используя соглашение об именах файлов [name] .module.scss.
Можно использовать любое существующее решение CSS-in-JS
По умолчанию используются PostCSS плагины Autoprefixer и Cross-browser Flexbox bugs (можно добавлять новые)

Рендериг

CSR (Client-side rendering)

SSR (Server-side rendering)

SSG (Static site generation) ❤️

По умолчанию все страницы используют SSG
Можно использовать любой из подходов для каждой отдельной страницы

getStaticProps - SSG

getServerSideProps - SSR

API роуты

Можно писать backend!

Любой файл внутри папки pages/api сопоставляется

с /api/* и будет рассматриваться как эндпоинт сервера, а не страница.

Эндпоинты не включаются в бандл клиента.

Оптимизации и многое другое...

Next.js самоуверенный фреймворк 🤷

Управление состоянием

Состояние Интерфейса (Client State) — состояние в котором есть смысл только в интерфейсе пользователя, оно нужно для управления интерактивными частями приложения (к примеру, открытие модального окна — modal isOpen)
Кэш Сервера (Server State) — состояние которое размещено на сервере для быстрого доступа к нему на клиенте (к примеру — данные пользователя).