Een React- of Next.js-app deployen

Een React- of Next.js-app deployen (inclusief SPA-rewrites) | We.Inc

Kies uw type app en host voor het build-commando, de outputmap en het rewrite-bestand dat 404's bij verversen voorkomt op Vercel, Netlify, Cloudflare en GitHub Pages.

Een React- of Next.js-app deployen

Om een React-app te deployen draait u de productiebuild en geeft u de outputmap aan een host: dist voor Vite, out voor een statische export van Next.js. Single page apps hebben ook een rewrite nodig die onbekende paden naar index.html stuurt, anders geeft het verversen van een deeplink een 404. Een volledige Next.js-app heeft een host nodig die Node.js draait.

Build-output per type app

De meeste mislukte React-deploys komen neer op drie dingen: de verkeerde outputmap, een ontbrekende rewrite voor client-side routes, of een Next.js-functie die een server nodig heeft maar naar een statische host is gestuurd. Kies hieronder uw type app en host om de exacte instelling en het bestand voor die combinatie te zien, telkens uit de eigen documentatie van de host.

Veelgestelde vragen

Waarom toont mijn React-app een 404 als ik een pagina ververs?

De router leeft in de browser, maar bij verversen vraagt de browser de server om een bestand zoals /about/index.html dat niet bestaat. Een rewrite die index.html teruggeeft voor onbekende paden laat de router het weer overnemen. Elke host heeft een eigen syntax voor die regel.

Heb ik een rewrite nodig op Cloudflare Pages?

Niet als uw build geen 404.html op het hoogste niveau heeft. Volgens de documentatie van Cloudflare behandelt Pages het project dan als single page app en serveert het de root-index voor elk pad dat geen echt bestand is.

Kan ik een Next.js-app op GitHub Pages zetten?

Alleen als statische export met output: 'export'. GitHub Pages serveert bestanden en kan de Next.js-server niet draaien, dus functies zoals server actions, cookies, rewrites en rendering op aanvraag zijn daar niet beschikbaar.

Wat is het verschil tussen een redirect en een rewrite?

Een redirect stuurt de browser naar een nieuwe URL, waardoor de adresbalk verandert. Een rewrite serveert een ander bestand maar houdt de gevraagde URL, en dat is precies wat een single page app nodig heeft. Netlify markeert een rewrite met status 200.

Waar horen omgevingsvariabelen?

Stel ze in bij de projectinstellingen van de host, niet in een gecommit .env-bestand. Onthoud dat variabelen die naar de browser gaan openbaar zijn, dus houd sleutels die privé moeten blijven op een server of in serverless functions.

Stap één: een schone productiebuild

Stap twee: routing die een verversing overleeft

Stap drie: een domein en een controle

SPA-rewriteregels per host

Waar de catch-all-regel staat (uit de documentatie van elke host, oktober 2026)

Netlify-rewrite in netlify.toml

Dezelfde regel als in het _redirects-bestand van één regel. Status 200 behoudt het adres waar de bezoeker om vroeg.

GitHub Actions-workflow voor een Vite-site

Aangepast van de workflow in de deploygids van Vite (die elke action aan een commit vastpint). Hij bouwt bij elke push naar main en publiceert dist. Zet GitHub Actions aan als bron onder Settings, daarna Pages.

Importeer de repository; Vercel herkent Vite. Voeg dit bestand toe in de root van het project zodat deeplinks de app laden.

Build-commando npm run build, publicatiemap dist. Sla deze regel op als public/_redirects zodat Vite hem naar dist kopieert.

Koppel de repository en kies de Vite-preset. Er is geen regel nodig zolang dist geen 404.html op het hoogste niveau heeft, want Pages serveert dan de root-index voor onbekende paden.

Stel base in op de naam van uw repository, bouw met GitHub Actions en publiceer dist. GitHub Pages kent een eigen 404.html maar geen rewriteregels, dus een gangbare omweg is index.html na de build naar 404.html te kopiëren; die deeplinks laden dan met een 404-status.

Vercel bouwt Next.js direct, dus een statische export is hier optioneel. Houd hem alleen als u overal dezelfde bestanden wilt.

Stel de publicatiemap in op out. Elke route heeft al een eigen HTML-bestand, dus een catch-all-rewrite is niet nodig.

Gebruik npm run build met outputmap out. De export bevat een 404.html, dus Pages serveert die voor ontbrekende paden in plaats van de homepage.

Een statische export is de enige manier om Next.js hier te draaien. Staat de site onder een repositorypad, stel basePath dan daarop in.

Importeer de repository en deploy. Vercel is een van de geverifieerde adapters in de deploymentdocumentatie van Next.js.

Netlify draait Next.js via een eigen integratie, die de Next.js-documentatie nog niet als geverifieerde adapter vermeldt. Kijk in de documentatie ervan of er functies ontbreken.

Cloudflare draait Next.js op Workers via een eigen integratie, ook nog geen geverifieerde adapter. Volg de frameworkgids ervan in plaats van de statische Pages-flow.

Niet mogelijk. GitHub Pages serveert alleen bestanden en kan next start niet draaien. Stap over op een statische export of kies een host die Node.js draait.

Vite + React

Next.js statische export

Volledige Next.js-app

Vercel

Netlify

Cloudflare Pages

GitHub Pages

Deployrecept kiezen

Wat hebt u gebouwd?

Waar gaat het draaien?

Elke combinatie van app en host

Kopiëren

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

Product

Voor wie

Functies

Bronnen

Bedrijf

Sitemap