Next.js is een bekend framework voor React dat je helpt om snelle en moderne websites te maken, die eenvoudig te gebruiken zijn en krachtige functies heeft zoals server-side rendering, het creëren van statische pagina’s en het bouwen van API’s.
Als je een Next.js project wilt starten op je op Ubuntu gebaseerde systemen, zal deze gids je stap voor stap door het proces leiden.
Vereisten
Voordat je begint met het opzetten van een Next.js project, zijn er een paar dingen die je moet installeren op je Linux-systeem, waaronder:
Node.js: Next.js is gebouwd bovenopNode.js, dus je moet Node.js geïnstalleerd hebben.npm: npm (Node Package Manager) wordt gebruikt om de pakketten en afhankelijkheden voor je project te beheren.
Laten we het installatieproces voor zowel Node.js als npm doorlopen.
Stap 1: Installeer Node.js en NPM in Linux
Voordat je nieuwe software installeert, is het een goed idee om je pakketlijst bij te werken om er zeker van te zijn dat je de nieuwste versie van de software installeert die beschikbaar is in de repositories.
sudo apt update
Vervolgens kun je Node.js installeren (wat ook npm installeert), en het is het beste om de versie van Node.js te installeren die gemarkeerd is als LTS (Long-Term Support), omdat dit de meest stabiele en veelgebruikte versie is.
sudo apt install nodejs
Nadat de installatie is voltooid, controleer je of Node.js correct is geïnstalleerd door de versie te controleren:
node -v npm -v
Nu heb je zowel Node.js als npm op je systeem geïnstalleerd.
Stap 2: Installeer en stel je Next.js-project in
Nu je Node.js en npm hebt geïnstalleerd, is het tijd om een nieuw Next.js-project te maken. De eenvoudigste manier om Next.js te installeren is door gebruik te maken van create-next-app, wat een officieel pakket is dat door het Next.js-team wordt geleverd.
sudo npm install -g create-next-app
Nu create-next-app is geïnstalleerd, kun je een nieuw Next.js-project maken.
npx create-next-app@latest my-next-app
Hier is my-next-app de naam van je projectmap. Je kunt het vervangen door elke naam die je verkiest. De npx-opdracht zal het create-next-app-pakket downloaden en uitvoeren, en het zal een nieuw Next.js-project voor je opzetten.
Zodra de opdracht is voltooid, heb je een nieuwe map genaamd my-next-app met de basisstructuur van een Next.js-toepassing.
Stap 3: Voer je Next.js-project uit
Nadat het project is aangemaakt, ga je naar je projectmap en start je de ontwikkelserver:
cd my-next-app npm run dev
Dit commando start de Next.js ontwikkelserver. Standaard draait de server op http://localhost:3000.
Open je browser en ga naar die URL, en je zou de standaard Next.js welkomstpagina moeten zien.
Je kunt nieuwe pagina’s beginnen te maken in de app map. Maak bijvoorbeeld een nieuw bestand about.js aan in de app directory om een Over-pagina te creëren.
Conclusie
Je hebt met succes een nieuw Next.js project opgezet op je Ubuntu machine! Nu kun je beginnen met het bouwen van je webapplicatie door nieuwe pagina’s, componenten en functies toe te voegen.
Next.js maakt het eenvoudig om moderne webapplicaties te bouwen, en met de hulp van deze gids heb je geleerd hoe je een Next.js project installeert en opzet.