Nasza strona używa cookies. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

Dużo nowości w Next.js 11

Sprawdź, co nowego twórcy przygotowali w najnowszej wersji frameworku Next.js, czyli Next.js 11.
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.  

Rozpocznij dyskusję

Lubisz dzielić się wiedzą i chcesz zostać autorem?

Podziel się wiedzą z 160 tysiącami naszych czytelników

Dowiedz się więcej

Zobacz jakie firmy chcą Ci płacić więcej.

Ile teraz zarabiasz?

Podpowiedzieliśmy już razy.

Mamy ponad 1200 ofert pracy. Zobacz o ile więcej możesz zarabiać. » [zamknij]