Udostępnij przez

Rozpocznij pracę z Next.js w systemie Windows

Przewodnik ułatwiając zainstalowanie platformy internetowej Next.js i rozpoczęcie pracy w systemie Windows.

Next.js jest strukturą Języka JavaScript dostosowaną do tworzenia aplikacji internetowych opartych na platformie React, która oferuje obsługę zarówno statycznych, jak i renderowanych aplikacji internetowych po stronie serwera. Opracowane z myślą o najlepszych rozwiązaniach Next.js umożliwiają tworzenie "uniwersalnych" aplikacji internetowych w spójny sposób, co wymaga minimalnej konfiguracji. Te "uniwersalne" aplikacje internetowe renderowane na serwerze, nazywane również "izomorficzne", współdzielą kod między klientem a serwerem. Next.js umożliwia deweloperom łatwe tworzenie szybkich, skalowalnych i przyjaznych dla seo aplikacji internetowych.

Aby dowiedzieć się więcej o React i innych frameworkach JavaScript opartych na React, zobacz stronę przeglądową React .

Wymagania wstępne

W tym przewodniku założono, że zostały już wykonane kroki konfigurowania środowiska deweloperskiego Node.js, w tym:

  • Zainstaluj najnowszą wersję systemu Windows 10 (wersja 1903+, kompilacja 18362+) lub Windows 11
  • Zainstaluj podsystem Windows dla systemu Linux (WSL), w tym dystrybucję systemu Linux (np. Ubuntu) i upewnij się, że działa w trybie WSL 2. Możesz to sprawdzić, otwierając program PowerShell i wprowadzając następujące polecenie: wsl -l -v
  • Install Node.js on WSL 2: Obejmuje to menedżera wersji, menedżera pakietów, Visual Studio Code i rozszerzenie do zdalnego programowania.

Zalecamy używanie podsystemu Windows dla systemu Linux podczas pracy z aplikacjami NodeJS w celu zapewnienia lepszej szybkości wydajności, zgodności wywołań systemowych i parzystości podczas uruchamiania serwerów z systemem Linux lub kontenerów platformy Docker.

Ważne

Zainstalowanie dystrybucji systemu Linux za pomocą programu WSL spowoduje utworzenie katalogu do przechowywania plików: \\wsl\Ubuntu-20.04 (zastąpić ubuntu-20.04 dowolną dystrybucją systemu Linux, której używasz). Aby otworzyć ten katalog w Eksploratorze plików systemu Windows, otwórz wiersz polecenia WSL, wybierz katalog główny przy użyciu cd ~polecenia , a następnie wprowadź polecenie explorer.exe . Zachowaj ostrożność, aby nie instalować środowiska NodeJS lub przechowywać pliki, z którymi będziesz pracować na zainstalowanym dysku C (/mnt/c/Users/yourname$). W ten sposób znacznie spowolni czas instalacji i kompilacji.

Zainstaluj Next.js

Aby zainstalować Next.js, które obejmuje instalację Next.js, react i react-dom:

  1. Otwórz wiersz polecenia WSL (tj. Ubuntu).

  2. Utwórz nowy folder projektu: mkdir NextProjects i wprowadź ten katalog: cd NextProjects.

  3. Zainstaluj Next.js i utwórz projekt (zastępując "my-next-app" nazwą projektu, którą chcesz): npx create-next-app@latest my-next-app.

  4. Po zainstalowaniu pakietu zmień katalogi na nowy folder aplikacji, cd my-next-appa następnie użyj polecenia code . , aby otworzyć projekt Next.js w programie VS Code. Umożliwi to zapoznanie się z platformą Next.js utworzoną dla aplikacji. Zwróć uwagę, że program VS Code otworzył aplikację w środowisku WSL-Remote (jak wskazano na zielonej karcie w lewym dolnym rogu okna programu VS Code). Oznacza to, że podczas korzystania z programu VS Code do edycji w systemie operacyjnym Windows aplikacja nadal działa w systemie operacyjnym Linux.

    WSL-Remote rozszerzenie

  5. Istnieją 3 polecenia, które należy znać po zainstalowaniu Next.js:

    • npm run dev aby uruchomić Next.js w trybie deweloperskim.
    • npm run build w celu skompilowania aplikacji na potrzeby użycia produkcyjnego.
    • npm start aby uruchomić serwer produkcyjny Next.js.

    Otwórz terminal programu WSL zintegrowany w programie VS Code (Wyświetl > terminal). Upewnij się, że ścieżka terminalu wskazuje na katalog projektu (to znaczy ~/NextProjects/my-next-app$). Następnie spróbuj uruchomić instancję deweloperską nowej aplikacji Next.js za pomocą: npm run dev

  6. Lokalny serwer deweloperski zostanie uruchomiony, a po zakończeniu budowania stron projektu, na terminalu zostaną wyświetlone informacje.

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

    Wybierz ten link localhost, aby otworzyć nową aplikację Next.js w przeglądarce internetowej.

    Twoja Next.js aplikacja działa na localhost:3000

  7. app/page.tsx Otwórz plik w edytorze programu VS Code. Znajdź Get started by editing.. i zastąp wszystko wewnątrz tagu <p> ciągiem This is my new Next.js app!the page title. Mając wciąż otwartą przeglądarkę internetową pod adresem localhost:3000, zapisz zmianę i zauważ, jak funkcja hot-reload automatycznie skompiluje i zaktualizuje zmianę w przeglądarce.

Debuggera programu VS Code można użyć z aplikacją Next.js, wybierając klawisz F5 lub przechodząc do pozycji Widok > Debug (Ctrl+Shift+D) i Widok > Konsola debugowania (Ctrl+Shift+Y) na pasku menu. Jeśli wybierzesz ikonę koła zębatego w oknie Debugowanie, zostanie utworzony plik konfiguracji uruchamiania (launch.json), który umożliwi zapisanie szczegółów konfiguracji debugowania. Aby dowiedzieć się więcej, zobacz Debugowanie w VS Code.

Okno debugowania programu VS Code i ikona konfiguracji launch.json

Aby dowiedzieć się więcej o Next.js, zobacz dokumentacjęNext.js.

  • Last updated on