NestJS vs Next.js: różne zadania, często jeden projekt
NestJS vs Next.js: framework backendowy czy framework Reacta? | We.Inc
NestJS buduje serwerowe API w Node.js, a Next.js buduje strony w React z odrobiną kodu serwera. Zobacz ten sam endpoint w obu, jak ze sobą współpracują i kiedy potrzebujesz każdego z nich.
NestJS i Next.js nie są rywalami. NestJS to framework do aplikacji serwerowych w Node.js: kontrolery, moduły i wstrzykiwanie zależności dla API. Next.js to framework Reacta do budowania stron internetowych, z Route Handlers do lżejszej pracy backendowej. Małe aplikacje mogą w całości działać w Next.js; większe systemy często umieszczają API w NestJS za frontendem w Next.js.
Do czego służy każdy framework
Pytanie
NestJS
Główne zadanie
Aplikacje serwerowe i API
Strony i aplikacje webowe w React
Renderuje strony?
Nie, zwraca dane
Tak, Server i Client Components
Język
Zbudowany w TypeScript, JavaScript dozwolony
JavaScript lub TypeScript
Warstwa HTTP
Domyślnie Express, opcjonalnie Fastify
Własny serwer przez next start
Styl endpointów
Klasa @Controller z metodami @Get
route.ts eksportujący GET, POST i tak dalej
Rozpoczęcie projektu
nest new project-name
npx create-next-app@latest
Domyślny port lokalny
Poniżej jest jeden endpoint, lista kotów pod GET /cats, napisany jako kontroler NestJS i jako Route Handler w Next.js. Przełączaj przykłady, aby zobaczyć trasę POST i konfigurację, która pozwala stronie Next.js wywoływać API w NestJS.
Wybierz przykład: listę przez GET, tworzenie przez POST albo połączenie obu aplikacji.
Przeczytaj kod NestJS po lewej i kod Next.js po prawej.
Z notatki dowiesz się, co każdy framework daje Ci za darmo.
Skopiuj wersję, która pasuje do Twojego projektu.
Oba serwery deweloperskie domyślnie używają portu 3000. Gdy uruchamiasz je obok siebie, odpal NestJS na innym porcie, na przykład 3001.
Jeśli przeglądarka wywołuje API w NestJS bezpośrednio, włącz w NestJS CORS dla originu Twojej strony. Jeśli wywołuje je tylko kod serwerowy Next.js, CORS nie ma znaczenia.
Trzymaj adres API w zmiennej środowiskowej dostępnej tylko na serwerze, gdy wywołują je wyłącznie Server Components lub Route Handlers.
Współdziel typy żądań i odpowiedzi przez mały pakiet importowany przez obie aplikacje, aby zmiana nazwy pola psuła build, a nie produkcję.
Najczęściej zadawane pytania
Czy Next.js może zastąpić NestJS?
W małej aplikacji często tak. Route Handlers obsługują GET, POST, PUT, PATCH, DELETE, HEAD i OPTIONS z webowymi API Request i Response. NestJS zasługuje na swoje miejsce, gdy backend rośnie: wiele modułów, zadania w tle, kilku klientów, takich jak aplikacje mobilne, i zespół, który chce narzuconej struktury.
Czy NestJS może renderować strony w React?
Nie jest do tego zbudowany. NestJS zwraca dane, domyślnie serializując obiekty do JSON. Do stron użyj Next.js lub innego frameworka frontendowego.
Czy do NestJS potrzebuję TypeScriptu?
NestJS jest zbudowany w TypeScript i w pełni go obsługuje, a dokumentacja mówi, że nadal można pisać w czystym JavaScript. Prawie każdy przykład i przewodnik używa TypeScriptu, więc spodziewaj się, że też będziesz go używać.
Czy oba powinny być w jednym repozytorium?
Monorepo z dwiema aplikacjami i wspólnym pakietem typów dobrze sprawdza się dla jednego zespołu. Osobne repozytoria pasują do osobnych zespołów z własnymi harmonogramami wydań.
Którego uczyć się najpierw?
Jeśli chcesz opublikować stronę internetową, zacznij od Next.js. Naucz się NestJS, gdy budujesz API, od którego zależy kilka frontendów lub usług.
Co NestJS daje backendowi
NestJS opisuje się jako framework do budowania wydajnych, skalowalnych aplikacji serwerowych w Node.js. Organizuje kod w moduły, kontrolery i providery i łączy je wstrzykiwaniem zależności, co utrzymuje spójność dużego API przy wielu programistach.
Pod spodem domyślnie działa na Express. Podmiana na adapter @nestjs/platform-fastify zmienia warstwę HTTP bez przepisywania kontrolerów, choć middleware specyficzne dla Express potrzebuje wtedy odpowiednika dla Fastify.
Co Next.js daje stronie internetowej
Next.js renderuje React na serwerze, wyznacza trasy na podstawie nazw folderów i plików i wysyła do przeglądarki tylko interaktywne części. Jego Route Handlers wystarczą do wysyłki formularzy, webhooków i małych endpointów JSON należących do tej samej strony.
Nie próbuje być ustrukturyzowanym backendem dla innych klientów. Nie ma systemu modułów ani wstrzykiwania zależności, więc duże API zbudowane tylko z plików tras ma tendencję do rozjeżdżania się.
Jak do siebie pasują
Częsty podział to Next.js dla wszystkich stron i NestJS dla logiki biznesowej i danych. Server Components w Next.js pobierają dane z API w NestJS na serwerze, więc sekrety i wewnętrzne adresy URL nigdy nie trafiają do przeglądarki, a Client Components wywołują je tylko wtedy, gdy muszą.
Utwórz oba projekty
Utwórz API w NestJS i stronę w Next.js
Instaluje narzędzie wiersza poleceń Nest, tworzy API, a następnie tworzy stronę w sąsiednim folderze.
GET /cats
W NestJS prefiks @Controller('cats') i @Get() budują ścieżkę, a kontroler jest rejestrowany w module. W Next.js ścieżka folderu to URL, a nazwa eksportowanej funkcji to metoda.
POST /cats
NestJS sam parsuje ciało JSON przez @Body() i domyślnie odpowiada na POST statusem 201. Route Handler w Next.js odczytuje ciało przez request.json() i sam ustawia status.
Oba razem
NestJS przenosi się na port 3001 i dopuszcza origin strony. Strona w Next.js to Server Component, więc fetch działa na serwerze, a API_URL pozostaje prywatny.