Aktualizacja do Next.js 15: przewodnik

Next.js 15 wprowadza istotne usprawnienia, w tym obsługę React 19, ulepszone mechanizmy cache'owania i stabilną wersję Turbopacka do pracy deweloperskiej. Ten poradnik przeprowadzi cię przez aktualizację istniejącej aplikacji Next.js do wersji 15, tak żeby przejście było płynne, a nowe funkcje w pełni wykorzystane.

Wymagania wstępne

Przed aktualizacją upewnij się, że masz:

• Aplikację w Next.js 14
• Node.js 18 lub nowszy
• Aktualną wersję npm lub yarn
• Kopię zapasową obecnego projektu (zalecane)

Krok 1: zaktualizuj zależności

Zanim przejdziesz do aktualizacji, koniecznie zaktualizuj zależności projektu, żeby uniknąć problemów z kompatybilnością.

Sprawdź obecną wersję

Uruchom poniższe polecenie, żeby sprawdzić obecną wersję Next.js:

npx next --version

Jeśli masz starszą wersję, przejdź do aktualizacji zależności:

npm install next@latest react@latest react-dom@latest eslint-config-next@latest

Dla użytkowników Yarna:

yarn add next@latest react@latest react-dom@latest eslint-config-next@latest

Po aktualizacji sprawdź zainstalowane wersje:

npx next --version

Krok 2: zaktualizuj next.config.js

Sprawdź, czy w pliku next.config.js nie ma przestarzałych opcji, i zaktualizuj je zgodnie z najnowszą dokumentacją Next.js.

Przykład:

const nextConfig = {
  experimental: {
    appDir: true,
    optimizeCss: true,
    optimizeFonts: true,
  },
  images: {
    domains: ['yourdomain.com'],
  },
};

module.exports = nextConfig;

Usuń wszystkie przestarzałe ustawienia i zastąp je zalecaną konfiguracją.

Krok 3: przetestuj aplikację

Po aktualizacji uruchom serwer deweloperski, żeby sprawdzić, czy nie ma problemów:

npm run dev

lub

yarn dev

Przejrzyj w konsoli ostrzeżenia i błędy. Zwróć uwagę na trasy API, zmiany w middleware i przestarzałe funkcje.

Krok 4: przenieś trasy API do App Routera

Next.js 15 usprawnia routing API. Jeśli używasz Pages Routera do endpointów API, rozważ migrację do App Routera.

Przykładowa migracja

Przed (Pages Router)

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello from API!" });
}

Po (App Router)

// app/api/hello/route.js
export function GET() {
  return Response.json({ message: "Hello from API!" });
}

Ta zmiana poprawia wydajność i umożliwia lepsze strategie pobierania danych.

Krok 5: włącz i zoptymalizuj Turbopack

Turbopack jest w Next.js 15 stabilny i znacząco przyspiesza budowanie.

Włącz go w package.json:

{
  "scripts": {
    "dev": "next dev --turbo"
  }
}

Uruchom serwer deweloperski, żeby sprawdzić poprawę:

npm run dev

Krok 6: wdróż zaktualizowaną aplikację

Po przetestowaniu lokalnie wdróż aplikację u wybranego dostawcy hostingu, np. Vercel lub Netlify.

git add .
git commit -m "Upgrade to Next.js 15"
git push origin main

Wdróż zaktualizowaną wersję przez Vercel:

vercel --prod

Typowe problemy i ich rozwiązywanie

Problem 1: style się nie ładują

• Upewnij się, że w App Routerze importy CSS znajdują się w layout.js.
• Sprawdź, czy w next.config.js włączone jest optimizeCss.

Problem 2: trasy API zwracają 404

• Upewnij się, że wszystkie endpointy API mają nowy format App Routera.
• Po wprowadzeniu zmian zrestartuj serwer deweloperski.

Problem 3: spadki wydajności

• Przeanalizuj żądania sieciowe w Chrome DevTools.
• Włącz optymalizacje cache'owania w next.config.js.

Podsumowanie

Aktualizacja do Next.js 15 odblokowuje nowe możliwości, lepszą wydajność i wygodniejszą pracę dla deweloperów. Dzięki temu przewodnikowi przejdziesz na nową wersję płynnie i od razu skorzystasz z jej najnowszych funkcji.

Więcej szczegółów znajdziesz w oficjalnej dokumentacji Next.js 15: Dokumentacja Next.js 15.

Starannie aktualizując zależności, dokładnie testując i korzystając z nowych funkcji, takich jak Turbopack i App Router, wyciśniesz z tej dużej aktualizacji maksimum.