Next.js i obecny stan tworzenia stron internetowych z użyciem React

Rozpoczęcie nowego projektu może być zarówno ekscytującym, jak i wyczerpującym doświadczeniem. To ekscytujące, bo możemy zacząć od nowa, zrobić coś lepiej i uniknąć wcześniejszych błędów. To wyczerpujące, ponieważ musimy podjąć wiele decyzji technicznych i wybrać odpowiednie narzędzia spośród niezliczonych pakietów npm, repozytoriów GitHub, projektów społecznościowych i szablonów projektów.

Im mniej decyzji dotyczących architektury technicznej musimy podjąć, tym bardziej możemy skupić się na tworzeniu funkcji, dostarczaniu świetnych produktów i szybszym wprowadzaniu ulepszeń.

Sam React nie wystarczy#

Jeśli chcemy stworzyć stronę internetową z użyciem React, do uruchomienia projektu będziemy potrzebować czegoś więcej niż tylko biblioteki React. Musimy więc zająć się routingiem stron, renderowaniem po stronie serwera, optymalizacją witryny statycznej i zasobów, tworzeniem pakietu i innymi kwestiami.

Na szczęście inni przeszli już tę drogę, a my mamy teraz do dyspozycji kompletne punkty wyjścia do tworzenia stron internetowych i aplikacji webowych opartych na React.

Szablony startowe React a zmęczenie decyzyjne#

Oficjalna dokumentacja React wymienia trzy główne frameworki startowe React, które można wykorzystać do rozpoczęcia nowego projektu. Są to: Create React App, Next.jsoraz Gatsby.

Czy powinniśmy znać trzy różne frameworki oparte na React, z których każdy ma własne konwencje, narzędzia i specyfikę? Jak zdecydować, które narzędzie najlepiej sprawdzi się w danym przypadku? Czy nie możemy używać jednego rozwiązania w 99% sytuacji?

Tak. Możemy. Next.js w obecnej postaci (w wersji 12) może być domyślnym rozwiązaniem dla praktycznie każdej strony internetowej opartej na React.

Czym jest Next.js?#

Next.js to framework React z solidną architekturą oprogramowania opartą na React. Został zaprojektowany w sposób narzucający pewne założenia, a większość decyzji technicznych jest już uwzględniona w jego architekturze. Dzięki temu wiele złożonych funkcji działa od razu po instalacji.

W razie potrzeby możesz zajrzeć pod maskę i w pewnym zakresie dostosować konfigurację, ale środowisko programistyczne i wydajność dostępne od razu po instalacji są tak dobre, że prawdopodobnie zechcesz tego uniknąć.

To samo można powiedzieć o Create React App i Gatsby. Jednak Create React App korzysta z wielu pakietów open source innych firm, aby zapewnić działanie poszczególnych funkcji, a Gatsby jest mocno skoncentrowany na jednym konkretnym zastosowaniu — generowaniu statycznych stron. Gatsby rzeczywiście oferuje obecnie lepszą obsługę generowania statycznych stron, ale podobne funkcje możemy uzyskać w Next.js.

Do czego służy Next.js?#

Za pomocą Next.js możemy tworzyć strony internetowe i aplikacje webowe w React. Next.js umożliwia:

• obsługę jednostronicowej aplikacji React, z automatycznym dzieleniem kodu i dynamicznym ładowaniem dodatkowych treści
• renderowanie treści po stronie serwera
• tworzyć statyczne strony internetowe o możliwościach zbliżonych do Gatsby
• stanowić szkielet złożonej, niestandardowej aplikacji front-endowej, takiej jak TeleportHQ (więcej na ten temat nieco później)

Strategiczne spojrzenie na Next.js#

Oceniając z biznesowego punktu widzenia ryzyko związane z wdrożeniem nowej technologii, bierzemy pod uwagę jej rozpowszechnienie, podmiot odpowiedzialny za jej rozwój, perspektywy wzrostu i wiele innych aspektów.

Next.js ma bardzo dobrą pozycję strategiczną:

• Vercel zapewnia mu stabilne, aktywne wsparcie, ponieważ rozwój Next.js jest niezbędny do skutecznego rozwoju jego działalności w chmurze.
• Framework istnieje już na tyle długo, by osiągnąć poziom stabilności i dojrzałości sprzyjający szybkiemu wdrażaniu oraz odpowiadający na szeroki zakres codziennych potrzeb i problemów.
• Jest aktywnie rozwijany, a każda nowa wersja poszerza możliwości technologii internetowych.
• Doskonałe doświadczenia programistyczne zainspirowały powstanie frameworka Nuxt, który działa z Vue.js zamiast Reacta i jest skierowany do tej samej grupy odbiorców co Next.js.

Co więcej, równowaga między sztywną, narzucającą określone rozwiązania architekturą a elastycznymi możliwościami jej rozszerzania pozwala mniej doświadczonym programistom tworzyć projekty od podstaw bez ryzyka obniżenia produktywności i wydajności.

Z tego samego powodu świetnie nadaje się do automatyzacji za pomocą narzędzi low-code/no-code. Automatyczne generowanie całej witryny jest łatwiejsze, gdy jej struktura jest narzucona i wspierana przez wykorzystywany framework.

Korzystanie z Next.js#

Dokumentacja Next.js jest znakomita, a parafrazowanie dziesiątek stron jej treści w krótkim artykule nie oddałoby sprawiedliwości temu frameworkowi. Zamiast tego krótko pokażemy, jak skonfigurować projekt, i wskażemy odpowiednie strony dokumentacji.

Celem tej sekcji jest pokazanie, jak działa Next.js, i zwrócenie uwagi na jego największe zalety. Z pewnością nie jest to samouczek krok po kroku.

Konfiguracja projektu#

Rozpoczęcie pracy nad nowym projektem Next.js jest niezwykle proste. Najpierw mamy polecenie create-next-app , za pomocą którego możemy zainicjować projekt. Wsparcie dla TypeScriptu jest wystarczające i można je włączyć podczas konfiguracji projektu lub później.

Routing i strony#

System routingu to jedna z tych cech Next.js, które narzucają określony sposób działania. Struktura folderów określa obsługiwane adresy URL i sposób wyświetlania stron pod tymi adresami. Strony znajdują się w folderze pages albo src/page.

Co ważne, ta funkcja działa zarówno podczas renderowania po stronie serwera i generowania statycznych witryn, jak i przy routingu po stronie klienta. Poznajemy jedno API i jedną konwencję, a następnie wykorzystujemy je we wszystkich przypadkach.

Co więcej, każda strona ma własny pakiet JavaScriptu, więc nawet 1000 stron z różnymi komponentami i funkcjonalnościami nie zwiększy rozmiaru każdej z nich.

Strony w Next.js oferują ogromne możliwości. Każda z nich jest niczym punkt wejścia do aplikacji. Strony określają swoje zależności od danych oraz to, czy dane mają być pobierane w czasie działania aplikacji na serwerze lub po stronie klienta, czy też dostarczane statycznie, a wyniki generowane jako statyczny kod HTML.

Stylizacja i CSS#

Dostępna jest wbudowana obsługa podstawowego CSS oraz CSS Modules.

Ponieważ Next.js wykorzystuje webpacka do pakowania aplikacji, do projektów Next.js można dodawać dowolne frameworki CSS współpracujące z Reactem. Ponadto popularne frameworki, takie jak Tailwind, mają instrukcje dotyczące korzystania z nich w projektach opartych na Next.js.

Ponieważ pracujemy z komponentami Reacta i pakujemy zasoby za pomocą tradycyjnych narzędzi, praca z CSS jest tak samo wygodna jak w każdej innej bazie kodu Reacta.

Wydajność#

Jedną z kluczowych zalet Next.js w porównaniu z innymi frameworkami jest szybkość działania tworzonych w nim witryn. Wysoką wydajność zapewniają narzucony sposób pakowania stron i obsługi routingu oraz optymalizacje dostępne od razu dla każdej strony, dostosowane do używanych funkcji. Na przykład strona, która nie definiuje żadnych właściwości po stronie serwera będzie obsługiwana inaczej niż strona, która je definiuje.

Dzięki współpracy z Google powstał komponent Next/Image , który od razu zapewnia najlepsze standardy optymalizacji obrazów i leniwego ładowania. To miła odmiana od łatania podstawowych funkcji projektu komponentami firm trzecich. Optymalizacja obrazów, choć niezbędna, jest często pomijana przez twórców frameworków, przez co deweloperzy muszą polegać na rozwiązaniach zewnętrznych, wymagających podejmowania dodatkowych decyzji i wyboru spośród zbyt wielu opcji oraz skomplikowanych ustawień.

Można nawet utworzyć całkowicie statyczną wersję witryny , która rezygnuje z funkcji po stronie serwera i generuje wyłącznie treści statyczne. Można je hostować w sieci CDN jako pliki HTML, CSS i JS.

Handel elektroniczny#

Sklepy internetowe to obszar, w którym wydajność, szybkość ładowania stron i płynne przeglądanie mają kluczowe znaczenie. Skrócenie czasu ładowania strony docelowej sklepu internetowego o jedną sekundę może znacząco zwiększyć przychody.

Oczekujemy, że przyszłe wersje Next.js wprowadzą do tego medium dodatkowe funkcje, a tym samym przyczynią się do rozwoju sieci. Projekt open source Next.js e-commerce zasługuje na szczególną uwagę.

Przyszłość tworzenia stron internetowych z React#

Wydajność będzie nadal się poprawiać, a technologia, która za nią stoi, będzie stawać się coraz bardziej złożona z każdym kolejnym krokiem.

Frameworki takie jak Next.js będą się rozwijać i uwzględniać wiele nowych możliwości. Deweloperzy skupią się na tworzeniu funkcjonalności produktów, zamiast martwić się o techniczne szczegóły złożonej architektury, na której działa ich kod.

W miarę jak w typowym cyklu tworzenia oprogramowania ujawnia się coraz mniej złożoności, automatyzacja staje się łatwiejsza do wyobrażenia i zyskuje praktyczne zastosowania.

Na przykład upraszczanie złożonego procesu tworzenia struktury strony, zapewnianie wizualnego sposobu realizacji takich celów bez pisania kodu dla składających się na nią komponentów React czy łączenie własnego kodu z edycją wizualną będą doskonałym uzupełnieniem technologii takich jak Next.js

TeleportHQ — bezpłatna platforma low-code z funkcją współpracy w czasie rzeczywistym#

TeleportHQ to bezpłatna platforma low-code ułatwiająca proces tworzenia oprogramowania i zwiększająca produktywność. Oferuje możliwości low-code, wizualny interfejs użytkownika, komponenty wielokrotnego użytku, wtyczkę do importowania projektów z Figmy oraz eksport czystego kodu do Next.js i 9 różnych frameworków JavaScript.

Pracując w TeleportHQ, możesz szybko przejść od prototypu projektu do kodu gotowego do wdrożenia. Twórz statyczne strony internetowe oraz aplikacje internetowe i mobilne, a następnie eksportuj kod do wybranego frameworka.