Next.js 15. Co nowego, co się zmieniło, breaking changes

Podziękowania dla Łukasza Gajownika za pomoc przy tym artykule.

Next.js to najpopularniejszy full-stackowy framework Reacta, a teraz dostaje piętnastą dużą aktualizację. Nie będzie tak rewolucyjna jak poprzednia, która wprowadziła między innymi React Server Components. Przyniesie jednak sporo udogodnień, które mają uczynić pracę z aplikacjami webowymi łatwiejszą i przyjemniejszą. Mimo piętnastu aktualizacji podstawowe zasady się nie zmieniły, a framework wciąż się ich trzyma: "zero konfiguracji i system plików jako API; tylko JavaScript, w którym wszystko jest funkcją; automatyczny server-rendering i code-splitting; pobieranie danych zależy od developera; przewidywanie to klucz do wydajności; i proste wdrażanie."

React 19

React 19 (zobacz dokumentację wersji 19) to chyba najważniejsza zmiana w tym wydaniu. Nowa wersja przynosi zmiany, o których być może już słyszałeś, w tym:

• Actions
• Nowy hook: useActionState
• Form Actions
• Nowy hook: useFormStatus
• Nowy hook: useOptimistic
• Server Components

Jeśli masz dziwne wrażenie, że część z nich już widziałeś, to dlatego, że faktycznie tak było, całkiem możliwe, że w Next 14. Tym razem Meta udostępnia te funkcje szerszemu gronu, np. osobom, które nie używają Next.js.

Niedocenianą zmianą jest pełne wsparcie dla custom elements. React wcześniej miał problemy z Web Components, ale to już przeszłość: biblioteka JS od Mety w pełni je obsługuje.

React Compiler

Kompilowanie kodu frameworka czy biblioteki to nie nowość. Svelte, Vue, Solid i inne robią to od dawna. Zespół Reacta zauważył to jakiś czas temu i po raz pierwszy przedstawił kompilator w 2021 roku, w wystąpieniu "React without memo". Mniej więcej 3 lata później możemy wreszcie wypróbować kompilator i zrzucić na niego sporo żmudnej pracy, w tym memoizację. Skoro optymalizacje przejmie kompilator, nasz kod powinien być prostszy, a aplikacje mogą przy tym przyspieszyć. Jeśli chcesz szybko porównać kod przed i po, zajrzyj do Compiler Playground.

Breaking changes w React 19

• Błędy w renderowaniu nie są ponownie rzucane
• Usunięte: propTypes i defaultProps dla funkcji
• Usunięte: Module pattern factories

Pełną listę breaking changes znajdziesz we wpisie na 19.react.dev/blog.

Stopniowe wdrażanie Partial Prerendering (eksperymentalne)

Partial prerendering to nie całkiem nowa funkcja - pojawiła się w Next.js 14. Nowością jest to, że teraz można ją wdrażać stopniowo. Jeśli dodasz do strony opcję konfiguracji trasy "experimental_ppr", cała strona zostanie objęta Partial Prerendering.

Po co to robić? Partial prerendering pozwala łączyć treści statyczne z dynamicznymi. Prerenderowanie tylko części strony to kompromis między jak najświeższymi danymi a szybszą stroną, mniejszym obciążeniem serwera i SEO.

"next/after" (eksperymentalne)

Nowy moduł pozwala wykonać kod po wysłaniu odpowiedzi. Wcześniej, jeśli strona działała u dostawcy serverless, uruchomienie funkcji tuż po załadowaniu nie było takie proste. Jak czytamy na blogu, "[o]dłożenie pracy na moment po odpowiedzi dla użytkownika jest wyzwaniem, bo funkcje serverless przerywają obliczenia natychmiast po zamknięciu odpowiedzi."

Dlatego zespół Next.js rozwiązał ten problem, wprowadzając "after()". Do czego może Ci się przydać? Do "logowania, analityki i synchronizacji z innymi systemami zewnętrznymi".

Zmiany w cache

Do tej pory App Router w Next.js miał bardzo narzucone domyślne ustawienia cache. Cache dla "fetch", zmian tras po stronie klienta i żądań do GET route handlers działał na zasadzie opt-out: wszystko było domyślnie cache'owane. Od tego wydania cache trzeba będzie włączać świadomie (opt-in).

Innymi słowy, w fetch "jeśli nie podano opcji cache, domyślnie używane jest no-store. Oznacza to, że żądania fetch nie są domyślnie cache'owane". GET route handlers nie będą cache'owane, chyba że "włączysz cache opcją konfiguracji statycznej trasy, np. export dynamic = 'force-static'." Wreszcie, aby włączyć cache routera, ustaw opcję konfiguracji trasy "staleTime" na wybrane wartości dla stron dynamicznych i statycznych.

Dla twórców aplikacji webowych oznacza to, że czasy cache trzeba będzie ustawiać samodzielnie i świadomie, czyli w teorii masz nad cache większą kontrolę.

Breaking changes w Next.js 15

Jak przy niemal każdej dużej aktualizacji, są też breaking changes. Tym razem najważniejsze z nich to:

• Minimalna wersja Reacta to teraz 19 RC
• Usunięto squoosh na rzecz sharp jako opcjonalnej zależności
• Domyślna wartość "Content-Disposition" zmieniona na "attachment"
• Domyślnie włączone swcMinify, missingSuspenseWithCSRBailout i outputFileTracing oraz usunięte przestarzałe opcje.

Pełną listę znajdziesz tutaj.

Next.js 15 to ewolucja, a nie rewolucja. Tym razem duża aktualizacja przynosi wiele zmian, które pomogą w SEO. Możemy optymalizować client bundle, włączać partial prerendering strona po stronie, a minifikacja przez SWC jest domyślnie włączona. Z perspektywy firmy, która tworzy duże aplikacje webowe, najważniejsze jest chyba wprowadzenie kompilatora. Dzięki automatycznej memoizacji dużo łatwiej będzie tworzyć wydajne aplikacje.

Jeśli chcesz porozmawiać o stworzeniu dla Ciebie aplikacji webowej w Next.js, skontaktuj się z nami, klikając ten link.