Een Next.js-project aanmaken en uitvoeren in ServBay

Overzicht

Next.js is een krachtig React-framework, ontwikkeld en onderhouden door Vercel, en wordt veel gebruikt voor het bouwen van moderne, high-performance webapplicaties. Het biedt tal van kant-en-klare mogelijkheden bovenop React, waardoor ontwikkelaars eenvoudig complexe applicaties kunnen bouwen.

Wat is Next.js?

Next.js is een populair open-source React-framework dat verschillende rendering-methoden ondersteunt, zoals server-side rendering (SSR) en statische site generatie (SSG). Deze features helpen de prestaties te verbeteren, de gebruikerservaring te optimaliseren en de SEO te verhogen. Next.js heeft ingebouwde bestandsroutering, API-routes, code splitting, ondersteuning voor CSS Modules, en biedt zo een volledige ontwikkelervaring.

Belangrijkste eigenschappen en voordelen van Next.js

• Ondersteuning voor meerdere renderstrategieën: Next.js ondersteunt SSR, SSG, client-side rendering (CSR), en hybride methoden. Ontwikkelaars kunnen per usecase de beste optie kiezen.
• Bestandssysteemroutering: Routes worden automatisch gegenereerd op basis van de structuur van de pages- of app-map. Eenvoudig en overzichtelijk.
• API-routes: Maakt het makkelijk om eigen API endpoints binnen het Next.js-project aan te maken, ideaal voor full-stack ontwikkeling.
• Automatische code splitting: Elke pagina wordt als aparte bundle geladen; alleen wat nodig is wordt ingeladen, waardoor de laadtijd optimaliseert.
• Geoptimaliseerde image component (next/image): Automatiseert afbeeldingsgrootte, -formaat en laadschema’s voor betere prestaties.
• Ingebouwde ondersteuning voor CSS en Sass: Maak en beheer eenvoudig je stylesheets.
• Fast Refresh: Biedt directe feedback en snelle code updates tijdens het ontwikkelen.

Met Next.js bouwen ontwikkelaars snel krachtige, schaalbare en goed onderhoudbare moderne webapplicaties.

Next.js-project uitvoeren met ServBay

ServBay biedt een geïntegreerde lokale webontwikkelomgeving, inclusief Node.js en tal van tools. Dankzij de Node.js-omgeving en het Websites-beheer (met o.a. reverse proxy’s en statische bestandsservices) kun je eenvoudig Next.js-projecten maken, ontwikkelen en uitrollen.

Deze gids laat zien hoe je in ServBay een Next.js-project opzet, runt in ontwikkelmodus (via een reverse proxy) en als statische website uitrolt voor productie.

Vereisten

Voordat je begint, zorg dat je het volgende hebt opgezet:

1. ServBay is succesvol geïnstalleerd op macOS.
2. Het vereiste Node.js-pakket is geïnstalleerd en geactiveerd via het Pakketten-beheer van ServBay. Als Node.js nog niet is geïnstalleerd, zie dan Node.js-omgeving gebruiken in ServBay.

Stappenplan

1. Next.js-project aanmaken

Allereerst initialiseren we een nieuw Next.js-project.

1. Open de terminal en navigeer naar de standaard website root van ServBay:

   cd /Applications/ServBay/www

2. Initialiseer het project met create-next-app: Draai het volgende commando om een nieuw Next.js-project te maken. We adviseren de naam servbay-next-app, dat een gelijknamige map aanmaakt in /Applications/ServBay/www.

   npx create-next-app@latest servbay-next-app

   npx voert Node.js-pakken uit; create-next-app@latest gebruikt de nieuwste versie van de initialisatietool. Volg de instructies in de terminal (bijvoorbeeld keuzes voor TypeScript, ESLint, Tailwind CSS, App Router, etc.).

3. Navigeer naar de projectfolder en installeer afhankelijkheden:

   cd servbay-next-app
   npm install

   npm install installeert alle pakketten die in de package.json van het project worden vermeld.

2. Projectoutput aanpassen (optioneel)

Om te checken of alles goed is opgezet, kun je de homepage aanpassen.

1. Open het bestand pages/index.js (indien je de Pages Router gebruikt). Bij gebruik van de App Router, pas je app/page.js aan. Hier volgt het voorbeeld voor de Pages Router:

   # Open het bestand met je favoriete editor, bijvoorbeeld VS Code
   code pages/index.js

2. Pas de inhoud aan zodat de webpagina "Hello ServBay!" toont. Vervang of wijzig de code naar bijvoorbeeld:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>Deze pagina draait via ServBay.</p>
       </div>
     );
   }

   Gebruik je de App Router (app/page.js), dan kan de structuur iets verschillen, maar het aanpassen van de <h1> werkt hetzelfde.

3. Starten in ontwikkelmodus

Tijdens ontwikkeling gebruik je de Next.js-devserver, die hot module replacement (HMR) en Fast Refresh biedt. Met ServBay’s reverse proxy kun je een lokaal domein doorverwijzen naar de lokale devserver-poort.

1. Start de Next.js devserver: In de hoofdmap van je project (/Applications/ServBay/www/servbay-next-app):

   npm run dev -- -p 8585

   Hiermee start je de server op poort 8585. Je kunt eventueel een andere vrije poort kiezen.

2. ServBay-websiteconfiguratie (Reverse Proxy): Open de ServBay-app en ga naar Websites. Klik om een nieuwe site toe te voegen en stel het als volgt in:

   • Naam: Mijn eerste Next.js dev site (of een andere naam)
   • Domein: servbay-next-dev.servbay.demo (wij raden .servbay.demo aan voor lokale testdomeinen)
   • Website Type: Reverse Proxy
   • Proxy IP: 127.0.0.1 (localhost)
   • Proxy Port: 8585 (poort van de Next.js-devserver)

   Sla de instellingen op en pas ze toe. ServBay configureert automatisch Caddy of Nginx (afhankelijk van je ServBay-instellingen) om aanvragen aan servbay-next-dev.servbay.demo door te sturen naar 127.0.0.1:8585.

   Een uitgebreidere uitleg vind je bij Node.js-ontwikkelwebsite toevoegen in ServBay.

3. Website bezoeken in ontwikkelmodus: Open je browser en ga naar https://servbay-next-dev.servbay.demo.

   Omdat ServBay standaard SSL-certificaten instelt voor lokale domeinen (met de ServBay User CA), bezoek je je devsite veilig via HTTPS zonder browserwaarschuwingen. Je kunt ook aangepaste domeinen en gratis SSL-certificaten gebruiken.

4. Productiebouw maken en als statische site uitrollen

Wanneer je Next.js-project af is, bouw je meestal een productiemap. Voor statische Next.js-projecten (output: 'export' of gebruik van next export-commando) is de statische bestandenservice van ServBay perfect.

1. Bouw de productieversie en exporteer het als statische bestanden: In de projectmap (/Applications/ServBay/www/servbay-next-app):

   npm run build
   npm run export

   • npm run build compileert de code en maakt een geoptimaliseerde productiebuild, output naar de .next-folder.
   • npm run export (of het instellen van output: 'export') exporteert de app als pure statische HTML, CSS en JS, geplaatst in de map out.

2. ServBay-website instellen (statische bestandenservice): In de ServBay-app ga je naar Websites, voeg je een nieuwe site toe en stel je in:

   • Naam: Mijn eerste Next.js productie site (of andere naam)
   • Domein: servbay-next-prod.servbay.demo (gebruik bij voorkeur .servbay.demo)
   • Website Type: Statisch
   • Website Root: geef het volledige pad naar de out-map, dus /Applications/ServBay/www/servbay-next-app/out.

   Sla op en pas toe. ServBay configureert de webserver om de content rechtstreeks vanuit /Applications/ServBay/www/servbay-next-app/out te serveren.

3. Bezoek de productieomgeving: Open de browser op https://servbay-next-prod.servbay.demo. Je ziet nu de statische Next.js-website.

   Ook hier zorgt ServBay’s domein- en SSL-management ervoor dat dit veilig via HTTPS gebeurt.

Samenvatting

Met bovenstaande stappen heb je succesvol een Next.js-project aangemaakt in ServBay’s lokale ontwikkelomgeving. Je weet nu hoe je live-voorbeelden in ontwikkelmodus bekijkt via de reverse proxy en hoe je de productiebouw als statische site uitrolt. Dankzij de geïntegreerde tools en het handige Websites-beheer van ServBay is lokale ontwikkeling en testen van Next.js-projecten efficiënter dan ooit.