Znajomość Next.js a React dla programistów

przez

React to jedna z najpopularniejszych bibliotek do budowania interfejsów użytkownika, a Next.js to jeden z najpopularniejszych frameworków do budowania interfejsów użytkownika.

Next.js jest zbudowany przy użyciu React. Jest więc między nimi wiele podobieństw. To oczywiste, że można się pomylić między tymi dwoma.

Zanurzmy się głęboko w tych dwóch i zobaczmy, jak różnią się w wyjaśnianiu zamieszania. Zacznijmy od Reacta.

Reaguj: Pierwsze kroki

React to biblioteka typu open source do budowania interfejsów użytkownika przy użyciu JavaScript. React służy do tworzenia jednostronicowych aplikacji internetowych. Co rozumiem przez aplikacje jednostronicowe? Aplikacja będzie miała pojedynczy dokument HTML i aktualizuje go zgodnie z wymaganiami.

Tworzenie jednostronicowych aplikacji internetowych jest obecnie na najwyższym poziomie. I możemy powiedzieć, że React jest obecnie najpopularniejszą biblioteką w tej domenie. To nie przesada.

Dostępnych jest wiele pakietów React, które ułatwiają życie programistom. Jeśli chodzi o budowanie aplikacji internetowych, możemy stworzyć dowolny typ aplikacji internetowej za pomocą React.

React został opracowany przez Facebooka. Teraz każdy może się do tego przyczynić. I jest utrzymywany przez Facebooka.

Sprawdźmy niektóre funkcje React.

Wirtualny DOM

Aplikacje internetowe zaktualizują niektóre jego części bez wpływu na inne części, na przykład wyświetlanie modułu ładującego podczas pobierania danych i aktualizowanie tej części aplikacji internetowej za pomocą pobranych danych. Jeśli mówimy bardziej technicznie, aktualizuje DOM w przeglądarce.

Bez bibliotek takich jak React zrobilibyśmy to przy użyciu zwykłego JavaScript, który jest nieefektywny, ponieważ operacje DOM są bardzo kosztowne. Aby rozwiązać ten problem, React wprowadza koncepcję wirtualnego modelu DOM.

Wirtualny DOM jest kopią prawdziwego DOM-u. Gdy pojawiają się jakieś aktualizacje, React najpierw aktualizuje je w wirtualnym DOM i porównuje z prawdziwym DOMem. A React zaktualizuje prawdziwy DOM tylko wtedy, gdy będą jakieś zmiany i tylko zmienione części. Wykonuje więc mniej operacji na prawdziwym DOM, znacznie skracając czas aktualizacji.

Bez bibliotek takich jak React sieć działałaby bardzo wolno.

składniki

Komponenty to elementy składowe interfejsu użytkownika w React. Można powiedzieć, że wszystko w React jest komponentem. Te komponenty mogą być wielokrotnie używane w aplikacji React.

Powiedzmy, że mamy przycisk, który ma jakiś zestaw stylów. W React możemy stworzyć komponent odpowiedzialny za renderowanie przycisku ze stylami na podstawie właściwości, które mu przekazujemy. Możemy dostosować ten komponent przycisku, jak chcemy, używając rekwizytów. W ten sposób możemy ponownie wykorzystać komponenty w aplikacji React.

Komponenty mogą pomóc zorganizować naszą aplikację w małe bloki interfejsu użytkownika. Możemy je ułożyć tak, jak chcesz.

JSX

Możemy napisać HTML w JS o nazwie JSX. Wygląda podobnie do HTML, ale to JSX. Możemy używać JavaScript z JSX i uzyskiwać dostęp do wszystkich atrybutów HTML wraz z nim.

JSX służy do definiowania struktury interfejsu użytkownika. Każdy komponent zwróci JSX, który zostanie wyrenderowany w DOM.

Jednokierunkowy przepływ danych

Dane przepływające pomiędzy komponentami są niezbędne do ich zmniejszenia. Jeśli nie mamy przepływu danych między komponentami, musimy pomieścić wszystko w jednym komponencie.

React podąża za jednokierunkowym przepływem danych od rodzica do dziecka. Możemy przekazywać dane z komponentów nadrzędnych do komponentów podrzędnych w React. Komponent podrzędny nie może zmienić stanu bezpośrednio w komponencie nadrzędnym. Można to zrobić, przekazując wywołania zwrotne.

Jednokierunkowy przepływ danych sprawia, że ​​debugowanie jest proste. Komponenty wyglądają na znacznie prostsze, ponieważ wszystkie komponenty nie muszą utrzymywać stanu.

Nauka React jest bardzo prosta, jeśli znasz JavaScript. Dokumenty React wystarczą, aby zacząć.

Next.js: Pierwsze kroki

Next.js to framework reagujący do budowania aplikacji internetowych. Jest zbudowany na React. Został stworzony przez Vercela. Tak więc wszystkie funkcje Reacta będą w nim dostępne. Co jest specjalnego w Next.js? Zobaczmy kilka cech, które czynią go wyjątkowym, oprócz komponentów reagujących.

Wstępne renderowanie

Next.js renderuje każdą stronę z wyprzedzeniem. Wstępne renderowanie spowoduje szybkie załadowanie strony w przeglądarce ze statycznym kodem HTML. Później ładuje JavaScript wymagany dla tej strony. Poprawia wydajność i SEO strony.

Istnieją w nim dwa rodzaje wstępnego renderowania. Jednym z nich jest generowanie witryn statycznych (SSG), a drugim renderowanie po stronie serwera (SSR). SSG generuje kod HTML w czasie kompilacji i ponownie wykorzystuje go w innych żądaniach.

SSR generuje kod HTML przy każdym żądaniu, co czyni go trochę wolniejszym niż SSG. Next.js sugeruje używanie SSG, dopóki nie będzie obowiązkowe używanie SSR.

Next.js również wstępnie ładuje strony, które mają linki (z komponentem Link) na aktualnie przeglądanej stronie. Ta fajna funkcja sprawia, że ​​strony ładują się bardzo szybko podczas poruszania się.

Wytyczanie

Next.js ma wbudowany system routingu. Obsługuje system routingu oparty na katalogach. Musimy utworzyć strony w określonym katalogu, aby utworzyć trasę. W reakcji musimy użyć pakietu, aby to osiągnąć.

Pszczoła

Możemy tworzyć interfejsy API za pomocą Next.js, takich jak express. Otwiera nowe możliwości tworzenia aplikacji full-stack za pomocą Next.js. Może nie być tak wydajny, jak dedykowany framework po stronie serwera, ale spełnia swoje zadanie.

Inne funkcje

Istnieją inne funkcje, takie jak optymalizacja obrazu, wbudowana obsługa CSS, metatagi dla każdej strony (dla lepszego SEO) itp.; wszystkie funkcje, które widzieliśmy do tej pory, to dodatkowe funkcje Next.js oprócz funkcji React.

Next.js zyskał dużą popularność od czasu jego wydania. Nauka Next.js jest bardzo przyjemna, jeśli znasz React. Ale nauczenie się reagowania w pierwszej kolejności nie jest obowiązkowe. Możesz zacząć od każdego. JavaScript jest obowiązkowy dla obu z nich.

Do tej pory widzieliśmy różne funkcje React i Next.js. Porównajmy oba.

Reaguj kontra Next.js

Istnieje wiele podobieństw między React i Next.js. Znasz już powód, dla którego istnieje między nimi wiele podobieństw. Ich podstawowe koncepcje są takie same. Porównajmy niektóre z nich obok siebie.

Kod

Zobaczmy proste Hello World! Komponent w react i next.js.

Reagować

function App() {
   return (
      <div className="app">
         Hello World!
      </div>
   );
}
export default App;

Następny.js

export default function Home() {
  return (
    <div className="app">
      Hello World!
    </div>
  )
}

Jeśli widzisz kod, nie ma między nimi żadnej różnicy.

Struktura folderów

React to biblioteka, która nie ma określonej struktury folderów. Możemy uporządkować foldery i pliki w oparciu o nasze preferencje i przypadek użycia.

Next.js również nie ma ścisłej struktury folderów, której należy przestrzegać. Ale musimy utworzyć strony w folderze stron tylko dla routingu. To jedyne ograniczenie, jakie mamy w next.js. Możemy zorganizować wszystkie inne foldery i pliki, takie jak Reaguj.

Wydajność

Aplikacje Next.js są nieco szybsze w porównaniu do aplikacji React. Next.js używa do ich tworzenia technik wstępnego renderowania. Ale to nie znaczy, że nie możemy szybko tworzyć aplikacji React. To samo możemy osiągnąć za pomocą React. Musimy włożyć w to dodatkowy wysiłek.

Maszynopis

TypeScript odgrywa ważną rolę w dużych aplikacjach. Bez TypeScript większość programistów wścieka się na debugowanie aplikacji. Nie martw się, zarówno React, jak i Next.js obsługują TypeScript.

Inne funkcje

Zarówno React, jak i Next.js są w znacznym stopniu utrzymywane przez twórców. Społeczność jest bardzo duża dla obu z nich w porównaniu z innymi bibliotekami i frameworkami front-end. Jeśli utkniemy gdziekolwiek w trakcie tworzenia aplikacji z wykorzystaniem React i Next.js, istnieje duża szansa, że ​​rozwiązanie znajdziemy w internecie.

Ich dokumentacja jest bardzo dobra na początek. Na co czekamy? Przejdź do dokumentacji React i Next.js, aby zacząć z nimi pracować.

Streszczenie

FunkcjeReactNext.jsCodeKnowing JavaScript wystarczy do kodowania aplikacji React. Kod jest podobny do React, ponieważ jest zbudowany ponad nim. Struktura folderów Nie narzucaj ścisłych wytycznych dotyczących struktury folderów. Narzuca część struktury folderów, której należy przestrzegać (Pages routing).TypeScriptObsługuje TypeScript.Obsługuje również TypeScript.Renderowanie po stronie serweraNie ma wbudowanej obsługi renderowania po stronie serwera.Ma wbudowaną obsługę renderowania po stronie serwera z pobieraniem wstępnym (SSG i SSR)WydajnośćA trochę wolniejszy w porównaniu do Next.jsTrochę szybki w porównaniu do React.Społeczność i konserwacja Dobrze utrzymany przez Facebooka, z dużą społecznością open-source, która go wspiera.Vercel również świetnie sobie z tym radzi. Ponadto ma wsparcie społeczności open source.Dokumentacja i naukaDobrze udokumentowane, nawet dla początkujących. Możesz zacząć z nim w każdej chwili, jeśli znasz JavaScript. Ma dobrą dokumentację, a nauka będzie szybsza, jeśli znasz koncepcje React. React vs. Next.js

Który wybrać?

Cóż, nikt nie jest w stanie odpowiedzieć na to pytanie. To zależy od różnych rzeczy, takich jak rodzaj projektu, co on robi, jego cel itp.; możemy podsumować, przeglądając wszystkie ich funkcje i ich wymagania.

Jedną rzeczą, na podstawie której możemy szybko stwierdzić, jest SEO. Jeśli Twój projekt wymaga dużo SEO, lepiej wybrać Next.js.

Rozważaliśmy różne czynniki we wszystkich scenariuszach, aby wyciągnąć wnioski. Jeśli nie możemy dojść do wniosku, lepiej wybrać React. I zawsze możemy przełączyć się na inny na wczesnym etapie, ponieważ migracja kodu nie zajmuje dużo czasu. Znacie powód, dla którego nie zajmuje to dużo czasu 😄.

Obaj mają dobrą społeczność. Znajdziesz rozwiązania prawie każdego problemu, z którym się spotykasz podczas pracy z React i Next.js, ponieważ są one szeroko stosowane w domenie frontendowej. Znajdziesz wiele pakietów do budowania aplikacji webowych. Możemy używać tych samych pakietów zarówno w React, jak i Next.js.

Decyzje są zawsze trudne do podjęcia. Ale nie bój się podejmować decyzji 😜.

Wniosek

Można powiedzieć, że Next.js jest nadzbiorem Reacta. Tworzony jest Next.js z większą liczbą funkcji wraz z funkcjami React, które go używają. Więc porównywanie ich nie jest idealne. Mimo to udało się 😅. W każdym razie, teraz masz pomysł na najwyższym poziomie zarówno w React, jak i Next.js.

Jak widać, nie ma między nimi wielu różnic poza dodatkowymi funkcjami Next.js, co jest oczywiste. To tyle na dziś. Zakończmy to małą sugestią.

Zalecamy zacząć od React, jeśli zamierzasz nauczyć się frameworka front-end. Koncepcje React sprawią, że nauka Next.js będzie dziecinnie prosta.

Możesz także zapoznać się z najlepszymi zasobami do nauki ReactJS.