Začněte s Next.js ve Windows

Průvodce, který vám pomůže s instalací webové architektury Next.js a zprovozněním ve Windows.

Next.js je javascriptová architektura přizpůsobená pro vytváření webových aplikací založených na Reactu a nabízí podporu statických i serverových webových aplikací na straně serveru. Vytvořené s ohledem na osvědčené postupy, Next.js umožňuje vytvářet "univerzální" webové aplikace konzistentně, což vyžaduje minimální konfiguraci. Tyto "univerzální" webové aplikace vykreslené serverem, označované také jako "isomorfní", sdílejí kód mezi klientem a serverem. Next.js umožňuje vývojářům snadno vytvářet rychlé, škálovatelné a seO přívětivé webové aplikace.

Další informace o Reactu a dalších javascriptových architekturách založených na Reactu najdete na stránce s přehledem Reactu .

Požadavky

V této příručce se předpokládá, že jste už dokončili kroky nastavení Node.js vývojového prostředí, včetně těchto:

• Instalace nejnovější verze Windows 10 (verze 1903+, build 18362+) nebo Windows 11
• nainstalovat subsystém Windows pro Linux (WSL), včetně distribuce Linuxu (například Ubuntu) a ujistěte se, že je spuštěný v režimu WSL 2. Můžete to zkontrolovat tak, že otevřete PowerShell a zadáte: wsl -l -v
• Nainstalujte Node.js do WSL 2: To zahrnuje správce verzí, správce balíčků, Visual Studio Code a rozšíření pro vzdálený vývoj.

Při práci s aplikacemi NodeJS doporučujeme používat subsystém Windows pro Linux, aby se zlepšila rychlost výkonu, kompatibilita volání systému a parita při spouštění linuxových serverů nebo kontejnerů Dockeru.

Důležité

Instalace linuxové distribuce pomocí WSL vytvoří adresář pro ukládání souborů: \\wsl\Ubuntu-20.04 (nahraďte Ubuntu-20.04 libovolnou distribucí Linuxu, kterou používáte). Pokud chcete tento adresář otevřít v Průzkumníku souborů Windows, otevřete příkazový řádek WSL, vyberte svůj domovský adresář pomocí cd ~a pak zadejte příkaz explorer.exe . Dávejte pozor, abyste nenainstalovali NodeJS nebo ukládal soubory, se kterými budete pracovat na připojené jednotce C (/mnt/c/Users/yourname$). Tím se výrazně zpomalí doba instalace a sestavení.

Nainstalujte Next.js

Chcete-li nainstalovat Next.js, která zahrnuje instalaci next, react a react-dom:

1. Otevřete příkazový řádek WSL (tj. Ubuntu).

2. Vytvořte novou složku projektu: mkdir NextProjects a zadejte tento adresář: cd NextProjects.

3. Nainstalovat Next.js a vytvořit projekt (nahradit "my-next-app" čímkoli chcete nazvat svou aplikaci): npx create-next-app@latest my-next-app.

4. Jakmile je balíček nainstalován, přejděte do nové složky aplikace cd my-next-app a poté použijte code . k otevření projektu Next.js v editoru VS Code. To vám umožní podívat se na architekturu Next.js, která byla vytvořena pro vaši aplikaci. Všimněte si, že VS Code otevřel vaši aplikaci v prostředí WSL-Remote (jak je uvedeno na zelené kartě v levém dolním rohu okna VS Code). To znamená, že když k úpravám operačního systému Windows používáte VS Code, stále běží vaše aplikace v operačním systému Linux.

   

5. Po instalaci Next.js potřebujete vědět 3 příkazy:

   • npm run dev a spusťte Next.js ve vývojovém režimu.
   • npm run build k sestavení aplikace pro produkční využití.
   • npm start pro spuštění Next.js produkčního serveru.

   Otevřete terminál WSL integrovaný ve VS Code (Zobrazení > Terminál). Ujistěte se, že cesta terminálu odkazuje na adresář projektu (tj. ~/NextProjects/my-next-app$). Pak zkuste spustit instanci vývoje nové aplikace Next.js pomocí: npm run dev

6. Místní vývojový server se spustí a po sestavení stránek projektu se zobrazí terminál.

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

   Výběrem tohoto odkazu localhost otevřete novou aplikaci Next.js ve webovém prohlížeči.

   

7. Otevřete soubor v editoru app/page.tsx VS Code. Najděte Get started by editing.. a nahraďte vše uvnitř značky <p> pomocí This is my new Next.js app!the page title. Když máte webový prohlížeč stále otevřený na localhost:3000, uložte změnu a všimněte si, že funkce automatického načítání okamžitě zkompiluje a aktualizuje vaši změnu v prohlížeči.

Můžete použít ladicí nástroj VS Code s aplikací Next.js tak, že vyberete klávesu F5, nebo přejdete na Zobrazit > Ladění (Ctrl+Shift+D) a Zobrazit > ladicí konzoli (Ctrl+Shift+Y) v nabídce. Pokud v okně Ladění vyberete ikonu ozubeného kola, vytvoří se soubor konfigurace spuštění (launch.json), který uloží podrobnosti o nastavení procesu ladění. Další informace o ladění ve VS Code najdete v tématu .

Další informace o Next.jsnajdete v dokumentaci Next.js.