6. Deploying Next.js

27-10-2024Ongeveer 7 minutenOngeveer 1100 woorden

6. Deploying Next.js

Dit hoofdstuk bespreekt hoe je een Next.js applicatie kunt deployen via Vercel^[1] en Neon.

Notitie

Deze guide werkt niet voor versies van Next die kwetsbaar zijn voor de React2Shell exploit. Afhankelijk van je Next versie moet je upgraden naar een veilige patchversion, voor meer informatie kan je deze blogpost raadplegen.

Je zoekt hier het juiste versienummer op en past de Next versie vervolgens aan in package.json. Tenslotte moet je nog een nieuwe pnpm install doen.

Vercel CLI

Info

Deze handleiding beschrijft hoe je een project manueel kunt deployen via de CLI. Het is ook mogelijk om dit geautomatiseerd te doen via GitHub actions, maar aangezien het aantal build minuten in de GitHub-organisatie beperkt is, wordt dit hier niet besproken.

Begin met de Vercel CLI globaal te installeren.

Vervolgens gebruik je onderstaand commando om in te loggen in the Vercel CLI. Als je nog geen Vercel account hebt, kan je die aanmaken via de CLI of vercel.com.

vercel login

Project linken

Het lokale project moet gelinkt worden aan een project in het Vercel dashboard, hiervoor voer je onderstaand commando uit in de root van je project.

vercel link

Dit commando produceert ongeveer volgende output:

Vercel CLI 39.1.2
? Set up “~/Projects/backend_lecture7_example”? yes
? Which scope should contain your project? (Use arrow keys)
❯ sebastiaanhenau's projects
? Link to existing project? no
? What’s your project’s name? voorbeeld_project
? In which directory is your code located? ./

De standaard build opties moeten overschreven worden, het Next project builden is niet voldoende omdat eventuele Prisma migrations ook uitgevoerd moeten worden.

Auto-detected Project Settings (Next.js):
- Build Command: next build
- Development Command: next dev --port $PORT
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: Next.js default
? Want to modify these settings? yes
? Which settings would you like to overwrite (select multiple)?
❯◉ Build Command
 ◯ Development Command
 ◯ Output Directory

Pas het buildcommando aan naar:

? What's your Build Command? prisma migrate deploy && next build
✅  Linked to sebastiaanhenaus-projects/test (created .vercel)

Tenslotte wordt er nog gevraagd of je het project wilt linken aan git, dit doe je best niet. Als je Vercel account en GitHub email (in je lokale config, niet dat van je GitHub account) verschillen, kan je geen build uploaden.

? Detected a repository. Connect it to this project? no

Database koppelen

Via het Vercel dashboard link je het project aan een Postgres database. Kies in het dashboard voor het project dat je daarjuist aangemaakt hebben.

Vervolgens navigeer je naar het "Storage" tabblad.

Binnen het storage tab kan je verschillende databases selecteren. In deze appendix gebruiken we Neon, een serverless^[2] Postgres database. Om de database aan te maken kies je voor Neon onder "Marketplace Database Providers".

Accepteer de voorwaarden en kies een regio waar de database gehost moet worden (zo dicht mogelijk bij de gebruikers). Laat alle andere opties op de default staan en klik op "Continue" en vervolgens op "Create".

Vervolgens ga je opnieuw naar het "Storage" tab en druk je op "Connect Project".

Kies in het dialog venster vervolgens voor de default instellingen en druk op "Connect".

Environment variabelen toevoegen

Als je API's nodig hebt waarvan je de keys niet wilt publiceren, of als je een private en public key nodig hebt om een JWT te ondertekenen en te verifiëren, kan je deze keys toevoegen aan de environment variabelen van Vercel.

Ga hiervoor naar de projectinstellingen en navigeer naar het "Settings" tabblad, kies vervolgens voor "Environment Variables".

De Prisma environment variables moeten niet toegevoegd worden, de database connectie die je hierboven aangemaakt hebt, heeft dit automatisch gedaan.

Waarschuwing

Je zet best ook de sensitive vlag aan als je geheime data zoals wachtwoorden, API keys en private keys toevoegt. Dit is enkel een beveiligingsmaatregel en heeft geen invloed op de werking van de variabelen.

Project builden & deployen

Om een project te builden heb je twee keuzes, ofwel build je het project in de cloud (op Vercel hun servers) of je build het lokaal en upload de build naar Vercel. We raden aan om je project lokaal te builden zodat je sneller feedback krijgt en build-errors kunt oplossen.

Lokaal builden

Voordat je jouw project lokaal kunt builden, moet je de environment variables die hierboven gedefinieerd zijn (database en keys) van de Vercel servers downloaden. Dit doe je met onderstaand commando:

vercel pull --prod

Vervolgens maak je een productiebuild via onderstaand commando.

vercel build --prod

Tenslotte moet je onderstaand commando uitvoeren om je applicatie online te plaatsen.

vercel deploy --prebuilt --prod

Info

Als bovenstaand commando problemen geeft, kan je de --prebuilt flag weglaten en Vercel zal de applicatie zelf builden op hun servers. Het commando wordt dan:

vercel deploy --prod

Als je een Next applicatie wilt deployen op je eigen VPS, kan je gebruik maken van volgende tutorial: https://ronald.ink/zero-configuration-nextjs-deployment-to-a-self-hosted-vps-with-kamal-a-comprehensive-guide/ ↩︎
Serverless betekent dat er geen server is die constant opstaat en wacht om requests af te handelen. Natuurlijk is er wel zo'n server, maar die is geen onderdeel van jouw applicatie en wordt door de provider beheerd. Zodra een request binnenkomt bij de gateway server, wordt er een app-specifieke server opgestart om dat request af te handelen. Deze server blijft een gelimiteerde tijd aan staan (een vijftal minuten) en wordt dan weer afgesloten. Afhankelijk van de load kunnen er op een gegeven moment 0, 1, of meerdere servers actief zijn. Omdat de serverfuncties automatisch schalen, kost een serverless architectuur heel weinig tot niets als deze niet actief gebruikt worden. Het probleem is dat requests langer kunnen duren als de server niet actief is, omdat er dan een nieuwe server moet starten (cold-start), kan een requests van 100ms tot enkele seconden langer duren. ↩︎