Next.js - это фреймворк React для рендеринга на стороне сервера., который его создатели представляют в виде единого командного инструментария с нулевой конфигурацией для приложений React.
Этот кадр предоставляет общую структуру, которая позволяет легко создавать интерфейсное приложение React и прозрачно управляет рендерингом на стороне сервера. Next.js версии 9.3 был выпущен в понедельник с новыми функциями и некоторыми улучшениями, из которых мы сможем найти возможность создавать статические сайты в качестве основной новинки.
Что нового в Next.js 9.3?
С выпуском Next.js 9.0, фреймворк представил концепцию статической автоматической оптимизации. Когда страница не имеет требований к блокировке восстановление данных, например getInitialProps, будет автоматически отображаться в HTML как только он будет построен.
Бывают и другие случаи, когда вы можете захотеть создать страницу в статическом HTML во время компиляции, даже с требованиями блокировки извлечения данных. Это, например, случай с маркетинговыми страницами. на базе системы управления контентом (CMS).
Next.js 9.3 представляет два новых метода восстановления данных: getStaticProps и getServerSideProps.
Эти новые методы у них много преимуществ перед моделью getInitialPropsпоскольку существует четкое различие между тем, что станет SSG (генерация статической стороны) и SSR (рендеринг на стороне сервера). Это дополнения к API.
Все новые функции обратно совместимы и могут быть приняты постепенно. Амортизация отсутствует, и getInitialProps продолжает нормально работать. Добавлен параметр getStaticPaths для получения динамической маршрутизации.
- getStaticProps: позволяет получать данные при построении;
- getStaticPaths - Укажите динамическую маршрутизацию на основе данных;
- getServerSideProps: позволяет получать данные для каждого запроса.
Еще одно изменение, которое выделяется из этой новой версии, - это поддержка режима предварительного просмотра. Представляем getStaticProps в Next.js открывает новые возможности, например, использование возможностей рендеринга Next.js по запросу при определенных условиях.
Например, при предварительном просмотре черновика В CMS вы захотите пропустить статический рендеринг и отображать страницу по запросу с черновиком содержимого вместо опубликованного контента. Вы хотите, чтобы Next.js пропускал статическую сборку только в этом конкретном случае. По словам команды Next.js, режим предварительного просмотра позволяет это сделать.
Режим предварительный просмотр позволяет пользователям пропустить созданную страницу статически вернуть по запросу (SSR) черновик страницы, например из CMS. Однако это не ограничивается некоторыми системами CMS. Режим предварительного просмотра напрямую интегрируется с getStaticProps и getServerSideProps, поэтому его можно использовать с любым типом решения для восстановления данных.
В Next.js 9.2 добавлена поддержка встроенного CSS, но в Next.js 9.3 добавлена поддержка Sass. Поддерживаются глобальные таблицы стилей и модули CSS, а также встроенный CSS. Next.js теперь поддерживает модули CSS с файлами Sass используя соглашение об именах файлов [имя] .module.scss. В отличие от ранее доступной поддержки в Next.js 5+ с next-sass, глобальные модули Sass и CSS теперь могут сосуществовать.
Модули CSS позволяет вам управлять Sass локально, автоматически создавая уникальные имена классов.
С версией 9.0 из Next.js, была страница, которая не была автоматически отображена в HTML статические: 404 стр.
Основная причина этого заключается в том, что страница с ошибкой, отправляющая 404, обрабатывалась больше, чем 404. Например, она также обрабатывала ошибки. Поскольку 404 страницы отображаются для несуществующих путей, рендеринг страницы по запросу может привести к более высоким затратам и большей нагрузке сервер. Framework версии 9.3 улучшает ситуацию и предлагает автоматическую статическую оптимизацию на 404 страницы.
Теперь, когда ваш запрос не включает настраиваемую страницу error.js, файл Next.js автоматически генерирует страницу 404 статически и использует его, когда необходимо обслужить 404. Это происходит автоматически и никаких изменений не требуется.
Вы также можете настроить эту страницу. Чтобы заменить страницу 404 по умолчанию, вы можете создать файл 404.js.
Если вы хотите узнать об этом больше, вы можете проконсультироваться по следующей ссылке.