Next.js routing

App router

Next.js używa routingu opartego na systemie plików, gdzie foldery są używane do tworzenia zagnieżdżonych tras. Każdy folder reprezentuje segment trasy, który mapuje się na segment URL.

page.tsx to specjalny plik Next.js, który eksportuje komponent React i jest wymagany, aby trasa była dostępna. Czyli każdy katalog musi posiadać pliki page.tsx aby ścieżka działała.

Pliki mogą mieć rozszerzenia .js, .jsx, .tsx

Przykład:

/app
  /options
    page.tsx
  page.tsx

URL-e z powyższej struktury:

• / dla /app/page.tsx
• /options dla /app/options/page.tsx

Zawartością pliku page.tsx jest komponent React, który domyślnie jest renderowany po stronie serwera, choć można to zmienić. Oznacza to, że serwer przetwarza komponent na gotowy kod HTML, który następnie jest wysyłany do przeglądarki. Przeglądarka otrzymuje już przetworzony kod, co przyspiesza czas ładowania strony.

Jeżeli w folderze nie ma pliku page.tsx to ten katalog jest niedostępny

export default function OptionsPage() {
  return <p>Options Page</p>;
}

Nazwa komponentu OptionsPage może być dowolna.

Api router

W wersji 13, Next.js umożliwia zarządzanie endpointami także przy użyciu struktury katalogów. Endpointy te są umieszczane w katalogu api, a pliki konfiguracyjne mają nazwę route.ts.

/app
  /api
    /route.ts
  /page.tsx

Przykład takiego pliku:

// app/api/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  return NextResponse.json({ message: 'Hello, Next.js 13!' });
}

Obsługa różnych metod HTTP

Nazwa funkcji odpowiada metodzie HTTP, mamy do dyspozycji: GET, POST, PUT, PATCH, DELETE, HEAD i OPTIONS

// app/api/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  return NextResponse.json({ message: 'This is a GET request' });
}

export async function POST(request: NextRequest) {
  const data = await request.json();
  return NextResponse.json({ message: 'Data received', data });
}

Więcej info w oficjalnej dokumentacji