Front-end

Next.js 14

Została wydana 14. wersja popularnego frameworka Nextjs, opartego o React. Aktualizacja oferuje szereg nowych funkcji i ulepszeń, które mają na celu zwiększenie wydajności, ułatwienie pracy deweloperom i dostarczenie płynniejszych doświadczeń użytkownikom. Ten artykuł zawiera szczegółowy przegląd najważniejszych informacji o nowej wersji.

31 paź 2023

Turbopack

Bundler Webpack ma zostać zastąpiony Turbopackiem - jest to opcjonalny feature dla developerów, który aktywuje się, dodając odpowiednią flagę do komendy uruchamiającej serwer developerski:

 

next dev --turbo

 

Turbopack jest oparty na języku Rust, dzięki czemu serwer uruchamia się o połowę szybciej, a aktualizacje zachodzą nawet do 20 razy szybciej. Funkcjonalność jest wstecznie kompatybilna, jednak pozostaje w fazie testów (90% pokrycia na moment pisania artykułu).

 

Server Actions

Server actions zostały ustabilizowane, dzięki czemu możemy dokonywać aktualizacji danych w bazie danych i na stronie za jednym zamachem - Server Actions są zintegrowane z mechanizmem rewalidacji. Prosty przykład użycia to funkcja mutująca dane, na przykład TODO listy:

 

async function createToDoListItem(itemName: string) {
	'use server';
	response = await fetch(...);
	// ...
}

 

Dyrektywa 'use server' wskazuje, że deklarowana funkcja jest Server Action. Taka funkcja jest uniwersalna i może być użyta w każdym miejscu.

 

Partial prerendering

Partial prerendering to feature będący w fazie preview, oparty o React Suspense Boundary. W dużym skrócie, serwer zwraca odpowiedź statyczną, zawierającą Suspense Boundaries i doładowuje elementy generowane po stronie serwera na bieżąco. Jeśli feature wypali i wyjdzie z fazy preview, to będzie to przełom, gdyż pozbędziemy się w ten sposób opóźnienia między zapytaniem a odpowiedzią, będącego jedną z wad SSR.

 

Metadane

Zostały rozdzielone metadane blokujące i nieblokujące, co znacznie wygładza doświadczenie użytkownika i zapobiega takim zachowaniom jak np. migotanie strony w czasie ładowania. Metadane powiązane z viewportem zostały wyseparowane z reszty metadanych i są ładowane osobno. 

Pomaga to zapobiec zbyt dużemu Cumulative Layout Shift, co pozytywnie wpływa na indeksowanie się strony w przeglądarkach.

 

Inne usprawnienia i zmiany

  • Minimalna wymagana wersja Node.js to od teraz 18.17.0, przy czym zalecane jest użycie 18.17.1 ze względu na poprawki dotyczące bezpieczeństwa.
  • Poprawki dotyczące użycia pamięci w środowisku developerskim - wcześniej pojawiały się zgłoszenia na temat wycieków pamięci i procesów-zombie pozostających po wyłączeniu/restarcie serwera developerskiego.

Aby uzyskać więcej informacji na temat migracji ze starszych wersji Next.js, należy zapoznać się z tym poradnikiem: 
https://nextjs.org/docs/pages/building-your-application/upgrading/version-14

Źródło: https://nextjs.org/blog/next-14

FAQ

Najczęstsze pytania

  • Czternasta wersja frameworka Next.js oferuje szereg nowych funkcji i ulepszeń zwiększających wydajność i ułatwiających pracę deweloperom — m.in. opcjonalny Turbopack Bundler, ustabilizowane Server Actions, Partial Prerendering w fazie preview oraz rozdzielenie metadanych blokujących i nieblokujących.
  • Turbopack to następca Webpacka napisany w języku Rust. W czternastej wersji był jeszcze opcjonalny — włączało się go flagą turbo przy uruchamianiu serwera deweloperskiego — i obejmował część testów zgodności, dlatego twórcy odradzali poleganie na nim w krytycznych projektach. Zysk był jednak wyraźny: szybszy start serwera i znacznie szybsze odświeżanie zmian w przeglądarce. W kolejnych wydaniach Next.js Turbopack dojrzał, objął także budowanie produkcyjne i stał się domyślnym narzędziem — jeśli zaczynasz nowy projekt dziś, nie musisz włączać go ręcznie.
  • Server Actions zostały ustabilizowane — pozwalają dokonywać aktualizacji danych w bazie danych i na stronie za jednym zamachem, ponieważ są zintegrowane z mechanizmem rewalidacji. Dyrektywa „use server" wskazuje, że deklarowana funkcja jest Server Action — taka funkcja jest uniwersalna i może być użyta w każdym miejscu.
  • To technika łącząca zalety generowania statycznego i renderowania na serwerze, oparta na mechanizmie Suspense z Reacta. Serwer natychmiast odsyła gotową, statyczną powłokę strony, a fragmenty zależne od danych użytkownika doładowują się strumieniowo w wyznaczonych miejscach. Dzięki temu znika główna wada pełnego renderowania na serwerze — oczekiwanie na kompletną odpowiedź, zanim cokolwiek pojawi się na ekranie. W Next.js 14 funkcja była dostępna w wersji zapoznawczej i wymagała włączenia w konfiguracji; jej status zmieniał się w kolejnych wydaniach, więc przed użyciem sprawdź dokumentację swojej wersji.
  • Rozdzielono metadane blokujące i nieblokujące, co zapobiega migotaniu strony w czasie ładowania i zbyt dużemu Cumulative Layout Shift, pozytywnie wpływając na indeksowanie strony. Minimalna wymagana wersja Node.js to 18.17.0 (zalecana 18.17.1 ze względu na poprawki bezpieczeństwa), poprawiono też użycie pamięci w środowisku developerskim, eliminując wycieki pamięci i procesy-zombie.

Blog

Powiązane artykuły

Czytaj więcej
Front-end

Jak uczyć się Reacta?

React to popularna biblioteka JavaScript do tworzenia interaktywnych interfejsów użytkownika. W tym artykule przedstawimy kilka sposobów, jak można nauczyć się Reacta i zacząć tworzyć swoje własne projekty.

Tomasz Kozon
07 cze 2023
Front-end

Hygraph – nowoczesny headless CMS

Systemy Zarządzania Treścią, czyli CMS, wpływają na rozwój stron internetowych od lat. Hygraph, w ramach nowoczesnej technologii headless, oferuje nową perspektywę na zarządzanie treścią. Omówimy, jak Hygraph może kształtować przyszłość CMSów.

Tomasz Kozon
06 lis 2025
Front-end

Client-side Hydration: jak działa i dlaczego jest kluczowa dla nowoczesnych aplikacji webowych

Nowoczesne aplikacje webowe muszą być jednocześnie szybkie, interaktywne i przyjazne dla użytkownika już od pierwszego załadowania strony. Właśnie w tym kontekście coraz większe znaczenie zyskuje client-side hydration, czyli mechanizm łączący renderowanie po stronie serwera z logiką uruchamianą w przeglądarce. Dzięki niemu możliwe jest wyświetlenie treści niemal natychmiast, a następnie płynne przejście do pełnej interaktywności aplikacji.

Tomasz Kozon
13 gru 2025
Front-end

Turbopack w praktyce: jak działa nowy bundler od Vercela

Rosnąca złożoność aplikacji webowych sprawia, że wydajność narzędzi developerskich ma dziś ogromne znaczenie. Turbopack, nowy bundler od Vercela, powstał jako odpowiedź na ograniczenia klasycznych rozwiązań, takich jak Webpack, szczególnie w dużych projektach Next.js. Jego głównym celem jest maksymalne skrócenie czasu startu aplikacji i natychmiastowy hot reload podczas pracy z kodem.

Tomasz Kozon
06 gru 2025
Front-end

Radix UI – biblioteka headless komponentów dla React

Radix UI to coraz popularniejsza biblioteka headless komponentów, która zdobywa uznanie wśród developerów React poszukujących elastycznych i solidnych rozwiązań. W świecie, gdzie dostępność i jakość UX mają kluczowe znaczenie, gotowe prymitywy Radix UI pozwalają budować interfejsy zgodne z najlepszymi praktykami. Biblioteka nie narzuca warstwy wizualnej, dzięki czemu świetnie sprawdza się w projektach opartych na własnym design systemie.

Tomasz Kozon
03 gru 2025