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

Source: https://ordergroup.co/pl/blog/nextjs-15-zmiany/
Last updated: 2024-09-12

> Next.js doczekał się wersji 15, a w niej funkcji, na które wszyscy czekaliśmy.

![Next.js 15. Co nowego, co się zmieniło, breaking changes](https://ordergroup.co/media/images/Next_mn7ik9r.js_15_desktop.width-2850.format-webp.webp)

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

[Aleksander Jess](https://ordergroup.co/pl/autorzy/aleksander-jess/), Były copywriter |

12 września 2024

| 3 min czytania

Spis treści

W skrócie
Wstęp
Co nowego
Breaking changes
Podsumowanie

W skrócie

Next.js 15 to ewolucja, a nie rewolucja. Przechodzi na Reacta 19 i wprowadza React Compiler, stopniowe włączanie częściowego prerenderingu, eksperymentalną funkcję after() oraz cache, który trzeba teraz włączać świadomie, bo nie działa już domyślnie. Wymieniamy też najważniejsze zmiany łamiące zgodność.

Wstęp

*Podziękowania dla* [*Łukasza Gajownika*](https://ordergroup.co/resources/video/reactjs-ai/)*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."](https://web.archive.org/web/20200809001247/https://www.infoworld.com/article/3136337/next-step-after-nodejs-framework-for-universal-javascript-apps.html)

Co nowego

React 19React 19 (zobacz [dokumentację wersji 19](https://19.react.dev/)) 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](https://19.react.dev/blog/2024/04/25/react-19#actions)[Nowy hook: useActionState](https://19.react.dev/blog/2024/04/25/react-19#new-hook-useactionstate)[Form Actions](https://19.react.dev/blog/2024/04/25/react-19#form-actions)[Nowy hook: useFormStatus](https://19.react.dev/blog/2024/04/25/react-19#new-hook-useformstatus)[Nowy hook: useOptimistic](https://19.react.dev/blog/2024/04/25/react-19#new-hook-optimistic-updates)[Server Components](https://19.react.dev/blog/2024/04/25/react-19#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 CompilerKompilowanie 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"](https://www.youtube.com/watch?v=lGEMwh32soc). 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.](https://playground.react.dev/)Breaking changes w React 19[Błędy w renderowaniu nie są ponownie rzucane](https://19.react.dev/blog/2024/04/25/react-19-upgrade-guide#errors-in-render-are-not-re-thrown)[Usunięte: propTypes i defaultProps dla funkcji](https://19.react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops)[Usunięte: Module pattern factories](https://19.react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-module-pattern-factories)Pełną listę breaking changes znajdziesz we wpisie na [19.react.dev/blog](https://19.react.dev/blog/2024/04/25/react-19-upgrade-guide#breaking-changes).Stopniowe wdrażanie Partial Prerendering (eksperymentalne)[Partial prerendering to nie całkiem nowa funkcja - pojawiła się w Next.js 14.](https://nextjs.org/blog/next-14#partial-prerendering-preview) 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](https://nextjs.org/blog/next-15-rc#executing-code-after-a-response-with-nextafter-experimental), "[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 cacheDo 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](https://nextjs.org/blog/next-15-rc#fetch-requests-are-no-longer-cached-by-default)". GET route handlers nie będą cache'owane, chyba że ["włączysz cache opcją konfiguracji statycznej trasy, np. export dynamic = 'force-static'."](https://nextjs.org/blog/next-15-rc#get-route-handlers-are-no-longer-cached-by-default) Wreszcie, aby włączyć cache routera, [ustaw opcję konfiguracji trasy "staleTime" na wybrane wartości dla stron dynamicznych i statycznych.](https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes)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

Breaking changes w Next.js 15Jak 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ściDomyś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.](https://nextjs.org/blog/next-15-rc#other-changes)

Podsumowanie

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.](https://ordergroup.co/contact-us/)

Pracujmy razem i kształtujmy przyszłość
[Kontakt](https://ordergroup.co/estimate-project/?utm_source=blog&utm_medium=referral&utm_campaign=content_marketing)

Więcej w tym temacie

Specjalizacja
[Tworzenie oprogramowania](https://ordergroup.co/pl/uslugi/tworzenie-oprogramowania/)

Service
[Usługi tworzenia aplikacji webowych](https://ordergroup.co/pl/uslugi/tworzenie-oprogramowania/tworzenie-aplikacji-webowych/)

Case study
[RAW Cyber - bezpieczny system operacyjny oparty na Androidzie](https://ordergroup.co/pl/case-studies/raw-cyber-system-operacyjny-android/)

Więcej artykułów: Inżynieria oprogramowania

[Inżynieria oprogramowania
|

13 listopada 2024 |

6 min czytania

Porównanie: Ionic, NativeScript i React Native](https://ordergroup.co/pl/blog/ionic-nativescript-react-native/)
[Inżynieria oprogramowania
|

30 października 2023 |

4 min czytania

Jak inżynierowie elektrycy wykorzystują Pythona?](https://ordergroup.co/pl/blog/python-w-elektrotechnice/)
[Inżynieria oprogramowania
|

18 listopada 2024 |

4 min czytania

Backend w Pythonie. Kiedy wybrać Django?](https://ordergroup.co/pl/blog/backend-django/)

[Wszystkie artykuły: Inżynieria oprogramowania](https://ordergroup.co/pl/blog/inzynieria/)
