Next.js vs React: co dodaje Next i kiedy go potrzebujesz
Next.js vs React
Next.js vs React: biblioteka czy framework i kiedy wystarczy Vite | We.Inc
React to biblioteka do budowy UI, a Next.js to zbudowany na niej framework. Zaznacz funkcje, których potrzebuje Twój projekt, i sprawdź, czy pasuje Next.js, czy zwykły React z Vite, z kodem dla obu.
React to biblioteka do budowania interfejsów użytkownika z komponentów. Next.js to framework, który używa React i dodaje routing oparty na plikach, renderowanie po stronie serwera, server components, endpointy API i narzędzia do budowania. W obu przypadkach piszesz w React. Wybierz Next.js, gdy strony potrzebują HTML renderowanego na serwerze, sekretów lub tras backendowych, a zwykły React z Vite pasuje do aplikacji schowanych za logowaniem.
Co dostajesz od razu
Potrzeba
React z Vite
Next.js (App Router)
Komponenty, stan, hooki
Tak
Tak, ten sam React
Routing
Dodaj bibliotekę routera
Foldery w app/ stają się trasami
HTML renderowany przed załadowaniem JavaScript
Nie, chyba że dodasz SSR lub prerendering
Tak, na serwerze lub podczas budowania
Server components i sekrety na serwerze
Nie
Tak, layouty i strony są domyślnie server components
Endpointy API w tym samym projekcie
Nie, osobny backend
Pliki route.ts
Wynik
Pliki statyczne z vite build
Serwer Node lub pliki statyczne z output: 'export'
Zaznacz funkcje, których potrzebuje Twój projekt. Każda jest oznaczona jako wbudowana w Next.js lub łatwa w aplikacji React z Vite, a podsumowanie daje Ci rekomendację na start. Kod poniżej pokazuje tę samą małą stronę napisaną na oba sposoby.
Zaznacz każdą funkcję, której Twój projekt potrzebuje teraz, a nie kiedyś.
Zobacz, w którą stronę skłania się każda funkcja i dlaczego.
Przeczytaj podsumowanie i rekomendację pod listą.
Porównaj dwa przykłady kodu, aby zobaczyć, ile się zmienia.
Twoja wiedza o React przenosi się w całości. Komponenty, hooki i JSX są identyczne: zmienia się to, gdzie leżą pliki i gdzie działa kod.
W Next.js dodawaj 'use client' tylko do plików, które potrzebują stanu, efektów lub API przeglądarki. Oznaczenie całego layoutu jako klienckiego wysyła znacznie więcej JavaScript.
Aplikacja Vite to pliki statyczne, więc może działać na dowolnym hostingu statycznym. Aplikacja Next.js korzystająca z funkcji serwerowych potrzebuje hostingu, który uruchamia Node, lub wybranego adaptera platformy.
Jeśli liczy się ruch z wyszukiwarek, sprawdź, co Twoja strona wysyła przed uruchomieniem JavaScript. Wyświetl źródło jednostronicowej aplikacji Vite, a zobaczysz głównie pusty główny div.
Najczęściej zadawane pytania
Czy Next.js jest lepszy niż React?
Nie są alternatywami w zwykłym sensie, bo Next.js uruchamia React. Prawdziwe pytanie brzmi: czy chcesz routingu, renderowania na serwerze i konwencji frameworka, czy lżejszej konfiguracji, w której sam wybierasz każdy element.
Czy zespół React nadal poleca Create React App?
Aktualny poradnik na react.dev zaleca start od frameworka, takiego jak Next.js lub React Router, i wymienia Vite, Parcel i Rsbuild do budowy własnej konfiguracji od zera. Create React App nie jest na tej liście.
Czy Next.js może wygenerować statyczną stronę jak Vite?
Tak. Ustaw output: 'export' w next.config.js, a next build zapisze HTML, CSS i JavaScript w folderze out. Funkcje wymagające działającego serwera, takie jak cookies, rewrites, redirects i server actions, nie są w tym trybie dostępne.
Czy uczyć się React przed Next.js?
Najpierw naucz się podstaw React: komponentów, props, stanu i efektów. Next.js dodaje potem na wierzchu routing i koncepcje serwerowe, a debugowanie jest dużo łatwiejsze, gdy wiesz, który problem należy do której warstwy.
Czy aplikacja React z Vite jest zła dla SEO?
Nie automatycznie, ale domyślnie HTML nie ma treści strony, dopóki nie uruchomi się JavaScript. Strony marketingowe, które mają się pozycjonować, łatwiej zrobić z renderowaniem na serwerze lub prerenderingiem, a dashboardy za logowaniem tego nie potrzebują.
Biblioteka a framework
React decyduje, jak komponent zamienia stan w UI i aktualizuje stronę. Nie decyduje, jak adresy URL mapują się na ekrany, gdzie ładują się dane ani jak budowany jest projekt. W aplikacji Vite te wybory należą do Ciebie, a w aplikacji Next do Next.js.
Na tym polega wymiana: Next.js zdejmuje z Ciebie decyzje i dodaje funkcje serwerowe, a w zamian stosujesz jego konwencje folderów i uruchamiasz jego build.
Co zmienia się w Twoim kodzie
W Next.js plik app/blog/page.tsx to trasa /blog, a layout.tsx otacza jej dzieci. Strony są server components, o ile nie oznaczysz ich inaczej, więc mogą bezpośrednio czekać na dane przez await, a elementy interaktywne żyją w plikach zaczynających się od 'use client'.
W aplikacji Vite plik main.tsx renderuje jeden główny komponent do index.html, trasy pochodzą z biblioteki takiej jak React Router, a dane ładują się w przeglądarce przez fetch lub cache po stronie klienta.
Kiedy wystarczy zwykły React z Vite
Narzędzia wewnętrzne, dashboardy, edytory i wszystko za logowaniem rzadko potrzebuje HTML renderowanego na serwerze. Aplikacja Vite szybko startuje, wdraża się jako pliki statyczne i utrzymuje prosty model myślowy.
Jeśli taka aplikacja później potrzebuje publicznych stron, często umieszcza się strony marketingowe na osobnej witrynie, a samą aplikację zostawia bez zmian.
Ta sama strona na dwa sposoby
Next.js: trasa, która ładuje dane na serwerze
Ścieżka pliku to adres URL. Strona czeka na dane, zanim wyśle HTML, a jako kliencki JavaScript trafia do przeglądarki tylko przycisk.
React z Vite: ta sama lista ładowana w przeglądarce
Routing pochodzi z React Router, a lista pojawia się, gdy przeglądarka ją pobierze.
Tworzenie każdego z projektów
Obie komendy zadają kilka pytań, w tym czy użyć TypeScript.
Publiczne strony, które muszą się pozycjonować w wyszukiwarce
HTML z serwera lub z etapu budowania umieszcza treść w pierwszej odpowiedzi.
Zapytania do bazy danych lub klucze API używane podczas renderowania
Server components trzymają dane uwierzytelniające poza paczką przeglądarki.
Endpointy backendowe w tym samym projekcie
Pliki route.ts stają się endpointami API.
Wiele stron z treścią ze wspólnymi layoutami
Routing oparty na folderach i zagnieżdżone layouty są wbudowane.
Wszystko jest za logowaniem
Roboty wyszukiwarek nigdy tego nie widzą, więc renderowanie w przeglądarce wystarcza.
Hosting musi obsługiwać same pliki statyczne
vite build generuje statyczne zasoby. Next.js też potrafi, ale traci funkcje serwerowe.
Widżet lub narzędzie osadzone na innej stronie
Jedną paczkę i jeden główny element łatwiej wstawić.
Nauka samego React
Mniej koncepcji naraz: nie trzeba myśleć o podziale na serwer i klienta.
Co pasuje do Twojego projektu?
Potrzeby projektu
React z Vite
Next.js: {n}. React z Vite: {v}.
Zaznacz co najmniej jedną potrzebę, aby dostać rekomendację.
Skłaniaj się ku Next.js. Twoje potrzeby zależą od renderowania na serwerze lub kodu serwerowego.
Zwykły React z Vite to pokrywa. Framework możesz dodać później, jeśli pojawią się publiczne strony.
Jest blisko. Wybierz Next.js, jeśli jakakolwiek publiczna strona musi się pozycjonować, w przeciwnym razie zacznij od Vite.