Next.js vs Node.js: framework kontra runtime, wyjaśnienie | We.Inc
Node.js uruchamia JavaScript poza przeglądarką, a Next.js to framework React działający na nim. Zobacz stos warstwa po warstwie, jeden endpoint w obu wersjach i kiedy czego używać.
Node.js to runtime: program, który wykonuje JavaScript na serwerze lub na Twoim laptopie. Next.js to framework React do budowania stron, a jego narzędzia budowania i serwer działają na Node.js. Wybór rzadko więc brzmi jedno albo drugie. Każda aplikacja Next.js potrzebuje pod spodem Node.js, a aplikacja Node.js nie musi mieć nic wspólnego z Next.js.
Runtime kontra framework
Pytanie
Czym jest
Runtime JavaScript
Framework React
Instalujesz go jako
Program na maszynie
Pakiet npm w projekcie
Buduje strony?
Tylko jeśli napiszesz ten kod
Tak, z wbudowanym routingiem i renderowaniem
Obsługuje HTTP?
Przez node:http lub bibliotekę, taką jak Express
Strony plus Route Handlers
Zależy od drugiego?
Nie
Tak, minimum Node.js 20.9
Start produkcyjny
next build, potem next start
Najszybciej zobaczysz tę zależność, patrząc na warstwy, przez które przechodzi żądanie. Kliknij poniżej każdą warstwę typowej aplikacji Next.js, aby zobaczyć, co robi i kto za nią odpowiada.
Kliknij warstwę, od przeglądarki na górze do systemu operacyjnego na dole.
Przeczytaj, co ta warstwa robi w aplikacji Next.js.
Porównaj niżej przykłady zwykłego serwera Node.js i Route Handlera w Next.js.
Użyj wierszy decyzyjnych z tabeli, aby wybrać, czego potrzebuje Twój projekt.
Sprawdź node --version przed instalacją Next.js. Aktualna dokumentacja podaje Node.js 20.9 jako minimum.
Na serwerach używaj wydania Node.js z długoterminowym wsparciem i przypnij tę samą wersję główną lokalnie i na produkcji.
Jeśli Twój projekt serwuje tylko API bez stron, zwykły serwer Node.js lub framework backendowy pasuje lepiej niż Next.js.
Statyczny eksport strony Next.js potrzebuje Node.js tylko podczas budowania. Wynikiem są zwykłe pliki, które może hostować dowolny serwer WWW, kosztem funkcji działających tylko na serwerze.
Najczęściej zadawane pytania
Czy Next.js to backend czy frontend?
Jedno i drugie, w pewnych granicach. Renderuje strony React na serwerze, wysyła interaktywne części do przeglądarki i pozwala pisać Route Handlers dla endpointów JSON. Nie jest pomyślany jako pełny backend dla wielu innych klientów.
Czy muszę nauczyć się Node.js przed Next.js?
Potrzebujesz zainstalowanego Node.js i obycia z npm oraz terminalem. Głęboka znajomość modułu node:http nie jest wymagana, bo serwerem zajmuje się Next.js.
Czy Next.js nadal ma Edge Runtime?
Opcja trasy runtime podaje teraz 'nodejs' jako domyślną, a 'edge' jako przestarzałą. Dokumentacja prosi o usunięcie eksportu runtime z plików tras, więc nowy kod powinien zakładać Node.js.
Czy mogę uruchomić Next.js z Bun lub Deno?
Dokumentacja wdrażania Next.js wymienia Bun jako zweryfikowany adapter, a Deno Deploy wśród innych platform z własną integracją. Wsparcie funkcji poza serwerem Node.js bywa różne, więc sprawdź uwagi danej platformy.
Czy Express to coś tego samego rodzaju co Next.js?
Bliżej niż Node.js, bo oba to biblioteki działające na Node.js. Express to minimalny zestaw narzędzi do serwera HTTP, a Next.js to pełny framework do stron zbudowany wokół React.
Node.js w jednym akapicie
Strona Node.js nazywa go asynchronicznym, sterowanym zdarzeniami runtime'em JavaScript, zaprojektowanym do budowania skalowalnych aplikacji sieciowych. W praktyce pozwala JavaScriptowi czytać pliki, otwierać porty sieciowe i rozmawiać z bazami danych, na co przeglądarka nie pozwala.
Co Next.js dokłada na wierzch
Next.js zamienia folder komponentów React w stronę: trasy oparte na plikach, renderowanie po stronie serwera, pobieranie danych, obsługę obrazów i fontów oraz serwer produkcyjny. Gdy uruchamiasz next start, ten serwer jest procesem Node.js, a dokumentacja mówi, że takie wdrożenie obsługuje każdą funkcję Next.js.
Podczas developmentu to samo dotyczy next dev, a next build działa na Node.js, aby skompilować i wstępnie wyrenderować strony.
Wybór dla projektu
Budujesz stronę lub aplikację webową w React? Użyj Next.js i przyjmij Node.js jako część konfiguracji. Budujesz narzędzie wiersza poleceń, workera przetwarzającego kolejkę albo czyste API? Pisz bezpośrednio pod Node.js lub z frameworkiem backendowym i całkowicie pomiń Next.js.
Zwykły serwer Node.js
Używa tylko wbudowanego modułu node:http. Port, nagłówki i routing ustalasz sam. Uruchom go poleceniem node server.mjs.
Route Handler w Next.js
Ścieżka pliku staje się adresem /api/hello, a serwer uruchamia Next.js. Nieznane ścieżki automatycznie dostają stronę 404 frameworka.
Gdzie w projekcie Next.js działa Node.js
skrypty w package.json
Każdy skrypt uruchamia proces Node.js: serwer deweloperski, build produkcyjny i serwer produkcyjny.
Przeglądarka
Odwiedzający
Otrzymuje HTML wyrenderowany przez Next.js na serwerze, a potem ładuje JavaScript tylko dla Client Components, aby działały przyciski i formularze.
Kod Twojej aplikacji
Ty
Strony, layouty i Route Handlers w folderze app. To React plus kilka konwencji Next.js, napisane w JavaScript lub TypeScript.
Framework
Mapuje foldery na adresy URL, renderuje Server Components, bundluje kod klienta i uruchamia serwer produkcyjny startowany przez next start.
Runtime
Wykonuje cały powyższy JavaScript na serwerze: build, serwer deweloperski i każde żądanie na produkcji.
System operacyjny
Twój hosting
macOS, Windows, Linux lub kontener. Next.js podaje macOS, Windows z WSL włącznie oraz Linux jako wspierane podczas developmentu.