Dużo nowości w Next.js 11

Next.js 11 został właśnie wydany, a Vercel, firma odpowiedzialna za framework, pisze, że wraz z nowym wydaniem chcą dalej tworzyć środowisko, w którym jak najlepiej się programuje. Nowości, które realizują tę misję, to m.in. krótszy czas startu dla szybszego kodowania oraz możliwość zapewniania feedbacku w czasie rzeczywistym dzięki wersji preview Next.js live. Poniżej dokładniej przyjrzymy się najważniejszym zmianom, które wprowadzono w najnowszej wersji Next.js.

Conformance dla Next.js

Conformance to system, który zapewnia rozwiązania i zestaw reguł, które pomagają w optymalnym ładowaniu stron i w utrzymaniu przyzwoitych wartości dla Core Web Vitals. Jego kod został udostępniony twórcom Next.js przez team pracujący nad aplikacją Aurora w Google Chrome. Planowane jest tutaj jeszcze dodanie funkcji, które pomogą w kwestiach bezpieczeństwa i dostępność. Rozwiązania zapewniane przez Conformance sprawiają, że teamy nie muszą już zapamiętywać wszystkich zasad związanych z ładowaniem optymalnym.

Więcej o tym systemie możesz przeczytać tutaj. 

Co więcej, najnowsza wersja zawiera też wsparcie dla ESLint, który pomoże już nie tylko z problemami związanymi z samym JavaScriptem, ale też z frameworkiem. Można też dzięki niemu wyznaczać zasady dla całego zespołu, aby zapewnić, że wszyscy trzymają się najlepszych praktyk. Nowa integracja działa zarówno dla nowych, jak i istniejących już aplikacji stworzonych przy pomocy Next.js.

Aby zacząć z ESLint, po aktualizacji do Next.js 11 wpisz komendę npx next lint. 

Lepsza wydajność

Twórcy Next.js starali się od jakiegoś czasu coraz bardziej ulepszać wydajność - 10.1 and 10.2 przyspieszyły czas uruchamiania o nawet 24%, a czas przetwarzania udało się skrócić o 40% dzięki React Fast Refresh. W wersji 11 znowu natomiast zoptymalizowano Babel, aby jeszcze bardziej zredukować czas uruchamiania.

Twórcy twierdzą, że stworzyli nową implementację Babel dla webpack, co optymalizuje ładowanie i dodaje warstwę in-memory config caching. W praktyce nie wymaga to wprowadzania żadnych zmian przez developerów, a znacznie przyśpiesza wydajność i przyspiesza pracę.

Optymalizacja zewnętrznych skryptów

Komponent Script pozwala na ustawienie priorytetów ładowania dla zewnętrznych skryptów - i chociaż są one często potrzebne przy takich rzeczach, jak analiza danych, reklamy, czy wsparcie klienta, to mogą też powodować spore obciążenie, a przez to spowolnione ładowanie danej strony, pogarszając znacznie doświadczenie użytkownika.

Jeśli chodzi o działanie, to next/script służy do zdefiniowania właściwości strategy, dzięki której Next.js będzie mógł ustalić priorytet ładowania pozczególnych skrypów, przyspieszając ładowanie całej strony.

Jeśli chodzi o poszczególne właściwości, to beforeInteractive ustawia priorytet dla skryptów, które są pobierane i wykonywane, zanim strona staje się interaktywna, a afterInteractive jest dla skryptów, które mogą zostać pobrane i wykonane po tym, jak strona staje się interaktywna. Co więcej, lazyOnload daje priorytet skryptom, które mogą poczekać na załadowanie. 

Webpack 5

Wraz z wersją 11, Webpack 5 staje się domyślnym narzędziem dla wszystkich aplikacji stworzonych przy pomocy Next.js. Twórcy zaznaczają tutaj również, że jeśli jakaś aplikacja ma niestandardową konfigurację webpack, to warto zasięgnąć pomoc z tej dokumentacji. 

Niemniej jednak wykonano ponad 3 400 testów integracyjnych na każdym pull request z włączonym Webpack 5, więc przejście powinno być ogólnie łatwiejsze, niż może się wydawać.

Next.js Live - wersja preview

Od teraz developerzy będą mogli kodować bezpośrednio w swoich przeglądarkach. Zamiast współpracować za pośrednictwem kodu w repozytorium, programiści będą mogli szybko podzielić się URL-em i bez konieczności budowania zobaczyć efekt prac innych i dać im feedback.

Źródło

Inne zmiany

W najnowszej wersji pojawiły się również długo oczekiwane usprawnienia dotyczące komponentu next/image. Placeholdery i automatyczne wyliczanie rozmiarów obrazka sprawia, że zmniejsza się Cumulative Layout Shift. Wprowadzono również @next/codemod, czyli narzędzie, które umożliwi developerom łatwiejszą migrację z Create React App do Next.js, zwłaszcza że twórcy zauważyli rosnącą liczbę takich migracji. Funkcja ta jest jednak eksperymentalna, więc feedback jest cały czas mile widziany.

Więcej szczegółów możesz przeczytać tutaj.