Wybierz typ aplikacji i hosting, a dostaniesz komendę build, folder wyjściowy i plik rewrite, który usuwa błąd 404 po odświeżeniu na Vercel, Netlify, Cloudflare i GitHub Pages.
Aby wdrożyć aplikację React, uruchom build produkcyjny, a następnie przekaż folder wyjściowy hostingowi: dist dla Vite, out dla statycznego eksportu Next.js. Aplikacje jednostronicowe potrzebują też reguły rewrite, która kieruje nieznane ścieżki do index.html, bo inaczej odświeżenie głębokiego linku zwraca 404. Pełna aplikacja Next.js wymaga hostingu, który uruchamia Node.js.
Wynik buildu według typu aplikacji
Większość nieudanych wdrożeń React sprowadza się do trzech rzeczy: złego folderu wyjściowego, brakującej reguły rewrite dla tras po stronie klienta albo funkcji Next.js wymagającej serwera, wysłanej na hosting statyczny. Wybierz poniżej typ aplikacji i hosting, aby zobaczyć dokładne ustawienie i plik dla tej pary, każde wzięte z dokumentacji danego hostingu.
Router działa w przeglądarce, ale odświeżenie prosi serwer o plik, na przykład /about/index.html, który nie istnieje. Reguła rewrite zwracająca index.html dla nieznanych ścieżek pozwala routerowi ponownie przejąć kontrolę. Każdy hosting ma własną składnię tej reguły.
Nie, jeśli Twój build nie ma pliku 404.html na najwyższym poziomie. Według dokumentacji Cloudflare Pages traktuje wtedy projekt jako aplikację jednostronicową i serwuje główny index dla każdej ścieżki, która nie jest prawdziwym plikiem.
Tylko jako statyczny eksport z output: 'export'. GitHub Pages serwuje pliki i nie potrafi uruchomić serwera Next.js, więc funkcje takie jak server actions, cookies, reguły rewrite i renderowanie na żądanie są tam niedostępne.
Przekierowanie wysyła przeglądarkę pod nowy URL, co zmienia pasek adresu. Rewrite serwuje inny plik, zachowując żądany URL, i właśnie tego potrzebuje aplikacja jednostronicowa. Netlify oznacza rewrite statusem 200.
Ustaw je w ustawieniach projektu na hostingu, a nie w zacommitowanym pliku .env. Pamiętaj, że zmienne wysyłane do przeglądarki są publiczne, więc klucze, które muszą pozostać prywatne, trzymaj na serwerze lub w funkcjach serverless.
Gdzie trafia reguła catch-all (według dokumentacji każdego hostingu, październik 2026)
Ta sama reguła co jednoliniowy plik _redirects. Status 200 zachowuje adres, o który poprosił odwiedzający.
Na podstawie workflow z przewodnika wdrażania Vite (który przypina każdą akcję do commita). Buduje przy każdym pushu do main i publikuje dist. Włącz GitHub Actions jako źródło w Settings, a potem Pages.
Zaimportuj repozytorium; Vercel wykryje Vite. Dodaj ten plik w katalogu głównym projektu, aby głębokie linki ładowały aplikację.
Komenda build npm run build, katalog publikacji dist. Zapisz tę linię jako public/_redirects, aby Vite skopiował ją do dist.
Podłącz repozytorium i wybierz preset Vite. Żadna reguła nie jest potrzebna, dopóki dist nie ma pliku 404.html na najwyższym poziomie, bo wtedy Pages serwuje główny index dla nieznanych ścieżek.
Ustaw base na nazwę repozytorium, buduj przez GitHub Actions i publikuj dist. GitHub Pages obsługuje własny 404.html, ale nie ma reguł rewrite, więc popularnym obejściem jest skopiowanie index.html do 404.html po buildzie; głębokie linki ładują się wtedy ze statusem 404.
Vercel buduje Next.js bezpośrednio, więc statyczny eksport jest tu opcjonalny. Zostaw go tylko wtedy, gdy chcesz mieć wszędzie te same pliki.
Ustaw katalog publikacji na out. Każda trasa ma już własny plik HTML, więc reguła rewrite catch-all nie jest potrzebna.
Użyj npm run build z katalogiem wyjściowym out. Eksport zawiera plik 404.html, więc Pages serwuje go dla brakujących ścieżek zamiast strony głównej.
Statyczny eksport to jedyny sposób na uruchomienie tu Next.js. Jeśli strona działa pod ścieżką repozytorium, ustaw basePath tak, aby do niej pasował.
Zaimportuj repozytorium i wdróż. Vercel jest jednym ze zweryfikowanych adapterów wymienionych w dokumentacji wdrażania Next.js.
Netlify uruchamia Next.js przez własną integrację, którą dokumentacja Next.js wymienia jako jeszcze niezweryfikowany adapter. Sprawdź w jej dokumentacji ewentualne braki funkcji.
Cloudflare uruchamia Next.js na Workers przez własną integrację, również jeszcze niezweryfikowany adapter. Postępuj według jej przewodnika dla frameworka, a nie według statycznego procesu Pages.
Niemożliwe. GitHub Pages tylko serwuje pliki i nie potrafi uruchomić next start. Przejdź na statyczny eksport lub wybierz hosting, który uruchamia Node.js.
Vite + React
Statyczny eksport Next.js
Pełna aplikacja Next.js
Vercel
Netlify
Cloudflare Pages
GitHub Pages
Co zbudowałeś?
Gdzie ma działać?
Wszystkie pary aplikacji i hostingu
Kopiuj
Zacznij za darmo · Bez karty kredytowej