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 режимът за предварителен преглед ви позволява да направите това.
Режимът на preview позволява на потребителите да пропускат генерираната страница статично да върне при поискване (SSR) чернова страница, например от 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 страници се изобразяват за несъществуващи пътища, изобразяването на страницата при поискване може да доведе до по-високи разходи и по-голямо натоварване сървър. Версия 9.3 на Framework подобрява нещата и предлага автоматична статична оптимизация за 404 страници.
Сега, когато заявката ви не включва потребителска страница error.js, файлът Next.js автоматично генерира статично 404 страница и го използва, когато трябва да се сервира 404. Това се случва автоматично и не се изискват промени.
Можете също да персонализирате тази страница. За да замените страницата по подразбиране 404, може да се създаде файл 404.js.
Ако искате да научите повече за това, можете да се консултирате следната връзка.