Next.js to framework React do renderowania po stronie serwera, które jego twórcy przedstawiają jako zerowy zestaw narzędzi z pojedynczym poleceniem dla aplikacji React.
Ta rama zapewnia wspólną strukturę, która pozwala na łatwe tworzenie aplikacji front-end React i przejrzyście zarządza renderowaniem po stronie serwera. W poniedziałek wypuszczono Next.js w wersji 9.3 z nowymi funkcjami i kilkoma ulepszeniami, z których główną nowością jest możliwość generowania statycznych stron.
Co nowego w Next.js 9.3?
Wraz z wydaniem Next.js 9.0, Framework wprowadził koncepcję statycznej automatycznej optymalizacji. kiedy strona nie ma wymagań dotyczących blokowania odzyskiwanie danych, takie jak getInitialProps, automatycznie wyrenderuje się w HTML raz został zbudowany.
Istnieją inne przypadki, w których możesz chcieć utworzyć stronę w statycznym formacie HTML w czasie kompilacji, nawet z blokującymi wymaganiami dotyczącymi wyodrębniania danych. Tak jest na przykład w przypadku stron marketingowych obsługiwany przez system zarządzania treścią (CMS).
Next.js 9.3 wprowadza dwie nowe metody odzyskiwania danych: getStaticProps i getServerSideProps.
Te nowe metody mają wiele zalet w porównaniu z modelem getInitialPropsponieważ istnieje wyraźne rozróżnienie między tym, co stanie się SSG (Static Side Generation) i SSR (Server Side Rendering). Są to dodatki API.
Wszystkie nowe funkcje są wstecznie kompatybilne i można przyjąć stopniowo. Nie ma amortyzacji, a getInitialProps nadal działa normalnie. Dodano parametr getStaticPaths w celu uzyskania dynamicznego routingu.
- getStaticProps: umożliwia uzyskanie danych podczas budowy;
- getStaticPaths - określa routing dynamiczny oparty na danych;
- getServerSideProps: umożliwia pobranie danych dla każdego żądania.
Kolejną zmianą, która wyróżnia się na tle nowej wersji, jest obsługa trybu podglądu. Przedstawiamy getStaticProps w Next.js otwiera nowe możliwości, takie jak korzystanie z możliwości renderowania Next.js na żądanie w określonych warunkach.
Np. podczas podglądu wersji roboczej W CMS będziesz chciał pominąć statyczne renderowanie i renderuj stronę na żądanie z wersją roboczą zamiast publikowanych treści. Chcesz, aby Next.js pomijał kompilację statyczną tylko w tym konkretnym przypadku. Zdaniem zespołu Next.js tryb podglądu pozwala na to.
Tryb podgląd umożliwia użytkownikom pominięcie wygenerowanej strony statycznie, aby zwrócić na żądanie (SSR) wersję roboczą strony, na przykład z CMS. Jednak nie ogranicza się to do niektórych systemów CMS. Tryb podglądu integruje się bezpośrednio z getStaticProps i getServerSideProps, dzięki czemu można go używać z dowolnym rozwiązaniem do odzyskiwania danych.
Next.js 9.2 dodano wsparcie dla wbudowanego CSS, ale Next.js 9.3 dodał obsługę Sassa. Obsługiwane są globalne arkusze stylów i moduły CSS, a także osadzone CSS. Next.js obsługuje teraz moduły CSS z plikami Sass używając konwencji nazewnictwa plików [nazwa] .module.scss. W przeciwieństwie do wsparcia wcześniej dostępnego w Next.js 5+ z next-sass, globalne moduły Sass i CSS mogą teraz współistnieć.
Moduły CSS pozwala na lokalne zarządzanie Sass przez automatyczne tworzenie unikalnych nazw klas.
W wersji 9.0 z Next.js, była strona, która nie została automatycznie wyrenderowana w formacie HTML statyczna: strona 404.
Głównym powodem tego jest fakt, że strona błędu dostarczająca 404 została obsłużona częściej niż 404. Na przykład obsługiwała również błędy. Ponieważ strony 404 są renderowane w przypadku nieistniejących ścieżek, renderowanie strony na żądanie może prowadzić do wyższych kosztów i większego obciążenia serwer. Framework w wersji 9.3 poprawia rzeczy i oferuje automatyczną optymalizację statyczną dla 404 stron.
Teraz, gdy żądanie nie zawiera niestandardowej strony error.js, plik Next.js automatycznie generuje stronę 404 statycznie i używa go, gdy powinien zostać wyświetlony kod 404. Dzieje się to automatycznie i nie są wymagane żadne zmiany.
Możesz także dostosować tę stronę. Aby zastąpić domyślną stronę 404, możesz utworzyć plik 404.js.
Jeśli chcesz dowiedzieć się więcej na ten temat, możesz skonsultować się poniższy link.