In deze handleiding zullen we uitleggen hoe je Next.js kunt installeren op Ubuntu 22.04. Next.js is een populair React-framework waarmee je krachtige en schaalbare webapplicaties kunt bouwen.
Vereisten
- Een server VPS met Ubuntu 22.04
- SSH-toegang
- Node.js versie 12.22.0 of hoger
- npm of yarn package manager
Stap 1: Update jouw Ubuntu-pakketlijst
Open de terminal en voer de volgende commando’s uit om de pakketlijst te updaten:
sudo apt update && sudo apt upgrade -yStap 2: Installeer Node.js
Next.js vereist Node.js. Om Node.js te installeren, gebruik je het volgende commando:
sudo apt install nodejsInstalleer ook npm, de Node.js package manager, indien deze nog niet geïnstalleerd is:
sudo apt install npmStap 3: Controleer de Node.js en npm versies
Zorg ervoor dat Node.js en npm correct zijn geïnstalleerd door de versies te controleren:
node -vnpm -vStap 4: Maak een nieuw Next.js project
Gebruik de npm package manager om een nieuw Next.js project te creëren. Voer het volgende commando uit in de terminal:
npx create-next-app@latest mijn-nextjs-appNavigeer vervolgens naar de nieuwe projectmap:
cd mijn-nextjs-appStap 5: Start de Next.js ontwikkelserver
Om de ontwikkelserver te starten, gebruik je het volgende commando:
npm run devDe standaard ontwikkelserver draait op poort 3000. Open jouw browser en ga naar http://localhost:3000 om jouw nieuwe Next.js-app te bekijken.
Stap 6: Configureren voor productie
Om jouw applicatie voor productie te bouwen en te starten, gebruik je de volgende commando’s:
npm run buildnpm startStap 7: Host jouw Next.js-app op een server
Om jouw Next.js-app live te hosten, heb je een server VPS nodig. Upload jouw projectbestanden naar de server en volg de instructies voor het instellen van een Node.js omgeving op de VPS.
Conclusie
Je hebt nu succesvol Next.js geïnstalleerd en een basisproject op Ubuntu 22.04 opgezet. Door jouw project op een server VPS te hosten, kun je jouw webapplicatie wereldwijd toegankelijk maken. Voor meer informatie en documentatie, raadpleeg de officiële Next.js website.
