Next.js - це фреймворк React для візуалізації на стороні сервера, який його творці представляють як нульову конфігурацію єдиного командного набору інструментів для програм React.
Цей кадр забезпечує загальну структуру, яка дозволяє легко створювати інтерфейсний додаток React і прозоро керує візуалізацією на стороні сервера. У понеділок була випущена версія 9.3 Next.js з новими функціями та деякими вдосконаленнями, серед яких основною новинкою може бути можливість створення статичних сайтів.
Що нового в Next.js 9.3?
З виходом Next.js 9.0, фреймворк ввів поняття статичної автоматичної оптимізації. коли Сторінка не вимагає блокування відновлення даних, як getInitialProps, автоматично відображатиметься в HTML як тільки він був побудований.
Є й інші випадки, коли вам може знадобитися зробити сторінку у статичному HTML під час компіляції, навіть із заблокованими вимогами до вилучення даних. Це стосується, наприклад, маркетингових сторінок забезпечується системою управління вмістом (CMS).
Next.js 9.3 представляє два нових методи відновлення даних: getStaticProps та getServerSideProps.
Ці нові методи вони мають багато переваг перед моделлю getInitialPropsОскільки існує чітка різниця між тим, що стане SSG (Static Side Generation) та SSR (Server Side Rendering). Вони є доповненнями API.
Всі нові функції сумісні зі зворотним зв'язком і можуть бути прийняті поступово. Амортизація відсутня, і getInitialProps продовжує працювати нормально. Для отримання динамічної маршрутизації додано параметр getStaticPaths.
- getStaticProps: дозволяє отримувати дані під час будівництва;
- getStaticPaths - Вкажіть динамічну маршрутизацію на основі даних;
- getServerSideProps: дозволяє отримувати дані для кожного запиту.
Ще однією зміною, яка відрізняється від нової версії, є підтримка режиму попереднього перегляду. Представляємо getStaticProps у Next.js відкриває нові можливості, наприклад, використання можливостей візуалізації Next.js за запитом за певних умов.
Наприклад, при попередньому перегляді чернетки У системі управління вмістом ви захочете пропустити статичний візуалізацію та візуалізувати сторінку на вимогу з чорновим вмістом замість опублікованого вмісту. Ви хочете, щоб Next.js пропускав статичну збірку лише в цьому конкретному випадку. За словами команди Next.js, режим попереднього перегляду дозволяє вам це зробити.
Режим попередній перегляд дозволяє користувачам пропускати створену сторінку статично повертати на запит (SSR) чернетку сторінки, наприклад із CMS. Однак це не обмежується певними системами управління вмістом. Режим попереднього перегляду інтегрується безпосередньо з getStaticProps та getServerSideProps, тому його можна використовувати з будь-яким типом рішення для відновлення даних.
Next.js 9.2 додав підтримку вбудованого CSS, але Next.js 9.3 додав підтримку Sass. Підтримуються глобальні таблиці стилів та модулі CSS, а також вбудовані CSS. Next.js тепер підтримує модулі CSS з файлами Sass використовуючи конвенцію про іменування файлів [name] .module.scss. На відміну від раніше доступної підтримки в Next.js 5+ із next-sass, глобальні модулі Sass та CSS тепер можуть співіснувати.
Модулі CSS дозволяє локально керувати Sass, автоматично створюючи унікальні імена класів.
З версією 9.0 з Next.js, була сторінка, яка не відображалася автоматично в HTML статичний: 404 сторінки.
Основна причина цього полягає в тому, що сторінка помилок, яка подає 404, обробляється більше, ніж 404. Наприклад, вона також обробляє помилки. Оскільки 404 сторінки відображаються для неіснуючих шляхів, візуалізація сторінки на вимогу може призвести до більших витрат та більшого навантаження сервер. Версія 9.3 Framework покращує ситуацію та пропонує автоматичну статичну оптимізацію на 404 сторінки.
Тепер, коли ваш запит не включає спеціальну сторінку error.js, файл Next.js автоматично генерує сторінку 404 статично і використовує його, коли має бути подано 404. Це відбувається автоматично, і ніяких змін не потрібно.
Ви також можете налаштувати цю сторінку. Щоб замінити сторінку 404 за замовчуванням, ви можете створити файл 404.js.
Якщо ви хочете дізнатися більше про це, ви можете проконсультуватися за наступним посиланням.