Kom igång med Next.js i Windows

En guide som hjälper dig att installera Next.js webbramverk och komma igång i Windows.

Next.js är ett JavaScript-ramverk som är skräddarsytt för att skapa React-baserade webbprogram, som erbjuder stöd för både statiska webbprogram och renderade webbprogram på serversidan. Byggt med bästa praxis i åtanke, möjliggör Next.js att du kan skapa "universella" webbappar på ett konsekvent sätt, vilket kräver minimal konfiguration. Dessa "universella" server-renderade webbappar, även kallade "isomorfa", delar kod mellan klienten och servern. Next.js gör det enkelt för utvecklare att skapa snabba, skalbara och SEO-vänliga webbprogram.

Mer information om React och andra JavaScript-ramverk baserade på React finns på översiktssidan för React .

Förutsättningar

Den här guiden förutsätter att du redan har slutfört stegen för att konfigurera din Node.js utvecklingsmiljö, inklusive:

• Installera den senaste versionen av Windows 10 (version 1903+, Build 18362+) eller Windows 11
• Installera Windows-undersystemet för Linux (WSL) inklusive en Linux-distribution (t.ex. Ubuntu) och kontrollera att det körs i WSL 2-läge. Du kan kontrollera detta genom att öppna PowerShell och ange: wsl -l -v
• Installera Node.js på WSL 2: Detta inkluderar en versionshanterare, pakethanterare, Visual Studio Code och tillägget Fjärrutveckling.

Vi rekommenderar att du använder Windows-undersystemet för Linux när du arbetar med NodeJS-appar för bättre prestandahastighet, systemanropskompatibilitet och för paritet när du kör Linux-servrar eller Docker-containrar.

Viktigt!

Om du installerar en Linux-distribution med WSL skapas en katalog för lagring av filer: \\wsl\Ubuntu-20.04 (ersätt Ubuntu-20.04 med den Linux-distribution du använder). Om du vill öppna den här katalogen i Utforskaren i Windows öppnar du WSL-kommandoraden, väljer din hemkatalog med och cd ~anger sedan kommandot explorer.exe . Var noga med att inte installera NodeJS eller lagra filer som du kommer att arbeta med på den monterade C-enheten (/mnt/c/Users/yourname$). Om du gör det blir installationen och byggtiden avsevärt långsammare.

Installera Next.js

För att installera Next.js, vilket innebär installation av next, react och react-dom:

1. Öppna en WSL-kommandorad (dvs. Ubuntu).

2. Skapa en ny projektmapp: mkdir NextProjects och ange den katalogen: cd NextProjects.

3. Installera Next.js och skapa ett projekt (ersätt "my-next-app" med vad du vill anropa din app): npx create-next-app@latest my-next-app.

4. När paketet har installerats ändrar du kataloger till den nya appmappen och cd my-next-appanvänder code . sedan för att öppna ditt Next.js projekt i VS Code. På så sätt kan du titta på det Next.js ramverk som har skapats för din app. Observera att VS Code öppnade din app i en WSL-Remote miljö (som anges på den gröna fliken längst ned till vänster i VS Code-fönstret). Det innebär att medan du använder VS Code för redigering i Windows-operativsystemet, körs appen fortfarande på Linux-operativsystemet.

   

5. Det finns tre kommandon som du behöver veta när Next.js har installerats:

   • npm run dev för att starta Next.js i utvecklingsläge.
   • npm run build för att skapa programmet för produktionsanvändning.
   • npm start för att starta en Next.js produktionsserver.

   Öppna WSL-terminalen som är integrerad i VS Code (Visa > terminal). Kontrollera att terminalsökvägen är riktad mot projektkatalogen (dvs. ~/NextProjects/my-next-app$). Prova sedan att köra en utvecklingsinstans av din nya Next.js app med hjälp av: npm run dev

6. Den lokala utvecklingsservern startar och när projektsidorna har skapats visas terminalen

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

   Välj den här localhost-länken för att öppna din nya Next.js-app i en webbläsare.

   

7. app/page.tsx Öppna filen i VS Code-redigeraren. Hitta Get started by editing.. och ersätt allt i taggen <p> med This is my new Next.js app!the page title. När webbläsaren fortfarande är öppen för localhost:3000 sparar du ändringen och märker att funktionen för snabbinläsning automatiskt kompilerar och uppdaterar ändringen i webbläsaren.

Du kan använda VS Code-felsökningsprogrammet med din Next.js-app genom att välja F5-nyckeln eller genom att gå till Visa > felsökning (Ctrl+Skift+D) och Visa > felsökningskonsol (Ctrl+Skift+Y) i menyraden. Om du väljer kugghjulsikonen i felsökningsfönstret skapas en startkonfigurationsfil (launch.json) där du kan spara information om felsökningskonfigurationen. För att lära dig mer, se Felsökning i VS Code.

Mer information om Next.jsfinns i Next.js dokument.