Jak upgradovat na Next.js 15

Next.js 15 přináší řadu velkých novinek: podporu Reactu 19, lepší cachování a stabilní Turbopack pro vývoj. V tomhle návodu vám ukážu, jak existující aplikaci upgradovat na verzi 15 bez zbytečných potíží a jak z nových funkcí vytěžit maximum.

Co budete potřebovat

Než začnete, mějte připravené:

• aplikaci na Next.js 14
• Node.js 18 nebo novější
• aktuální verzi npm nebo Yarnu
• zálohu projektu (doporučuju)

Krok 1: Aktualizujte závislosti

Ještě před samotným upgradem aktualizujte závislosti projektu. Ušetříte si tím problémy s kompatibilitou.

Zjistěte aktuální verzi

Jakou verzi Next.js právě používáte, zjistíte tímhle příkazem:

npx next --version

Pokud máte starší verzi, aktualizujte závislosti:

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

Pokud používáte Yarn:

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

Po aktualizaci si ověřte, jaké verze se nainstalovaly:

npx next --version

Krok 2: Upravte next.config.js

Projděte next.config.js a najděte zastaralé volby. Upravte je podle aktuální dokumentace Next.js.

Příklad:

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

module.exports = nextConfig;

Všechna zastaralá nastavení odstraňte a místo nich použijte doporučenou konfiguraci.

Krok 3: Otestujte aplikaci

Po upgradu spusťte vývojový server a zkontrolujte, jestli všechno funguje:

npm run dev

nebo

yarn dev

V konzoli hledejte varování a chyby. Pozor hlavně na API routes, změny v middlewaru a zastaralé funkce.

Krok 4: Přesuňte API routes do App Routeru

Next.js 15 vylepšuje routování API. Pokud máte API endpointy v Pages Routeru, zvažte přechod na App Router.

Příklad migrace

Předtím (Pages Router)

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

Potom (App Router)

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

Výkon se tím zlepší a získáte víc možností, jak načítat data.

Krok 5: Zapněte a vylaďte Turbopack

V Next.js 15 je Turbopack už stabilní a buildy s ním běží výrazně rychleji.

Zapnete ho v package.json:

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

Spusťte vývojový server a přesvědčte se o rozdílu sami:

npm run dev

Krok 6: Nasaďte novou verzi aplikace

Když všechno funguje lokálně, nasaďte aplikaci u hostingu, který používáte, třeba na Vercel nebo Netlify.

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

Na Vercelu novou verzi nasadíte takhle:

vercel --prod

Časté problémy a jak je vyřešit

Problém 1: Nenačítají se styly

• Zkontrolujte, že u App Routeru importujete CSS na správném místě v layout.js.
• Ověřte, jestli máte v next.config.js zapnuté optimizeCss.

Problém 2: API routes vracejí 404

• Zkontrolujte, že všechny API endpointy používají nový formát App Routeru.
• Po změnách restartujte vývojový server.

Problém 3: Aplikace zpomalila

• Projděte síťové požadavky v Chrome DevTools.
• Zapněte v next.config.js optimalizace cachování.

Závěr

S Next.js 15 získáte silné nové funkce, lepší výkon a příjemnější vývoj. Když se budete držet tohohle návodu, přechod proběhne hladce a novinky využijete naplno.

Podrobnosti najdete v oficiálních poznámkách k vydání Next.js 15: Dokumentace Next.js 15.

Pečlivě aktualizujte závislosti, všechno důkladně otestujte a využijte novinky jako Turbopack a App Router. Pak z tohohle velkého upgradu vytěžíte maximum.