Aan de slag met Next.js in Windows

Een handleiding om u te helpen het Next.js webframework te installeren en aan de slag te gaan met Windows.

Next.js is een JavaScript-framework dat is afgestemd op het bouwen van react-gebaseerde webtoepassingen, die ondersteuning biedt voor zowel statische als renderende webtoepassingen aan de serverzijde. Met de best practices in gedachten stelt Next.js u in staat om op een consistente manier ‘universale’ web-apps te maken, waarvoor minimale configuratie nodig is. Deze 'universele' door de server gerenderde web-apps, ook wel 'isomorf' genoemd, delen code tussen de client en de server. Next.js stelt ontwikkelaars in staat om eenvoudig snelle, schaalbare en SEO-vriendelijke webtoepassingen te maken.

Zie de overzichtspagina van React voor meer informatie over React en andere JavaScript-frameworks op basis van React.

Vereiste voorwaarden

In deze handleiding wordt ervan uitgegaan dat u de stappen voor het instellen van uw Node.js ontwikkelomgeving al hebt voltooid, waaronder:

• Installeer de nieuwste versie van Windows 10 (versie 1903+, build 18362+) of Windows 11
• Installeer het Windows-subsysteem voor Linux (WSL), inclusief een Linux-distributie (zoals Ubuntu) en zorg ervoor dat het wordt uitgevoerd in de WSL 2-modus. U kunt dit controleren door PowerShell te openen en het volgende in te voeren: wsl -l -v
• Installeer Node.js op WSL 2: dit omvat een versiebeheer, pakketbeheer, Visual Studio Code en de extensie Voor externe ontwikkeling.

U wordt aangeraden het Windows-subsysteem voor Linux te gebruiken bij het werken met NodeJS-apps voor betere prestaties, compatibiliteit van systeemoproepen en pariteit bij het uitvoeren van Linux-servers of Docker-containers.

Belangrijk

Als u een Linux-distributie met WSL installeert, wordt er een map gemaakt voor het opslaan van bestanden: \\wsl\Ubuntu-20.04 (vervang Ubuntu-20.04 door elke Linux-distributie die u gebruikt). Als u deze map wilt openen in Windows Verkenner, opent u de WSL-opdrachtregel, selecteert u de basismap met behulp van cd ~en voert u de opdracht in explorer.exe . Zorg ervoor dat u NodeJS niet installeert of bestanden opslaat waarmee u werkt op het gekoppelde C-station (/mnt/c/Users/yourname$). Als u dit doet, worden de installatie- en buildtijden aanzienlijk vertraagd.

Next.js installeren

Voor het installeren van Next.js, waaronder het installeren van Next.js, react en react-dom:

1. Open een WSL-commandoregel (bijvoorbeeld, Ubuntu).

2. Maak een nieuwe projectmap: mkdir NextProjects en voer die map in: cd NextProjects.

3. Installeer Next.js en maak een project (vervang 'my-next-app' door alles wat u uw app wilt noemen): npx create-next-app@latest my-next-app.

4. Zodra het pakket is geïnstalleerd, navigeert u naar de nieuwe app-map cd my-next-app en opent u het Next.js-project in VS Code met code .. Hiermee kunt u het Next.js framework bekijken dat voor uw app is gemaakt. U ziet dat VS Code uw app heeft geopend in een WSL-Remote-omgeving (zoals aangegeven op het groene tabblad linksonder in het VS Code-venster). Dit betekent dat terwijl u VS Code gebruikt voor bewerking op het Windows-besturingssysteem, uw app nog steeds wordt uitgevoerd op het Linux-besturingssysteem.

   

5. Er zijn drie opdrachten die u moet weten wanneer Next.js is geïnstalleerd:

   • npm run dev om Next.js te starten in de ontwikkelmodus.
   • npm run build om de toepassing te bouwen voor productiegebruik.
   • npm start om een Next.js productieserver te starten.

   Open de geïntegreerde WSL terminal in VS Code (View > Terminal). Zorg ervoor dat het terminalpad naar uw projectmap wordt verwezen (bijvoorbeeld ~/NextProjects/my-next-app$). Voer vervolgens een ontwikkelingsexemplaar van uw nieuwe Next.js-app uit met: npm run dev

6. De lokale ontwikkelserver wordt gestart en zodra de projectpagina's zijn gebouwd, wordt uw terminal weergegeven

   - Local: http://localhost:3000
   ✔ Ready
   

   Selecteer deze localhost-koppeling om uw nieuwe Next.js-app te openen in een webbrowser.

   

7. Open het app/page.tsx-bestand in de VS Code-editor. Vind Get started by editing.. en vervang alles binnen de <p> tag door This is my new Next.js app!the page title. Als uw webbrowser nog steeds geopend is op localhost:3000, slaat u uw wijziging op en ziet u dat de hot-reloadfunctie uw wijziging automatisch compileert en bijwerkt in de browser.

U kunt de debugger van VS Code gebruiken met uw Next.js-app door op de F5-toets te drukken of door naar Weergave > Foutopsporing (Ctrl+Shift+D) en Weergave > Foutopsporingsconsole (Ctrl+Shift+Y) in de menubalk te gaan. Als u het tandwielpictogram selecteert in het venster Foutopsporing, wordt er een opstartconfiguratiebestand (launch.json) gemaakt om foutopsporingsinstellingen op te slaan. Zie VS Code-foutopsporingvoor meer informatie.

Voor meer informatie over Next.js, zie de Next.js documentatie.