Next.js 14

front end

minuta czytania

Dawid Kruk

31 paź 2023

next-js

react-js

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.

Spis treści

Turbopack

Server Actions

Partial prerendering

Metadane

Inne usprawnienia i zmiany

Next.js 14

Umów się na bezpłatną konsultację

Twoje dane przetwarzamy zgodnie z naszą polityką prywatności.

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).

 

Czy szukasz wykonawcy projektów IT ?
logo
Sprawdź case studies

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

Nasza oferta

Web development

Dowiedz się więcej

Mobile development

Dowiedz się więcej

E-commerce

Dowiedz się więcej

Projektowanie UX/UI

Dowiedz się więcej

Outsourcing

Dowiedz się więcej

SEO

Dowiedz się więcej

Powiązane artykuły

Najważniejsze technologie do tworzenia aplikacji webowych na 2025 rok

27 mar 2025

Tworzenie aplikacji webowych zmienia się z roku na rok – pojawiają się nowe narzędzia, frameworki i podejścia, które ułatwiają pracę programistom i poprawiają jakość końcowych produktów. W 2025 roku szczególnie widać nacisk na wydajność, automatyzację i lepsze doświadczenia użytkownika. Technologie stają się coraz bardziej inteligentne, szybkie i dostępne. W tym artykule przedstawiamy najważniejsze trendy i rozwiązania, które kształtują web development w nadchodzącym czasie.

Tomasz Kozon

#fullstack

related-article-image-komputer z otwartą stroną, tworzenie aplikacji webowych

Wprowadzenie do Payload CMS: Nowoczesny headless CMS

25 mar 2025

Payload CMS to jedno z najciekawszych rozwiązań w świecie nowoczesnych systemów zarządzania treścią. Łączy podejście headless z pełną kontrolą nad backendem i elastycznością, której często brakuje w innych CMS-ach. Skierowany przede wszystkim do developerów, pozwala tworzyć zaawansowane projekty bez kompromisów. W tym artykule przyjrzymy się bliżej, czym wyróżnia się Payload, jak działa i dlaczego warto mieć go na radarze przy budowie nowoczesnych aplikacji webowych.

Tomasz Kozon

#fullstack

InertiaJS - Co to jest i dlaczego warto z niego korzystać?

23 mar 2025

InertiaJS zyskuje na popularności, jako narzędzie integrujące najnowsze frameworki frontendowe (Vue, React, Svelte) z tradycyjnymi serwerowymi technologiami backendowymi. Zrozumienie jego działania pozwala płynnie łączyć frontend i backend, bez konieczności pisania API.

Tomasz Kozon

#fullstack

Co to jest v0 AI?

20 mar 2025

W świecie, gdzie sztuczna inteligencja coraz bardziej wpływa na różne aspekty naszej pracy, narzędzia takie jak v0 AI zaczynają rewolucjonizować sposób, w jaki tworzymy interfejsy użytkownika. Dzięki możliwości generowania gotowego kodu na podstawie prostych opisów tekstowych, v0 AI obiecuje przyspieszyć i uprościć proces projektowania UI, zwłaszcza w ekosystemie React i Tailwind CSS. Czy oznacza to koniec ręcznego kodowania interfejsów? A może jest to jedynie narzędzie wspierające developerów i designerów w ich codziennej pracy?

Tomasz Kozon

#fullstack

AskCodi – co to jest i jak może pomóc programistom?

15 mar 2025

Dzięki narzędziom opartym na sztucznej inteligencji, takim jak AskCodi, programiści mogą generować kod, pisać zapytania SQL, dokumentować funkcje i nawet debugować błędy w sposób szybki i efektywny. AskCodi działa jak inteligentny asystent, który pomaga zarówno początkującym, jak i doświadczonym deweloperom w codziennej pracy. W tym artykule przyjrzymy się, jak dokładnie działa to narzędzie i w jaki sposób może zwiększyć produktywność programistów.

Tomasz Kozon

#fullstack

Offboarding pracownika – co to jest i dlaczego jest tak samo ważny jak onboarding?

11 mar 2025

Proces offboardingu, czyli formalne pożegnanie pracownika z firmą, często jest pomijany, a to błąd! Jest równie istotny, jak proces onboardingu - wprowadzania nowych osób do zespołu. Zarządzanie zmianami personalnymi wymaga delikatności, planowania i profesjonalizmu. Dobrze zorganizowany offboarding to szereg korzyści dla obu stron.

Tomasz Kozon

#hr

Lovable AI – Rewolucja w tworzeniu aplikacji bez kodowania

4 mar 2025

W świecie, gdzie liczy się szybkość i innowacja, tworzenie aplikacji bez znajomości programowania staje się coraz bardziej pożądane. Lovable AI to narzędzie, które wykorzystuje sztuczną inteligencję do automatycznego generowania aplikacji na podstawie prostych opisów w języku naturalnym. Dzięki temu zarówno przedsiębiorcy, freelancerzy, jak i programiści mogą w rekordowym czasie budować i wdrażać swoje projekty. Czy AI może zastąpić tradycyjnych programistów?

Tomasz Kozon

#fullstack

Zobacz wszystkie artykuły powiązane z #front end