Přeskočit na obsah

Průvodce App Routerem v Next.js 15

Jak stavět moderní webové aplikace s App Routerem v Next.js 15 a TypeScriptem: Turbopack, Server Actions, Metadata API a osvědčené postupy z praxe.

Ondřej Tomášek2 min čtení

Next.js 15 přináší do App Routeru několik vylepšení a dělá z něj ještě silnější nástroj pro moderní webové aplikace. V tomhle průvodci si projdeme hlavní novinky a osvědčené postupy.

Hlavní novinky v Next.js 15

1. Turbopack (beta)

Next.js 15 má vylepšenou verzi Turbopacku, se kterou je kompilace při vývoji rychlejší:

// next.config.ts
import { type Config } from "next";

const config: Config = {
  // Enable turbopack
  experimental: {
    turbo: true
  }
};

export default config;

2. Server Actions

Se Server Actions zpracujete odeslání formuláře a změny dat přímo v komponentách:

// app/actions.ts
'use server'

export async function submitForm(formData: FormData) {
  const name = formData.get('name')
  const email = formData.get('email')
  
  // Process the data
  await saveToDatabase({ name, email })
}

// app/page.tsx
import { submitForm } from './actions'

export default function Page() {
  return (
    <form action={submitForm}>
      <input name="name" type="text" />
      <input name="email" type="email" />
      <button type="submit">Submit</button>
    </form>
  )
}

3. Vylepšené Metadata API

Nové Metadata API vám pomůže se SEO i s tím, jak stránka vypadá na sociálních sítích:

import { type Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Page',
  description: 'Page description',
  openGraph: {
    title: 'My Page',
    description: 'Page description',
    images: ['/og-image.jpg']
  }
}

Osvědčené postupy

  1. Používejte TypeScript

    • Vždy pořádně otypujte props i odpovědi z API
    • Kde to jde, nechte TypeScript odvodit typy sám

  2. Přidejte Error Boundaries

    • V adresáři app vytvořte soubory error.tsx
    • Zobrazte srozumitelné chybové hlášky a dejte uživateli možnost, jak se z chyby dostat

  3. Optimalizujte výkon

    • Jako výchozí volbu používejte React Server Components
    • Přes loading.tsx přidejte pořádné stavy načítání
    • Obrázky optimalizujte přes next/image

Závěr

App Router v Next.js 15 je pevný základ pro moderní webové aplikace. Když se budete držet těchhle postupů a využijete nové funkce, postavíte rychlé, typově bezpečné a dobře udržovatelné aplikace.

Brzy přibudou podrobnější návody ke konkrétním funkcím Next.js, tak se těšte!

Čtěte dál