Kezdje el a(z) Next.js használatát Windows rendszeren

Útmutató a Next.js webes keretrendszer telepítéséhez és a Windowson való üzembe helyezéséhez.

Next.js egy JavaScript-keretrendszer, amely React-alapú webalkalmazások készítésére van kialakítva, és támogatja mind a statikus, mind a kiszolgálóoldali renderelt webalkalmazásokat. Az ajánlott eljárásokra épülő Next.js lehetővé teszi az "univerzális" webalkalmazások konzisztens létrehozását, minimális konfigurálást igénylő módon. Ezek az "univerzális" kiszolgáló által renderelt webalkalmazások, más néven "izomorfikusak", kódot osztanak meg az ügyfél és a kiszolgáló között. Next.js lehetővé teszi a fejlesztők számára, hogy gyorsan, skálázható és SEO-barát webalkalmazásokat hozzanak létre könnyedén.

A React és más, Reacten alapuló JavaScript-keretrendszerekről a React áttekintési oldalán talál további információt.

Előfeltételek

Ez az útmutató feltételezi, hogy már elvégezte a Node.js fejlesztési környezet beállításának lépéseit, beleértve a következőket:

• Telepítse a Windows 10 legújabb verzióját (1903-es verzió, 18362-es build+) vagy Windows 11-et
• Telepítse a Linuxhoz készült Windows-alrendszert (WSL), beleértve a Linux-disztribúciót (például az Ubuntu-t), és győződjön meg arról, hogy wSL 2 módban fut. Ezt a PowerShell megnyitásával és a következő beírással ellenőrizheti: wsl -l -v
• Telepítse a Node.js-et a WSL 2-re: Ez magában foglalja a verziókezelőt, a csomagkezelőt, a Visual Studio Code-ot és a távoli fejlesztési bővítményt.

Javasoljuk, hogy a NodeJS-alkalmazásokkal való munka során a Windows alrendszert használja a jobb teljesítménysebesség, a rendszerhívások kompatibilitása és a Linux-kiszolgálók vagy Docker-tárolók futtatásakor a paritás érdekében.

Fontos

A Linux-disztribúció WSL-vel való telepítése létrehoz egy könyvtárat a fájlok tárolásához: \\wsl\Ubuntu-20.04 (cserélje le az Ubuntu-20.04-et a használt Linux-disztribúcióra). Ha meg szeretné nyitni ezt a könyvtárat a Windows Fájlkezelőben, nyissa meg a WSL parancssort, válassza ki a kezdőkönyvtárat a használatával cd ~, majd írja be a parancsot explorer.exe . Ügyeljen arra, hogy ne telepítse a NodeJS-t, és ne tárolja a csatlakoztatott C meghajtón (/mnt/c/Users/yourname$). Ez jelentősen lelassítja a telepítési és buildelési időt.

Next.js telepítése

A Next.jstelepítéséhez, amely magában foglalja a következő, a react és a react-dom telepítését is:

1. Nyisson meg egy WSL-parancssort (azaz. Ubuntu).

2. Hozzon létre egy új projektmappát: mkdir NextProjects, és adja meg a következő könyvtárat: cd NextProjects.

3. Telepítse a(z) Next.js-t, és hozzon létre egy projektet (cserélje le a "my-next-app" nevet arra, amit az alkalmazásának szeretne adni): npx create-next-app@latest my-next-app.

4. A csomag telepítése után módosítsa a könyvtárakat az új alkalmazásmappába, cd my-next-appmajd nyissa code . meg a Next.js projektet a VS Code-ban. Ez lehetővé teszi az alkalmazáshoz létrehozott Next.js keretrendszer megtekintését. Figyelje meg, hogy a VS Code WSL-Remote környezetben nyitotta meg az alkalmazást (a VS Code ablakának bal alsó sarkában lévő zöld lapon látható módon). Ez azt jelenti, hogy amíg a VS Code-ot használja a Windows operációs rendszeren végzett szerkesztéshez, az továbbra is futtatja az alkalmazást a Linux operációs rendszeren.

   

5. A Next.js telepítése után 3 parancsot kell tudnia:

   • npm run dev indítsd el Next.js fejlesztési módban.
   • npm run build az alkalmazás éles használatra való létrehozásához.
   • npm start Next.js gyártási kiszolgáló indításához.

   Nyissa meg a VS Code-ba integrált WSL-terminált (Nézet > Terminál). Győződjön meg arról, hogy a terminál elérési útja a projektkönyvtárra mutat (például "~/NextProjects/my-next-app$"). Ezután próbálkozzon az új Next.js alkalmazás fejlesztési példányának futtatásával a következő használatával: npm run dev

6. A helyi fejlesztési kiszolgáló elindul, és ha a projektoldalak elkészültek, a terminál megjelenik

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

   Ezt a localhost hivatkozást választva megnyithatja az új Next.js alkalmazást egy webböngészőben.

   

7. Nyissa meg a fájlt a app/page.tsx VS Code-szerkesztőben. Keresse meg a Get started by editing..-t és cserélje le a <p> címkén belüli elemeket a This is my new Next.js app!the page title-re. Miközben a böngésző még mindig nyitva van a localhost:3000 oldalon, mentse a módosítását, és figyelje meg, hogy a gyors újratöltési funkció automatikusan lefordítja és frissíti a módosítást a böngészőben.

A VS Code hibakeresőjét az Next.js alkalmazással használhatja az F5 billentyű lenyomásával, vagy a menüsávon válassza a „Nézet” > „Hibakeresés” (Ctrl+Shift+D) és a „Nézet” > „Hibakeresési konzol” (Ctrl+Shift+Y) lehetőséget. Ha a hibakeresési ablakban a fogaskerék ikont választja, a hibakeresési beállítások részleteinek mentéséhez létrejön egy indítási konfigurációs (launch.json) fájl. További információkért lásd: VS Code hibakeresés.

Ha többet szeretne megtudni a Next.js-ról, tekintse meg a Next.js dokumentációját.