Czym jest Next.js?
Next.js to framework React.js, który obsługuje Renderowanie Po Stronie Serwera (SSR), dzięki serwerowi Node.JS. Pozwala tworzyć szybkie i dobrze zoptymalizowane pod kątem SEO aplikacje. Jest obecnie najbardziej popularnym i najczęściej pobieranym frameworkiem React.js.
Next.js, obsługuje również Generowanie Statycznych Stron (SSG), co mogliśmy zauważyć do tej pory w Gatsby.js. Jednak największą zaletą Next.js jest możliwość korzystania z obu tych funkcjonalności dzięki czemu jesteśmy w stanie zdefiniować, które dane mają zostać pobrane po stronie serwera, a które mają być wygenerowane statycznie.
Co to Server Side Rendering?
Server Side Rendering pozwala na wyrenderowanie całej strony po stronie serwera, a nie po stronie klienta, tak jak to robi czysty React.js.
Dzięki takiemu rozwiązaniu otrzymujemy od serwera w pełni wyrenderowany plik HTML zamiast renderować cały DOM przy użyciu Javascript.
Zaletami takiego rozwiązania zdecydowanie jest znacznie szybszy czas ładowania strony oraz mniejsza ilość Javascript.
Ma to również wielki wpływ na SEO strony, ponieważ crawlerom łatwiej jest zaindeksować plik HTML, niż renderowaną po stronie klienta stronę.
Dlaczego Next.js tak szybko zyskuje na popularności?
Głównym z powodów jest fakt, że Next.js znacznie ułatwił budowanie aplikacji Fullstack przy użyciu React.js. Pozwala w prosty sposób zarządać zarówno frontendem jak i backendem aplikacji.
Co więcej Next.js rozwiązał odwieczny problem developerów z renderowaniem Javascript w przeglądarce. Next.js większość rzeczy wykonuje po stronie serwera, a nie po stronie klienta.
Next.js jest obecnie śmiało nazywany meta framework w świecie Reacta, co potwierdzają liczne rankingi. W 2021 roku Next.js wyprzedził w ilości nowych gwiazdek na Githubie nawet samego Reacta (źródło) i uplasował się na 3 miejscu najbardziej popularnych projektów.
Na początku roku 2021 ilość pobrań Next.js wynosiła ~1mln tygodniowo, a w grudniu były to już ponad 2mln pobrań tygodniowo!
Wszystko wskazuje na to, że w 2022 jego popularność w dalszym ciągu będzie rosła, więc z pewnością warto rzucić na niego okiem ✨
Next.js i Jamstack
Next.js możemy łatwo połączyć z HeadlessCMS'em, dzięki czemu często wykorzystywany jest do tworzenia stron w architekturze Jamstack.
Jamstack w 2022 w dalszym ciągu będzie zyskiwał na popularności, więc jeśli chcesz dowiedzieć się jak on działa przeczytaj mój artykuł.
Pobieranie danych w Next.js
Tutaj zaczyna się cała magia - w Next.js mamy 3 główne funkcje odpowiedzialne za pobieranie danych: getServerSideProps(), getStaticProps() oraz getStaticPaths().
export async function getServerSideProps(context) {
return {
props: {}, // zostaną przekazane do komponentu strony jako props
}
}Aby wywołać te funckje, wystarczy, że wyeksportujemy je w pliku, w którym chcemy je użyć.
getServerSideProps()
Strona będzie renderowana z danymi dostarczonymi przez funkcję za każdym razem, gdy zostanie wykonane żądanie do strony. GetServerSideProps pobiera dane przed wysłaniem strony do klienta.
getStaticProps()
Strona zostanie wyrenderowana wraz z danymi przekazanymi podczas budowania aplikacji. Zapewnia najkrótszy czas ładowania, ponieważ serwer przesyła klientowi, już wcześniej wygenerowany plik HTML.
getStaticPaths()
Jeśli nasza aplikacja korzysta z dynamicznych ścieżek będziemy musieli przekazać do GetStaticProps listę ścieżek właśnie za pomocą tej metody.
Routing w Next.js
Kolejna z zalet Next.js. Kiedy używasz React.js, zazwyczaj musisz zainstalować react-router i stworzyć konfigurację routingów.
Next.js dostarcza własny routing, wystarczy, że stworzysz stronę wewnątrz folderu pages, a Next.js zajmie się resztą!
Podsumowanie
Next.js jest rewelacyjnym frameworkiem i sam planuję się go nauczyć. W przyszłości na pewno zbuduję na nim mojego bloga, który obecnie postawiony jest na Gatsby.js
W 2022 roku Next.js utrzyma się na pozycji lidera i zwiększy swoją popularność, więc nie trać czasu, tylko siadaj do dokumentacji. Powodzenia!
Jeśli chcesz dowiedzieć się, jakie są kluczowe różnice między Gatsby.js oraz Next.js - znajdziesz je tutaj 🚀