Wszystkie konwencje plików i folderów App Routera w jednej przeszukiwalnej tabeli, tester ścieżek zamieniający ścieżkę pliku z app/ na URL oraz sprawdzony kod dla layout, loading i error.
W App Routerze foldery wewnątrz app/ stają się segmentami URL, a specjalne pliki nadają każdemu segmentowi interfejs: page czyni go publicznym, layout go opakowuje, loading dodaje fallback Suspense, error dodaje error boundary, a route obsługuje API. Nawiasy kwadratowe tworzą segmenty dynamiczne, nawiasy okrągłe grupują trasy bez zmiany URL, a podkreślnik ukrywa folder.
Pliki, które będziesz pisać najczęściej
Wątki na forach o App Routerze dotyczą głównie tego, gdzie umieścić plik i dlaczego nie jest wykrywany. Ta ściąga odpowiada na to wprost: przeszukaj konwencje, wpisz ścieżkę pliku, aby zobaczyć powstały URL, i skopiuj minimalne wersje plików, wszystko sprawdzone z aktualną dokumentacją nextjs.org.
Layout pozostaje zamontowany, gdy przechodzisz między jego stronami podrzędnymi, więc stan i efekty są zachowywane. Plik template znajduje się tuż wewnątrz layoutu i jest renderowany ponownie przy nawigacji, co pasuje do efektów, które mają się uruchamiać przy każdej zmianie strony.
Albo brakuje w nim linii 'use client', bo error boundaries muszą być Client Components, albo błąd występuje w layoucie tego samego segmentu, którego error.tsx nie opakowuje. Błędy w głównym layoucie wymagają global-error.
error, czyli obiekt Error z opcjonalnym digest, oraz retry, który ponownie pobiera dane i renderuje segment. Według dokumentacji retry stał się stabilny w wersji 16.3. reset nadal istnieje do czyszczenia błędu bez ponownego pobierania, ale zwykle wybiera się retry.
Folder z podkreślnikiem jest prywatny i ignorowany przez routing. Aby uzyskać prawdziwy segment URL zaczynający się od podkreślnika, nazwij folder z %5F, czyli zakodowaną formą, na przykład %5Fdrafts.
W wersji 16 konwencja pliku middleware została oznaczona jako przestarzała i przemianowana na proxy, więc nowe projekty używają proxy.ts w katalogu głównym projektu (lub wewnątrz src), eksportującego funkcję proxy. Next.js dostarcza codemod middleware-to-proxy, który zmienia nazwę pliku i funkcji.
Pliki, foldery i pliki metadanych
Wymagany i jedyne miejsce, w którym pisze się html i body. Każda strona renderuje się tam, gdzie znajduje się children.
params jest obiektem Promise, więc strona jest asynchroniczna i czeka na niego przed użyciem slug.
Pokazywany od razu przy nawigacji, gdy strona się streamuje. Nie otrzymuje żadnych propsów.
Musi być Client Component. retry ponownie pobiera dane i renderuje segment.
Zastępuje główny layout, gdy jest aktywny, więc ma własne html i body i nie może eksportować metadata.
Plik
Wspólny interfejs dla segmentu i jego dzieci; pozostaje zamontowany
Plik
Interfejs trasy; czyni segment publicznym
Plik
Fallback Suspense dla segmentu
Plik
Interfejs pokazywany dla notFound() i niedopasowanych URL
Plik
Error boundary; Client Component
Plik
Interfejs błędu dla głównego layoutu; własne html i body
Plik
Endpoint API; tylko .js lub .ts
Plik
Jak layout, ale renderowany ponownie przy nawigacji
Plik
Fallback dla slotu trasy równoległej
Plik
Interfejs dla forbidden()
Plik
Interfejs dla unauthorized()
Plik główny
Proxy żądań w katalogu głównym projektu
Plik główny
Konfiguracja OpenTelemetry i instrumentacji
Folder
Segment URL
Folder
Segment dynamiczny
Folder
Segment catch-all, jedna lub więcej części
Folder
Opcjonalny catch-all, dopasowuje też rodzica
Folder
Grupa tras, pomijana w URL
Folder
Folder prywatny, ignorowany przez routing
Folder
Nazwany slot dla tras równoległych
Folder
Przechwytuje trasę na tym samym poziomie
Folder
Przechwytuje trasę poziom wyżej
Folder
Przechwytuje trasę dwa poziomy wyżej
Folder
Przechwytuje trasę od katalogu głównego app
Metadane
Ikony aplikacji, jako obrazy lub generowane kodem
Metadane
Obrazy do udostępniania, jako pliki lub generowane
Metadane
sitemap.xml i robots.txt, statyczne lub generowane
Wpisz ścieżkę pliku wewnątrz app/. Tester pomija grupy tras, odczytuje segmenty dynamiczne i podaje wzorzec URL albo powód, dla którego plik nie jest trasą.
Ścieżka pliku
Przeszukaj konwencje
Szukaj
error, slot, group
Filtruj według rodzaju
Wszystkie
Pokazano: {n}
Wpisz ścieżkę, na przykład app/blog/[slug]/page.tsx
To nie jest trasa: folder zaczynający się od _ jest prywatny.
To nie jest publiczna trasa. {file} to specjalny plik, który opakowuje trasę w tym folderze.
To nie jest publiczna trasa. {file} to plik umieszczony obok i nigdy nie jest serwowany.
pliki route muszą mieć rozszerzenie .js lub .ts.
{d} to grupa tras, pomijana w URL
{d} to slot trasy równoległej, a nie segment URL
{d} dopasowuje też ścieżkę rodzica
{d} to trasa przechwytująca
Endpoint API pod {url}
Strona pod {url}
Zacznij za darmo · Bez karty kredytowej