Co to jest Next.js i dlaczego oraz jak z niego korzystać w 2022 roku?

Praca nad nowoczesną aplikacją JavaScript z Reactem jest mistrzowska, dopóki nie wykryje się kilku problemów z renderowaniem całej zawartości po stronie klienta. Renderowanie serwerowe, znane również jako statyczne renderowanie wstępne, rozwiązuje te problemy. Next.Js to framework React, który pozwala użytkownikowi wykonywać wszystkie czynności bezpośrednio, ale nie ogranicza się do tego. Jest zalecany jako łańcuch narzędzi z jedną komendą i zerową konfiguracją dla projektów React. Obejmuje głównie projektowanie atrakcyjnych, bardzo dynamicznych, interaktywnych i wydajnych aplikacji internetowych dla różnych platform, takich jak Mac, Windows i Linux.

Ale jak dokładnie działa framework? Poświęćmy trochę czasu na zbadanie, czym są Next.js i React i jak mogą pomóc.

Więc najpierw, co to jest Next.js?

Next.js to framework React, który pozwala użytkownikom tworzyć jednostronicowe aplikacje JavaScript. Ten framework ma różne zalety zarówno dla aplikacji klientów, jak i zespołu programistów. Jako użytkownicy, możemy być coraz bardziej zirytowani, ponieważ nasze oczekiwania nie są spełniane przez strony internetowe i aplikacje, które ładują się dłużej niż milisekundy. Next.js jest szeroko rozpowszechniony i jest dobrym wyborem z różnych powodów; większość jest związana z szybkością i wydajnością.

Podstawowe cechy:

• Bogate wrażenia użytkownika
• Wspaniały występ
• Szybszy rozwój funkcji

Metody renderowania w Next.js

Renderowanie to nieunikniona jednostka, która pozwala użytkownikowi przekonwertować kod napisany w React na reprezentację HTML UI. Renderowanie można wykonać na kliencie i serwerze i może nastąpić przed wysłaniem żądania w czasie kompilacji lub po wykonaniu każdego żądania w czasie wykonywania.

a. Renderowanie po stronie serwera (SSR)

SSR to funkcja aplikacji, która umożliwia programiście konwertowanie plików HTML na serwerze na w pełni renderowaną stronę klienta HTML. Podstawową zaletą korzystania z SSR jako rozwiązania jest to, że pozwala programiście na użycie tego samego kodu, aby zapewnić szybsze działanie użytkownika podczas korzystania z niestandardowych danych. SSR jest w stanie pobierać dane i wstępnie wypełniać stronę internetową niestandardową treścią, wykorzystując jednocześnie niezawodne połączenie internetowe serwera. Na przykład, jeśli programista ma jeden plik index.html, który musi zostać dostarczony klientowi, istnieje duże prawdopodobieństwo, że programista ma jeden typ metadanych, najprawdopodobniej metadane strony głównej. Nie będzie kontekstualizowany, gdy programista chce udostępnić inną trasę. Dlatego żadna z Twoich tras nie będzie wyświetlana na innych stronach z istotnymi informacjami użytkownika (opis i podgląd zdjęcia), którymi użytkownicy chcieliby się podzielić ze światem.

b. Wstępne renderowanie

Wstępne renderowanie działa jako atrakcyjna alternatywa lub rozwiązanie dla obowiązkowych serwerów używanych do uniwersalnych aplikacji, które są albo odstraszające, albo przesadne dla małej aplikacji. Innymi słowy, wstępne renderowanie oznacza wcześniejsze generowanie kodu HTML na serwerze, a nie generowanie go przez JavaScript na urządzeniu użytkownika. Niektóre materiały z innej strony lub witryny mogą być wstępnie renderowane, gdy użytkownik przegląda stronę internetową, przygotowując się do następnej wizyty użytkownika. Ponieważ niektóre elementy strony zostały wyrenderowane z wyprzedzeniem, nowa strona ładuje się szybko.

Na przykład, jeśli przeglądarka na to pozwala, pierwsza strona internetowa w wynikach wyszukiwania Google jest zawsze prerenderowana. Google zakłada, że ​​zostanie kliknięty najwyższy wynik, i dlatego żąda, aby przeglądarka renderowała tę stronę.

c. Odroczone renderowanie (ISR)

W ramach Next.js odroczone renderowanie jest określane jako Incremental Static Regeneration (ISR), po raz pierwszy zaimplementowane w wersji 9.4. Jest to podobne do renderowania wstępnego; tylko żądana strona nie jest renderowana podczas początkowej kompilacji; jest renderowany, gdy użytkownik o to poprosi. Użytkownicy będą widzieć wstępnie wyrenderowaną wersję strony, dopóki nie nastąpi nowa kompilacja lub upłynie określony limit czasu pamięci podręcznej. ISR ma na celu skrócenie czasu potrzebnego na zbudowanie dużej witryny, umożliwiając programiście odroczenie tworzenia stron o mniejszym natężeniu ruchu. Może również renderować strony na podstawie treści generowanych przez użytkowników w poszczególnych przypadkach.

Co można zbudować za pomocą Next.Js i kiedy używać Next.Js?

Korzystając z Next.js, użytkownik może budować liczne produkty i interfejsy cyfrowe, takie jak:

• MVP (Minimum Viable Product): MVP to wersja produktu, która zawiera wystarczającą liczbę funkcji do wykorzystania przez pierwszego klienta i dodaje walidację do pomysłu produktu w cyklu rozwoju produktu. Na przykład MVP może pomóc zespołowi ds. produktu w zmianie i integracji produktów jako wczesne opinie użytkowników w branży oprogramowania.
• Strony internetowe Jamstack: Jamstack jest określany jako nowa standardowa architektura w kontekście sieciowym. JAMstac to nowoczesna architektura tworzenia stron internetowych wywodząca się z Markup (JAM), JavaScript i interfejsów API. JAMstack nie można określić jako technologii dyskretnej; z drugiej strony jest to inna technika tworzenia aplikacji i stron internetowych.
• Portale internetowe: Portal to platforma internetowa, która gromadzi dane z kilku źródeł w jednym interfejsie użytkownika i wyświetla je użytkownikom w sposób najbardziej odpowiedni dla ich sytuacji. Proste portale internetowe przekształciły się w systemy, które umożliwiają tworzenie cyfrowych doświadczeń klientów przez cały czas.
• Pojedyncze strony internetowe: witryna jednostronicowa, czasami nazywana witryną jednostronicową, to taka, która ma tylko jedną stronę HTML. Nie ma żadnych dodatkowych stron, takich jak Kontakt z nami, Informacje lub Funkcje.
• Witryny statyczne: Witryna statyczna (nazywana również stroną płaską lub stacjonarną) jest wyświetlana dokładnie tak, jak jest przechowywana w przeglądarce komputera. Składa się ze stron internetowych zakodowanych w formacie HTML, przechowywanych na serwerze sieciowym. To się nie zmienia; pozostaje taka sama lub „statyczna” dla wszystkich odwiedzających witrynę.
• Programowanie stron internetowych lub projektowanie baz danych nie są wymagane w przypadku statycznej witryny internetowej. Strony statyczne są najbardziej podstawowe i najłatwiejsze w projektowaniu, co czyni je idealnymi dla małych witryn. Utrzymywanie wielu statycznych stron może wkrótce stać się czasochłonnym i nieefektywnym obowiązkiem.
• Produkty SaaS: Produkty SaaS to oprogramowanie internetowe hostowane przez centralnego dostawcę i umożliwiające dostęp wszystkim użytkownikom, na przykład ekspander tekstu. DropBox, Google Apps i Canva to tylko niektóre z najważniejszych ilustracji produktów SaaS.
• Witryny handlu elektronicznego i handlu detalicznego: Witryna internetowa pozwala osobom fizycznym kupować i sprzedawać fizyczne towary, usługi i produkty cyfrowe online, a nie w rzeczywistym sklepie. Firma może obsługiwać zamówienia, otrzymywać płatności, zarządzać wysyłką i logistyką oraz zapewniać obsługę klienta za pośrednictwem witryny e-commerce.
• Pulpity nawigacyjne: Pulpit nawigacyjny to wizualna reprezentacja lub wyświetlanie danych użytkownika. Zawiera linki do cennych narzędzi i krytycznych informacji wyświetlanych na stronie.
• Progresywne aplikacje internetowe (PWA): PWA to aplikacja zbudowana przy użyciu standardowych technologii internetowych, takich jak Javascript i HTML.
• Interaktywne interfejsy użytkownika: interfejs użytkownika (UI) to punkt interakcji i komunikacji między ludźmi a komputerami w urządzeniu. Przykładami tego są ekrany, klawiatury, myszy i wygląd pulpitu. Może również odnosić się do interakcji użytkownika z programem lub witryną internetową.
• Blog: blog to internetowy pamiętnik w odwrotnej kolejności chronologicznej, regularnie aktualizowana strona internetowa lub witryna informacyjna, która wyświetla materiały w odwrotnej kolejności chronologicznej, z najnowszymi postami na górze. To platforma, na której pisarz lub grupa autorów może wyrazić swoje przemyślenia na określony temat.

NEXT.JS i JAMSTACK

Jamstack to architektura sieciowa, której celem jest uczynienie sieci bardziej responsywnym, bezpiecznym i skalowalnym. Opiera się na wielu narzędziach i przepływach pracy, które doceniają programiści i pomaga im jak najlepiej wykorzystać czas. Wstępne renderowanie i rozdzielanie to podstawowe zasady, które zapewniają witrynom i aplikacjom większą pewność i niezawodność. Jamstack współpracuje z różnymi generatorami stron statycznych, takimi jak Hugo, Jekyll, Gatsby, Nuxt, Huxo, Slate, Docsify, Gitbook, Docusaurus, Scully itp. Next.js staje się jednym z najpopularniejszych frameworków React do tworzenia stron Jamstack, które są szybkie i przyjazny dla SEO. Działa dobrze z bezgłowymi systemami CMS i platformami eCommerce, zapewniając wyjątkową wydajność i korzyści SEO.

Funkcje Next.js

• Hot Code Reloading: Gdy modyfikacje w kodzie są zapisywane, automatycznie ponownie ładuje program.
• Automatyczne dzielenie kodu: ta funkcja łączy i obsługuje każdą stronę z każdym importem w kodzie. Oznacza to, że na stronie nie jest już ładowany kod.
• Kompatybilność ekosystemu: JavaScript, Node i React są kompatybilne z ekosystemem Next.js.
• Renderowanie serwera: Wydajnie renderuj składniki reagujące na serwerze przed dostarczeniem kodu HTML do klienta.
• Styled-JSX: Styled-JSX styled-jsx to rozszerzenie JavaScript, które umożliwia pisanie CSS bezpośrednio w kodzie.
• Automatyczne pobieranie z wyprzedzeniem: tylko linki wyświetlane w oknie podglądu są wstępnie pobierane przez Next.js, który do ich wykrywania używa interfejsu API obserwatora przecięcia. Next.js wyłącza również prefetching w przypadku wolnego połączenia sieciowego lub gdy użytkownik ma włączone (Save-Data). W oparciu o następujące sprawdzenia, dynamicznie wstrzykuje <link rel="preload"> w celu pobrania komponentów do kolejnych nawigacji. Next.js nie wykonuje JavaScript; tylko je pobiera. Zapobiega to pobieraniu jakichkolwiek innych elementów, których może zażądać wstępnie pobrana strona, dopóki użytkownik nie kliknie linku.
• Eksporty statyczne: Użytkownik może użyć next export , aby wyeksportować Dalej. Aplikację Js do statycznego HTML można uruchomić bez węzła. Serwer Js.
• Obsługa TypeScript: Next.js zapewnia zintegrowane środowisko TypeScript po wyjęciu z pudełka.

Generowanie witryny statycznej za pomocą Next.js

Strony statyczne są tak stare, jak sieć. Jednak wraz z rozwojem języka JavaScript, strony statyczne zyskały na rynku, czyniąc je bardziej dynamicznymi. Składanie i renderowanie strony internetowej lub aplikacji w czasie kompilacji to generacja statyczna. Wynikiem jest zbiór plików statycznych, które zawierają sam plik HTML oraz zasoby, takie jak JavaScript i CSS. Jak wiemy, aplikacje internetowe oparte na JavaScript działają, wykonując biblioteki, takie jak React lub skrypty w przeglądarce w czasie wykonywania. Kiedy przeglądarka otrzymuje stronę, zwykle składa się z prostego kodu HTML z niewielką zawartością. Skrypty są następnie ładowane, co pozwala na wciągnięcie materiału na stronę, co określa się mianem nawodnienia. Generacja statyczna wykorzystuje technologie takie jak Next.js do renderowania strony podobnej do tego, jak wyglądałaby w przeglądarce, ale w czasie kompilacji. Dzięki temu możemy obsłużyć całą zawartość przy pierwszym załadowaniu. Skrypty nadal obciążają stronę podczas tego procesu, ale najlepiej z mniejszą liczbą zmian lub bez zmian.

• Next.js próbuje statycznie generować dowolne strony po wyjęciu z pudełka, jeśli to możliwe. Next.js robi to, wykrywając proces pobierania danych opracowany przez aplikację.
• Next.js udostępnia interfejsy API, takie jak getStaticProps i getServerSideProps , do pobierania danych w zależności od ich wykorzystania podczas tworzenia aplikacji dla użytkownika.
• Jeśli użytkownik używa getStaticProps , Next.js dowiaduje się, że serwer musi renderować te strony.
• Next.js załaduje wszelkie dane, gdy ktoś zażąda strony z serwera, w połączeniu z systemem wdrażania, takim jak Vercel, który automatycznie zajmie się konfiguracją serwera.
• Po opracowaniu aplikacji Next.js daje możliwość wyeksportowania aplikacji jako plików statycznych do osobnego katalogu. Jednak nie robi tego domyślnie.
• Deweloper najpierw skompiluje aplikację, a następnie wykona następny eksport, dzięki czemu aplikacja będzie domyślnie dostępna jako pliki statyczne w katalogu out.

Korzyści z Next.js

Dla właścicieli firm

Niewątpliwie możemy stwierdzić, że każda firma chce poprawić swój współczynnik konwersji, co bezpośrednio wpływa na sprzedaż. Firmy te muszą stosować nowe technologie, aby zapewnić prawdziwie wyjątkowe wrażenia użytkownika, które zaspokoją zarówno obecnych, jak i potencjalnych klientów. Next.JS pomaga im, umożliwiając im pełną kontrolę nad ostatecznym projektem ich stron internetowych, sklepów internetowych, aplikacji i innych produktów cyfrowych. Ponadto nie ograniczają Cię motywy ani wtyczki specyficzne dla konkretnej platformy eCommerce lub systemu zarządzania treścią (CMS).

• Adaptacyjność i responsywność: Dalej. js zapewnia konfigurowalne strony internetowe i aplikacje zgodnie z rozmiarem ekranu urządzenia)
• Krótki czas ładowania strony i wyjątkowe wrażenia na miejscu.
• Bezpieczeństwo danych: Statyczne strony internetowe zbudowane za pomocą NextJS nie mają bezpośredniego dostępu do bazy danych, zależności, danych użytkownika ani innych poufnych informacji. Zapewnia to bezpieczeństwo danych.
• Szybszy czas wprowadzania na rynek: NextJS to doskonała metoda tworzenia MVP tak szybko, jak to możliwe, dzięki kilku predefiniowanym komponentom. Ta metoda rozwoju pozwala szybko zbierać opinie i wprowadzać zmiany w produkcie bez straty czasu i pieniędzy.
• W pełni omnichannel: witryny i aplikacje oparte na technologii NextJS działają na dowolnym urządzeniu, dzięki czemu możesz oferować swoje produkty i usługi w wielu kanałach.
• Odwiedzający i klienci będą zadowoleni z działania witryn i aplikacji internetowych NextJS, ponieważ strony statyczne są z natury szybkie.
• Wsparcie na żądanie: Wraz ze wzrostem popularności React i NextJS rośnie liczba programistów. W rezultacie łatwo będzie zidentyfikować agencję lub freelancera, który dokona niezbędnych zmian.

Dla marketerów

W kontekście korzyści, jakie marketerzy czerpią z Next.js. Niektóre znaczące zalety to zwiększenie współczynnika konwersji, wydajności SEO i ruchu organicznego.

• Wyższe liczby konwersji i sprzedaży: Marketerzy czerpią korzyści z NextJS, ponieważ witryny i aplikacje online są szybkie, lekkie i łatwe do skanowania, a wszystko to pomaga poprawić rankingi Google. Wraz ze wzrostem rankingów Google wzrasta ruch organiczny, co skutkuje wzrostem współczynników konwersji i sprzedaży.
• Unikalne wrażenia użytkownika: ta przewaga jest bardziej widoczna w branży eCommerce, w której sklepy internetowe, w których firmy używają NFT.js do tworzenia wyróżnienia i utrzymania się na wysoce konkurencyjnym rynku globalnym.

Dla programistów

Twórcy niesamowicie gorliwie podchodzą do komponentów React wielokrotnego użytku, które zmniejszają koszty i czas tworzenia.

• Parser CSS: programiści mogą importować pliki CSS z pliku JavaScript. Nowy pares poprawił obsługę CSS i podkreślił wcześniej nierozpoznane problemy.
• Szybkie odświeżanie: łatwo widoczne zmiany wprowadzone w komponentach React.
• Wbudowany komponent obrazu i automatyczna optymalizacja obrazu: Ta funkcja automatycznie optymalizuje zdjęcia. Obsługuje teraz obrazy AVIF, które są o 20 procent mniejsze niż obrazy WebP.
• Wsparcie społeczności: Liczba współtwórców NextJS rośnie wraz z jego popularnością. Zamiast zaczynać od zera, programiści mogą wykorzystać to do zlokalizowania prawdopodobnie już istniejących rozwiązań.
• Hybryda renderowania po stronie serwera SSR i statycznego generowania witryn SSG: umożliwia użytkownikowi wstępne renderowanie stron w czasie żądania lub kompilacji w jednym projekcie.
• Przyrostowa regeneracja statyczna: umożliwia twórcom stron internetowych aktualizowanie istniejących witryn w tle w miarę napływu ruchu poprzez ponowne ich renderowanie. W ten sposób zawartość statyczna może stać się dynamiczna.
• Obsługa TypeScript: automatyczna konfiguracja i kompilacja TypeScript.
• Zero Config: NextJS obsługuje kompilację i łączenie za Ciebie. Innymi słowy, jest zbudowana od podstaw, aby była produktywna.
• Pobieranie danych: w zależności od przypadku użycia aplikacji stosuje się kilka podejść do renderowania treści. Obejmuje to zarówno renderowanie po stronie serwera, jak i tworzenie witryny statycznej do renderowania wstępnego oraz przyrostową regenerację statyczną w celu aktualizacji lub tworzenia zawartości w czasie wykonywania.
• Trasy API: jako funkcja Node.js bezserwerowa, łatwo jest utworzyć punkt końcowy API.
• Podział kodu: dziel kod i udostępniaj składniki tylko wtedy, gdy są one potrzebne do zmniejszenia rozmiaru pierwszego ładunku aplikacji.
• Kompilator oparty na Ruście SWC: SWC, kompilator oparty na Ruście, konwertuje i minimalizuje kod JavaScript na potrzeby produkcji. Następny. js zawiera zupełnie nowy kompilator Rusta, który zoptymalizował tworzenie pakietów i budowanie, co skutkuje 3x szybszymi aktualizacjami lokalnymi i 5x szybszymi kompilacjami produkcyjnymi.
• Oprogramowanie pośredniczące: umożliwia użytkownikowi uruchomienie kodu przed zakończeniem żądania, umożliwiając użytkownikowi zastosowanie kodu zamiast konfiguracji. Użytkownicy mogą modyfikować odpowiedzi na żądania i przekierowywać użytkowników z jednej trasy na drugą.

Wady NextJS

Chociaż NextJS szybko się rozwija i dodaje nowe funkcje, nadal ma pewne wady i problemy, które wymieniono poniżej:

• Koszt elastyczności: Next JS ma kilka wbudowanych stron frontowych, co zmusza programistę do zbudowania całej warstwy front-endu od zera.
• Rozwój i zarządzanie: jeśli użytkownik chce użyć NextJS do założenia sklepu internetowego, ale nie ma własnego zespołu programistów, będzie potrzebował zaangażowanej osoby do nadzorowania rozwoju i zarządzania.
• Brak wbudowanego menedżera stanu: W razie potrzeby Redux, MobX lub czegoś podobnego użytkownik będzie potrzebował menedżera stanu.
• Mała liczba wtyczek: w porównaniu z innymi odpowiednikami, takimi jak Gatsby.js, użytkownik nie może korzystać z tylu łatwo adaptowalnych wtyczek.

Czy Next.js jest lepszy niż Gatsby?

Gatsby łączy najlepsze części Reacta, GraphQL i routera reakcji, aby stworzyć przyjazny dla programistów generator stron statycznych. Gatsby generuje statyczne pliki HTML, które mogą być ładowane z sieci CDN. Wiadomo, że gdy aplikacje Gatsby stają się zbyt duże lub pobierają ogromne ilości danych, powodują problemy i opóźniają się kompilacje. Next.js jest idealny, jeśli aplikacja ma ponad 100 000 stron lub będzie musiała pobierać ogromne ilości danych (takich jak sklep z wieloma produktami z wariantami).

Oba są odpowiednimi opcjami do renderowania po stronie serwera, ale w dwóch różnych opcjach. Rezultatem korzystania z Gatsby jest statyczny generator witryn bez serwera, jeśli użytkownik zamierza zbudować witrynę. Teraz konieczne jest statyczne wdrożenie procesu budowania na Netlify lub innej statycznej witrynie hostingowej. Next.js zapewnia backend, który może renderować odpowiedź na żądanie po stronie serwera, umożliwiając użytkownikom tworzenie dynamicznych stron internetowych na platformach obsługujących Node.js. Next.js może również generować witrynę statyczną, ale nie powiedzielibyśmy, że jest to jej główny przypadek użycia.

Jeśli celem jest stworzenie statycznej witryny, można napotkać trudności w podejmowaniu decyzji, a Gatsby może mieć doskonały ekosystem wtyczek, w tym wiele do blogowania.

Gatsby jest również mocno oparty na GraphQL, który może zaspokoić potrzeby w zależności od opcji i wymagań użytkownika.

Jak zainstalować Node.js w systemie Windows?

Aby zainstalować Next.js, musisz zainstalować Node.js.

Pobierz Instalator Windows z oficjalnej strony internetowej nodejs.

Lub oto alternatywna metoda instalacji Node.Js

Korzystanie z Wingeta

 winget install OpenJS.NodeJS # or for LTS winget install OpenJS.NodeJS.LTS

Korzystanie z czekolady

 cinst nodejs # or for full install with npm cinst nodejs.install

Korzystanie z miarki

 scoop install nodejs

Aby upewnić się, że Node.Js jest poprawnie zainstalowany, uruchom to polecenie

 C:\Users\Admin> node -v

Korzystanie z aplikacji Utwórz następną

Innym sposobem na rozpoczęcie pracy z Nex.js jest użycie create-next-app . Jest to narzędzie CLI, które pomoże Ci zbudować aplikację Nex.js. Aby z tego skorzystać, musisz zainstalować pakiet npx_command, który pomoże ci wykonywać polecenia JavaScript. Aby rozpocząć, użyj jednego z poniższych poleceń.

 npx [email protected] # or yarn create next-app # or pnpm create next-app

Polecenie wymaga podania nazwy aplikacji i tworzy nowy folder o tej nazwie, a następnie pobiera wszystkie wymagane pakiety ( react , react-dom , next ), ustawia plik package.json na:

Przykładową aplikację możesz uruchomić za pomocą npm run dev

Otrzymasz wynik taki jak ten http://localhost:3000:

Kroki instalacji i uruchomienia aplikacji Next.js

Krok 1: Możesz pobrać node.js stąd. Uruchom te polecenia w terminalu, aby potwierdzić instalację.

 node -v npm -v

Krok 2: Teraz utwórz folder dla swojego projektu, przejdź do niego za pomocą edytora kodu i uruchom następujące polecenie na terminalu.

 npm init -y npm install --save next react react-dom

dodaj następujący skrypt w pliku package.json

 { "scripts": { "dev": "next", "build": "next build", "start": "next start" } }

Krok 3: Dodaj plik index.js do folderu strony i dodaj do niego następujący kod

 import React from'react'; import Link from'next/link'; export default class extends React.Component { render() { return ( { // This is Jsx contains HTML // code in Javascript} <div> <h1>Hello Emizentech</h1> { // This is Styled-jsx contains // CSS code in Javascript} <style jsx>{` a{ color:grey; text-decoration:none; } `}</style> } </div> ) } }

Krok 4: Uruchom aplikację z npm start.

Wyjście

Jak dodać TypeScript do Next.js?

 # run 'touch' to create an empty config file # Next will auto-populate it touch tsconfig.json # then you'll be prompted to run the command: npm install -D typescript @types/react @types/node # now you can use TypeScript everywhere

Jak dodać strony i trasy do swojej aplikacji next.js

Aby dodać stronę about do swojej aplikacji, upuść komponent w /pages/about.js lub .tsx dla TypeScript.

 export default function About() { return <div>About</div> }

Linki i nawigacja

Next framework ma również komponent Link z next/link .

Jeśli chcesz utworzyć link do strony głównej (/) i ścieżki bloga (tj. /blog/emizen), dołączylibyśmy następujące elementy w /pages/about.js:

 import Link from "next/link"; export default function About() { return ( <div> <h1>About Me</h1> <div> <Link href="/"> <a>Home</a> </Link> <Link href="/blog/emizen"> <a>Blog Post</a> </Link> </div> </div> ); }

href jest wymaganym atrybutem komponentu Link i dane mogą być do niego przekazywane również jako obiekt:

 import Link from "next/link"; export default function About() { return ( <div> <h1>About Me</h1> <div> <Link href={{ pathname: "/about" }}> <a>Home</a> </Link> <Link href={{ pathname: "/blog/[slug]", query: { slug: "emizen" }, }} > <a>Blog Post</a> </Link> </div> </div> ); }

SEO w Next.js

W Next możesz użyć komponentu Head z next/head , aby dodać metadane do stron internetowych:

 import Link from "next/link"; import Head from "next/head"; export default function About() { return ( <div> <Head> <title>About | IT Site</title> <meta name="description" content="A website Emizentech/> </Head> <h1>About Me</h1> <div> <Link href="/"> <a>Home</a> </Link> <Link href="/blog/emizen"> <a>Blog Post</a> </Link> </div> </div> ); }

Trasy API

Nextjs umożliwia tworzenie aplikacji React z pełnym stosem poprzez pisanie kodu serwera za pomocą funkcji zwanej trasami API.
Aby utworzyć własne API, które jest wykonywane jako oddzielne funkcje bezserwerowe, utwórz folder o nazwie „api” w /pages.

Jeśli chcesz uzyskać dane z /api/about dla strony about, dołącz stronę o nazwie about.js w /pages/api

 // syntax is very similar to the "Express" Node.js framework // here we are responding to every request with an OK (200) code and sending JSON data back (our name) export default function handler(req, res) { res.status(200).json({ name: "Reed Barger" }); }

Poproś o dane po stronie klienta

Aby zażądać danych z naszych tras API, konwencjonalnym podejściem byłoby zażądanie ich za pomocą useEffect i useState :

 import Link from "next/link"; import { useEffect, useState } from "react"; export default function About() { const [data, setData] = useState(null); const [isLoading, setLoading] = useState(false); useEffect(() => { setLoading(true); fetch("api/about") .then((res) => res.json()) .then((data) => { setData(data); setLoading(false); }); }, []); if (isLoading) return <p>Loading...</p>; if (!data) return <p>No about data</p>; return ( <div> <h1>My name is: {data.name}</h1> </div> ); }

Żądaj danych po stronie serwera

Te dwie funkcje pomagają nam w pobieraniu danych z serwera.

 getServerSideProps #or getStaticProps

Funkcje znajdują się w tym samym pliku co komponenty React, a ich kod jest dołączony oddzielnie od klienta React.

GetServerSideProps

Każda wizyta na stronie wyzwala wykonanie getServerSideProps . W rezultacie jest niezwykle przydatny na stronach, które zawierają dane dynamiczne lub wymagają każdorazowego wykonywania żądań, takich jak pobieranie danych uwierzytelnionych użytkowników.

 export default function About({ name }) { return ( <div> <h1>My name is: {name}</h1> </div> ); } export function getServerSideProps() { return { props: { name: "Vivek Khatri" }, }; }

Funkcja ta pozwala na wysyłanie danych z serwera i wstrzykiwanie ich do rekwizytów komponentu strony.

Pozwala klientowi React na natychmiastowe wyświetlanie danych, bez opóźnień i bez konieczności radzenia sobie ze stanami ładowania lub błędów.

Jeśli chcesz pobrać dane z serwera, możesz użyć async getServerSideProps ze słowem kluczowym async .

 export default function About({ name }) { return ( <div> <h1>My name is: {name}</h1> </div> ); } export async function getServerSideProps() { const data = await fetch("https://xyz.com/api").then((res) => res.json() ); return { props: { name: data.results[0].name.first }, }; }

Dynamicznie pobieramy dane z API XYZ, a dane zmieniają się przy każdym odświeżeniu strony.

GetStaticProps

Funkcja getStaticProps jest lepsza w przypadku stron statycznych, które rzadko się zmieniają. Ta funkcja uruchamia kod serwera i wysyła żądanie GET do serwera, ale tylko raz po zakończeniu projektu.

Gdy aplikacja jest uruchomiona w fazie rozwoju, żąda danych za każdym razem, gdy odświeża stronę, podobnie jak w przypadku getServerSideProps.

Podczas tworzenia getStaticProps żądania tylko przy każdej wizycie na stronie.

Jeśli uruchomisz yarn build , a następnie uruchomisz kompilację produkcyjną lub projekt React za pomocą yarn start , otrzymasz taką samą nazwę, jaka była wymagana podczas tworzenia projektu, a nie w czasie wykonywania.

getServerSideProps i getStaticProps mogą wysyłać tylko żądania GET. Trasy API mogą obsługiwać dowolny typ żądań odczytu i aktualizacji danych (to znaczy w połączeniu z warstwą danych, taką jak baza danych)

Przykłady Next.js

Więcej przykładów Next.js znajdziesz tutaj

Najlepsze szablony Next JS

Deska rozdzielcza materiałów

NextJS Material to otwarty pulpit nawigacyjny Material-UI React inspirowany projektem Material Design. Zasady materiałowe to zestaw prostych i eleganckich elementów. Popularne frameworki Material-UI, NextJS i React zostały użyte do stworzenia panelu NextJS Material Dashboard.

Zestaw materiałów

NextJS Material Kit to darmowy zestaw do projektowania materiałów stworzony dla NextJS, React i Material-UI. NextJS Material Kit zawiera ponad 100 indywidualnych elementów frontendu, które pozwalają użytkownikowi mieszać i dopasowywać. Warianty kolorystyczne są możliwe dla wszystkich komponentów, które użytkownik może łatwo zmieniać za pomocą plików i klas SASS i JSS (w plikach JS).

Argon

Pulpit nawigacyjny NextJS Argon składa się z ponad 100 różnych komponentów, które użytkownik może mieszać i dopasowywać według własnego uznania. Modyfikując pliki SAAS dołączone do projektu, użytkownik może łatwo spersonalizować ten pulpit nawigacyjny React o otwartym kodzie źródłowym.

Nie my

Komponenty z kompletnym kodem Notus NextJS składa się z ponad 100 odrębnych komponentów, które użytkownik może mieszać i dopasowywać zgodnie z potrzebami. Wszystkie komponenty mogą mieć warianty kolorystyczne, które możesz łatwo zmienić za pomocą klas CSS Tailwind.

Gdzie możesz się nauczyć Next.js?

• Możesz sprawdzić oficjalną stronę internetową, aby dowiedzieć się Next.js
• Inną opcją jest React Bootcamp
• Next.js na Udemy

i istnieje wiele innych zasobów online, które pomogą Ci opanować Next.js

Wniosek

Nie ma znaczenia, czy zamierzasz zbudować solidne, złożone oprogramowanie, które będzie służyć milionom ludzi, czy szybko rozwijasz się w sklepie internetowym. W obu przypadkach możesz wykorzystać zalety nowoczesnej technologii internetowej, takiej jak Next.js, aby Twoja firma była bardziej wydajna w Internecie. SEO i UX Next.js pomogą Ci uczynić internet lepszym, czystszym i bardziej zorientowanym na użytkownika miejscem, aby poprawić szybkość Twojej strony. Strony generowane statycznie są nadal responsywne: Next.js usprawni Twoją aplikację po stronie klienta, umożliwiając jej pełną interaktywność.

Szukasz utalentowanego programisty Next.js lub full stack developera? Mamy twoje plecy! Zapewniamy wszystkie narzędzia i wiedzę specjalistyczną, których będziesz potrzebować, aby już teraz rozpocząć planowanie i realizację projektu Next.js.

Często zadawane pytania dotyczące Next.Js