Przejdź do treści

Next.js 15 App Router: przewodnik

Dowiedz się, jak budować nowoczesne aplikacje webowe z App Routerem w Next.js 15 i TypeScriptem: Turbopack, Server Actions, Metadata API i dobre praktyki.

Ondřej Tomášek2 min czytania

Next.js 15 wprowadza kilka usprawnień w App Routerze, dzięki którym jest on jeszcze lepszym narzędziem do budowania nowoczesnych aplikacji webowych. W tym przewodniku omówimy najważniejsze funkcje i dobre praktyki.

Najważniejsze funkcje w Next.js 15

1. Turbopack (beta)

Next.js 15 zawiera ulepszoną wersję Turbopacka, która zapewnia szybszą kompilację w trybie deweloperskim:

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

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

export default config;

2. Server Actions

Server Actions pozwalają obsługiwać wysyłanie formularzy i modyfikacje danych bezpośrednio w komponentach:

// 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. Ulepszone Metadata API

Nowe Metadata API zapewnia lepszą optymalizację pod SEO i media społecznościowe:

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']
  }
}

Dobre praktyki

  1. Używaj TypeScriptu

    • Zawsze definiuj odpowiednie typy dla propsów i odpowiedzi API
    • Korzystaj z inferencji typów w TypeScripcie tam, gdzie to możliwe

  2. Implementuj Error Boundaries

    • Twórz pliki error.tsx w katalogu app
    • Zapewnij zrozumiałe komunikaty o błędach i sposoby wyjścia z sytuacji

  3. Optymalizuj wydajność

    • Domyślnie używaj React Server Components
    • Implementuj odpowiednie stany ładowania za pomocą loading.tsx
    • Korzystaj z optymalizacji obrazów dzięki next/image

Podsumowanie

App Router w Next.js 15 to solidna podstawa do budowania nowoczesnych aplikacji webowych. Stosując te dobre praktyki i korzystając z nowych funkcji, stworzysz wydajne, bezpieczne pod względem typów i łatwe w utrzymaniu aplikacje.

Wkrótce kolejne szczegółowe poradniki o konkretnych funkcjach Next.js!

Czytaj dalej