Next.js 15 nowości i decyzja o migracji z wersji 14

Co nowego w Next.js 15 i dlaczego ta wersja ma znaczenie?

Next.js 15 to wielkie wydanie frameworka od Vercel, które zacieśnia współpracę z najnowszą wersją biblioteki React oraz wprowadza kluczowe zmiany w wydajności i stabilności.

Jeśli wciąż rozwijasz projekt na Next.js 14 (lub właśnie siadasz do pisania nowego kodu) ten artykuł pomoże Ci ocenić, co tak naprawdę zyskujesz, co musisz zmienić i na co uważać podczas migracji.

Najważniejsze zmiany techniczne w Next.js 15

React 19 jako baza dla migracji do Next.js 15

Next.js 15 twardo wymaga Reacta 19 i nie jest to tylko kosmetyczny wymóg. Ta wersja biblioteki przynosi mechanizmy, które wprost wpływają na to, jak projektujemy nasze aplikacje.

Oto co najbardziej ucieszy Cię w nowym React 19 z punktu widzenia pracy w Next.js:

• React Compiler. Magiczna optymalizacja i memoizacja. Zapomnij o męczeniu się z ręcznym dopisywaniem useMemo, useCallback czy React.memo w każdej możliwej sytuacji.
• Hook use(). Pozwala na natywne rozpakowywanie Promisów i czytanie kontekstów prosto z renderu.
• Actions. Spójny, jednolity model obsługi formularzy i mutacji danych, niezależnie od tego, czy działasz po stronie klienta, czy serwera.
• Usprawnione Suspense. Znacznie lepsza obsługa strumieniowania danych (streamingu) i stanów ładowania (fallbacków).

// React 19 z wykorzystaniem nowego hooka use() w Server Component
import { use } from 'react'
 
async function getProduct(id: string) {
  const res = await fetch(`https://api.example.com/products/${id}`)
  return res.json()
}
 
export default function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = use(params)
  const product = use(getProduct(id))
 
  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <span>{product.price} PLN</span>
    </article>
  )
}

Turbopack w Next.js 15 i szybsza praca developerska

Turbopack, nowy bundler napisany w wydajnym języku Rust, w wersji 15 osiągnął wreszcie status stabilny dla trybu deweloperskiego (next dev). Pamiętaj jednak, że nie jest odpalany domyślnie. By z niego skorzystać, musisz dopisać flagę --turbopack (dotyczy to wersji Next.js 15.0–15.4.x). Gwarantuję, że w porównaniu ze starym Webpackiem poczujesz ogromną różnicę od pierwszego kliknięcia.

Jedna uwaga: tworzenie paczki produkcyjnej (next build) przy użyciu Turbopacka w Next.js 15 nadal tkwi w fazie eksperymentalnej i domyślnie framework skorzysta ze sprawdzonego Webpacka. Turbopack stał się całkowicie domyślny (zarówno dla dev jak i build) dopiero od wersji Next.js 16.

# Tak odpalisz Turbopacka podczas developmentu (Next.js 15)
next dev --turbopack
 
# A tak uruchomisz standardowy silnik Webpack (domyślnie bez flagi)
next dev

W Next.js 16 role się odwracają: Turbopack to król domyślności, a Webpack staje się specjalnym wyborem aktywowanym przez flagę --webpack.

Nowe domyślne cache'owanie w Next.js 15

To prawdopodobnie najbardziej uciążliwa dla starych projektów (tzw. breaking change) modyfikacja w Next.js 15, ale zarazem ta, za którą masa programistów jest najbardziej wdzięczna.

W Next.js 14 każde żądanie fetch() w Server Components było przez system "magicznie" buforowane (zachowanie force-cache). Wielu z nas godzinami rwało włosy z głowy, zastanawiając się, dlaczego zaktualizowane dane nie chcą pojawić się na stronie bez sztucznego wymuszania rewalidacji.

Wersja 15 brutalnie ucina tę magię, ustawiając domyślne zachowanie na no-store. To oznacza, że żadne żądanie fetch nie zostanie zapamiętane, o ile sam mu tego nie rozkażesz.

// Era Next.js 14 z magią domyślnego buforowania (force-cache)
const data = await fetch('https://api.example.com/data')
 
// Era Next.js 15 bez domyślnego zapamiętywania danych (no-store)
const data = await fetch('https://api.example.com/data')
 
// Jeśli jednak chcesz starego zachowania w Next.js 15, robisz to jawnie:
const data = await fetch('https://api.example.com/data', {
  cache: 'force-cache',
})
 
// Możesz też ustawić rewalidację opartą o czas (w sekundach)
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 },
})

Dyrektywa "use cache" i kontrola cache w Next.js

W samej "piętnastce" użycie dyrektywy "use cache" to wciąż faza eksperymentalna, która z początku nie miała stanowić szybkiego zamiennika dla funkcji unstable_cache. Był to raczej wyraźny drogowskaz na to, jak w przyszłości będziemy podchodzić do buforowania na poziomie całych funkcji i komponentów (co ostatecznie bardzo mocno ewoluowało w nowszych wersjach pod szyldem Cache Components).

// Zapamiętanie wyniku dla całej asynchronicznej funkcji
async function getProducts() {
  'use cache'
  const res = await fetch('https://api.example.com/products')
  return res.json()
}
 
// Możemy też buforować dane z tagiem ułatwiającym późniejsze odświeżanie
import { cacheTag } from 'next/cache'
 
async function getProduct(id: string) {
  'use cache'
  cacheTag(`product-${id}`)
  const res = await fetch(`https://api.example.com/products/${id}`)
  return res.json()
}

Partial Prerendering (PPR) w Next.js 15

Partial Prerendering to fantastyczne połączenie dwóch światów: szybkiego statycznego wczytywania i elastycznej dynamiki generowanej w locie, w ramach jednej i tej samej podstrony. To znaczy, że użytkownik niemal natychmiast dostaje bazowy "szkielet" z najbliższego CDN-a, podczas gdy brakujące informacje dynamiczne doczytują (streamują) się sobie w tle.

// plik next.config.ts
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}
 
export default nextConfig

Z perspektywy historycznej: w Next.js 15 musieliśmy wywoływać to ręcznie przez experimental.ppr. Dziś ten sam nurt technologiczny żyje sobie własnym życiem pod postacią Cache Components i jest ściśle połączony z użyciem komponentu Suspense.

// app/product/[id]/page.tsx
import { Suspense } from 'react'
 
// Sztywny, statyczny szkielet generowany podczas budowy projektu
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
 
  return (
    <main>
      <h1>Produkt #{id}</h1>
      <StaticProductInfo id={id} />
 
      {/* Spersonalizowana sekcja z dynamicznymi danymi, tutaj wjeżdża streaming */}
      <Suspense fallback={<PriceSkeleton />}>
        <DynamicPrice id={id} />
      </Suspense>
 
      <Suspense fallback={<ReviewsSkeleton />}>
        <DynamicReviews id={id} />
      </Suspense>
    </main>
  )
}

Pozostałe zmiany w Next.js 15, które warto sprawdzić

• next/after to nowiutkie, w pełni stabilne API. Idealne do odpalania cięższego kodu (logów, telemetrii, porządków) bez opóźniania odpowiedzi dla użytkownika.
• instrumentation.ts to nareszcie stabilny hak ułatwiający zapięcie narzędzi monitorujących jak Sentry czy OpenTelemetry.
• <Form> to własny komponent Next.js, ułatwiający tworzenie płynnych, inteligentnych formularzy z domyślnym mechanizmem progressive enhancement i wstępnym doczytywaniem.
• Wskaźnik stron statycznych jest sporym ułatwieniem dla deweloperów. Aplikacja pokaże Ci ikonkę zdradzającą, które trasy udało się poprawnie i statycznie wygenerować.

Czy warto migrować z Next.js 14 do Next.js 15?

Kiedy migracja do Next.js 15 ma sens?

• Czas to dla Ciebie pieniądz, więc wejście na Turbopacka w środowisku dev uchroni Cię od długiego czekania na przeładowania.
• Masz dość walki z systemem cache Next.js 14, a nowe zasady gry, stawiające no-store jako opcję domyślną, usuną potężną kulę u Twojej nogi.
• Czekasz na ficzery Reacta 19, bo nowy zestaw hooków oraz obietnica React Compilera wymagają oparcia projektu o środowisko piętnastki.
• Działasz hybrydowo, a architektury stron mieszające statykę i personalizowane, doczytywane zjawiska, wręcz domagają się eksperymentów z mechanizmami pokroju PPR.

Kiedy zostać jeszcze przy Next.js 14?

• Siedzisz głęboko w ustawieniach Webpacka, dlatego zanim przesiądziesz się na Turbopack, dwa razy sprawdź, czy Twoje niestandardowe wtyczki uciągną tę rewolucję.
• Twoje kluczowe biblioteki wciąż żyją w erze Reacta 18, więc rzuć okiem na pule zależności i daj twórcom czas na wydanie łatek.
• Projekt na produkcji pędzi jak dobrze naoliwiona maszyna, a przesiadka między takimi "majorowymi" wersjami na czystym organizmie biznesowym zawsze niesie w sobie nutę nieprzewidywalnego ryzyka.

Migracja z Next.js 14 do Next.js 15 krok po kroku

1. Aktualizacja Node.js, Reacta i Next.js

npm install next@15 react@19 react-dom@19

2. Codemod przy migracji do Next.js 15

Załoga z Vercel dostarcza narzędzie, które z automatu zrobi dla Ciebie gruntowne porządki. Odpal polecenie:

npx @next/codemod@latest upgrade latest

Zauważ jednak, że Codemod ogarnie za Ciebie składnię importów czy przestarzałe nazewnictwo, ale nie zaingeruje w Twoją logikę biznesową, jeśli np. wymagała ona sztywnego modelu starego cache'a.

3. Audyt fetch() i cache po aktualizacji Next.js

Bez tego kroku daleko nie ujedziesz. Przejedź po każdym starym poleceniu fetch() w obrębie Server Components i świadomie zadeklaruj, które zapytania mają "trzymać" pamięć:

// Sztywne dane, np. drzewo kategorii. Dodajemy jawnie zapamiętywanie:
const categories = await fetch('https://api.example.com/categories', {
  cache: 'force-cache',
})
 
// Dynamiczne i wrażliwe struktury, np. stany koszyka czy strefy logowania. Zostawiamy bez dopisków, bo Next 15 domyślnie je przeładuje:
const cart = await fetch('https://api.example.com/cart')

4. Asynchroniczne parametry i zmiany w API routingu

W świecie Next.js 15 struktury params oraz searchParams w layoutach i na poziomie podstron wchodzą w pełną asynchroniczność. Twój kod musi nadążać za tymi zasadami:

// Stara szkoła Next.js 14
export default function Page({ params }: { params: { id: string } }) {
  const id = params.id
}
 
// Nowa szkoła Next.js 15
export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
}

5. Testy regresji po migracji do Next.js 15

Puść całą serię testów automatycznych, przeklikaj środowisko deweloperskie i zrób deployment na bezpieczny tzw. preview. Wdróż to na produkcję dopiero gdy wyłapiesz i zneutralizujesz wszystkie niedociągnięcia z bibliotekami.