Ce este Next.js și de ce și cum să-l folosești în 2022?

Lucrul la o aplicație JavaScript modernă cu React este măiestrie până când se detectează câteva probleme cu redarea întregului conținut pe partea clientului. Redarea serverului, cunoscută și sub numele de pre-randare statică, rezolvă aceste probleme. Next.Js este un cadru React care permite utilizatorului să efectueze toate lucrurile direct, dar nu se limitează la asta. Este susținut ca un lanț de instrumente cu o singură comandă și configurație zero pentru proiectele React. Aceasta implică în principal proiectarea de aplicații web atractive, extrem de dinamice, interactive și performante pentru diferite platforme precum Mac, Windows și Linux.

Dar cum funcționează mai exact cadrul? Să petrecem ceva timp explorând ce sunt Next.js și React și cum pot ajuta.

Deci, în primul rând, ce este Next.js?

Next.js este un cadru React care permite utilizatorilor să creeze aplicații Javascript cu o singură pagină. Acest cadru are diverse avantaje atât pentru aplicațiile clienților, cât și pentru echipa de dezvoltare. În calitate de utilizatori, cineva poate fi din ce în ce mai iritat, deoarece așteptările noastre nu sunt îndeplinite de site-uri web și aplicații care durează mai mult de milisecunde pentru a se încărca. Next.js este larg răspândit și o alegere bună din diverse motive; majoritatea sunt legate de viteză și performanță.

Caracteristici de baza:

• Experiență bogată de utilizator
• Performanță grozavă
• Dezvoltare mai rapidă a caracteristicilor

Metode de randare în Next.js

Redarea este o unitate inevitabilă care permite utilizatorului să convertească codul scris în React în reprezentarea HTML UI. Redarea se poate face pe client și pe server și se poate întâmpla fie înainte ca o solicitare să fie făcută în timpul construirii, fie după ce fiecare solicitare este făcută în timpul execuției.

A. Redare pe server (SSR)

SSR este capacitatea unei aplicații care permite dezvoltatorului să convertească fișierele HTML de pe server într-o pagină client HTML complet redată. Avantajul principal al utilizării SSR ca soluție este că permite dezvoltatorului să folosească același cod pentru a oferi o experiență de utilizator mai rapidă în timp ce utilizează date personalizate. SSR este capabil să preia date și să prepopuleze pagina web cu conținut personalizat, utilizând în același timp conexiunea fiabilă la internet a serverului. De exemplu, dacă dezvoltatorul are un fișier index.html care trebuie livrat clientului, atunci există o mare posibilitate ca dezvoltatorul să aibă un tip de metadate, cel mai probabil metadatele paginii de pornire. Nu va fi contextualizat atunci când dezvoltatorul dorește să partajeze o altă rută. Prin urmare, niciunul dintre traseele dumneavoastră nu va fi afișat pe alte site-uri cu informații relevante despre utilizator (descriere și fotografie de previzualizare) pe care utilizatorii ar dori să le partajeze lumii.

b. Pre-randare

Pre-rendarea funcționează ca o alternativă atractivă sau o soluție pentru serverele obligatorii utilizate pentru aplicațiile universale care sunt fie descurajatoare, fie exagerate pentru o aplicație mică. Cu alte cuvinte, pre-rendarea se referă la generarea de HTML în avans pe server, în loc să fie făcută de JavaScript pe dispozitivul utilizatorului. Unele materiale de pe o altă pagină sau site pot fi pre-redate atunci când utilizatorul navighează pe o pagină web în pregătirea pentru ca utilizatorul să o viziteze în continuare. Deoarece unele dintre elementele paginii au fost redate din timp, noua pagină se încarcă rapid.

De exemplu, dacă browserul permite acest lucru, prima pagină web din rezultatele căutării Google este întotdeauna redată în avans. Google presupune că se va face clic pe rezultatul superior și, prin urmare, solicită browserului să redea pagina respectivă.

c. Redare amânată (ISR)

În cadrul Next.js, randarea amânată este denumită regenerare statică incrementală (ISR), implementată pentru prima dată în versiunea 9.4. Este similar cu pre-rendarea; numai pagina solicitată nu este redată în timpul construirii inițiale; este redat atunci când un utilizator o solicită. Utilizatorii vor vedea versiunea preredată a paginii până când are loc o nouă construcție sau până când expiră un interval specificat de cache. ISR își propune să reducă timpul necesar pentru a construi un site mare, permițând dezvoltatorului să amâne crearea paginilor cu trafic mai puțin. De asemenea, poate reda pagini pe baza conținutului generat de utilizatori, de la caz la caz.

Ce puteți construi cu Next.Js și când să utilizați Next.Js?

Folosind Next.js, un utilizator poate construi numeroase produse și interfețe digitale, cum ar fi:

• MVP (Produs minim viabil): MVP este o versiune de produs care cuprinde suficiente caracteristici pentru a fi utilizate de către clientul timpuriu și pentru a adăuga validare ideii de produs în ciclul de dezvoltare a produsului. De exemplu, MVP-ul poate ajuta echipa de produs în modificarea și integrarea produselor ca feedback timpuriu al utilizatorilor în industria software.
• Site-uri web Jamstack: Jamstack este denumită noua arhitectură standard în contextul web. JAMstac este o arhitectură modernă de dezvoltare web obținută din Markup (JAM), JavaScript și API-uri. JAMstack nu poate fi specificat ca tehnologie discretă; pe de altă parte, este o tehnică diferită pentru construirea de aplicații și site-uri web.
• Portaluri web: Un portal este o platformă bazată pe web care adună date din mai multe surse într-o singură interfață cu utilizatorul și le afișează utilizatorilor în modul cel mai potrivit pentru situația lor. Portalurile web simple s-au transformat în sisteme care permit eforturile de experiență digitală a clienților de-a lungul timpului.
• Pagini web unice: un site web cu o singură pagină, uneori cunoscut ca site web cu o singură pagină, este unul care are o singură pagină HTML. Nu există pagini suplimentare, cum ar fi pagina Contactați-ne, Despre sau Caracteristici.
• Site-uri web statice: un site web static (cunoscut și ca pagină plată sau staționară) este afișat exact așa cum este stocat într-un browser de computer. Este alcătuit din pagini web codificate HTML păstrate pe un server web. Nu se schimbă; rămâne același, sau „static”, pentru toți vizitatorii site-ului.
• Programarea web sau proiectarea bazelor de date nu sunt necesare pentru un site web static. Site-urile web statice sunt cele mai simple și mai ușor de proiectat, făcându-le ideale pentru site-urile la scară mică. Menținerea multor pagini statice poate deveni în curând o corvoadă ineficientă și consumatoare de timp.
• Produse SaaS: produsele SaaS sunt software de internet găzduit de un furnizor central și permit accesul tuturor utilizatorilor, de exemplu, extensia text. DropBox, Google Apps și Canva sunt câteva dintre ilustrațiile proeminente ale produselor SaaS.
• Site-uri web de comerț electronic și de vânzare cu amănuntul: un site web permite persoanelor fizice să cumpere și să vândă bunuri fizice, servicii și produse digitale online, mai degrabă decât într-un magazin real. O companie poate gestiona comenzi, poate primi plăți, poate gestiona transportul și logistica și poate oferi asistență clienților printr-un site web de comerț electronic.
• Tablouri de bord: un tablou de bord este o reprezentare vizuală sau afișare a datelor unui utilizator. Oferă link-uri către instrumente valoroase și informații critice afișate pe site.
• Aplicații web progresive (PWA): PWA este o aplicație software creată folosind tehnologii web standard precum Javascript și HTML.
• Interfețe interactive cu utilizatorul: interfața cu utilizatorul (UI) este punctul de interacțiune și comunicare între oameni și computere dintr-un dispozitiv. Ecranele de afișare, tastaturile, șoarecii și aspectul unui desktop sunt toate exemple în acest sens. De asemenea, se poate referi la modul în care un utilizator interacționează cu un program sau un site web.
• Blog: un blog este un jurnal online cronologic invers, o pagină web actualizată regulat sau un site web informativ care afișează materiale în ordine cronologică inversă, cu cele mai recente postări în partea de sus. Este o platformă în care un scriitor sau un grup de autori își poate exprima gândurile asupra unui anumit subiect.

NEXT.JS și JAMSTACK

Jamstack este o arhitectură web care își propune să facă web-ul mai receptiv, mai sigur și mai scalabil. Se bazează pe multe instrumente și fluxuri de lucru pe care dezvoltatorii le apreciază și îi ajută să profite la maximum de timpul lor. Pre-rendarea și decuplarea sunt principii esențiale care permit site-urilor și aplicațiilor să fie furnizate cu mai multă siguranță și fiabilitate. Jamstack funcționează cu diverși generatori de site-uri statice precum Hugo, Jekyll, Gatsby, Nuxt, Huxo, Slate, Docsify, Gitbook, Docusaurus, Scully etc. Next.js devine unul dintre cele mai populare cadre React pentru crearea de site-uri web Jamstack care sunt ambele rapide și prietenos cu SEO. Funcționează bine cu CMS-uri fără cap și platforme de comerț electronic pentru a oferi performanțe excepționale și beneficii SEO.

Caracteristici Next.js

• Reîncărcare cod fierbinte: Când modificările în cod sunt salvate, programul se reîncarcă automat.
• Divizarea automată a codului: această funcționalitate include și servește fiecare pagină cu fiecare import în cod. Aceasta înseamnă că nu mai este încărcat niciun cod pe site.
• Compatibilitate cu ecosistemul: JavaScript, Node și react sunt compatibile cu ecosistemul Next.js.
• Redare server: Redați componentele de reacție pe server în mod eficient înainte de a livra HTML către client.
• Styled-JSX: Styled-JSX styled-jsx este o extensie JavaScript care vă permite să scrieți CSS direct în cod.
• Preluare automată: numai linkurile afișate în fereastra de vizualizare sunt preluate în avans de Next.js, care utilizează API-ul Intersection Observer pentru a le detecta. Next.js dezactivează, de asemenea, preîncărcarea în cazul unei conexiuni lente la rețea sau când utilizatorul are (Save-Data) activat. Pe baza următoarelor verificări, injectează în mod dinamic etichete <link rel="preload"> pentru a descărca componente pentru navigarea ulterioară. Next.js nu execută JavaScript; doar o aduce. Acest lucru îl împiedică să descarce orice alte lucruri pe care pagina preîncărcată le poate solicita până când utilizatorul face clic pe link.
• Exporturi statice: utilizatorul poate folosi next export pentru a exporta Next. Aplicația Js la HTML static poate fi rulată fără un Node. Serverul Js.
• Compatibilitate TypeScript: Next.js a oferit o experiență TypeScript integrată imediată.

Generarea site-ului static cu Next.js

Site-urile web statice sunt la fel de vechi ca web. Cu toate acestea, odată cu creșterea JavaScript, site-urile statice au câștigat fricțiuni pe piață, făcându-le mai dinamice. Asamblarea și redarea unui site web sau a unei aplicații în timpul construirii este o generație statică. Rezultatul este o colecție de fișiere statice care includ fișierul HTML în sine și elemente precum JavaScript și CSS. După cum le știm, aplicațiile web bazate pe JavaScript funcționează prin executarea de biblioteci precum React sau scripturi în browser în timpul rulării. Când un browser primește o pagină, aceasta constă, de obicei, din HTML simplu, cu conținut redus. Scripturile sunt apoi încărcate, permițând ca materialul să fie tras în pagină, denumit hidratare. Static Generation folosește tehnologii precum Next.js pentru a reda o pagină similar cu modul în care ar apărea în browser, dar în momentul compilării. Acest lucru ne permite să difuzăm întregul conținut pe încărcarea inițială. Scripturile încă hidratează pagina în timpul acestui proces, dar în mod ideal cu mai puține modificări sau fără modificări.

• Next.js încearcă să genereze static orice pagini din cutie, dacă este posibil. Next.js face acest lucru detectând procesul de preluare a datelor dezvoltat de o aplicație.
• Next.js oferă API-uri precum getStaticProps și getServerSideProps pentru a prelua date în funcție de utilizarea lor în construirea aplicației pentru utilizator.
• Dacă utilizatorul folosește getStaticProps , Next.js descoperă necesitatea ca serverul să redea acele pagini.
• Next.js va încărca orice date atunci când cineva solicită pagina de la server, împreună cu un sistem de implementare precum Vercel, care se va ocupa automat de configurarea serverului.
• După ce aplicația a fost dezvoltată, Next.js oferă posibilitatea de a exporta aplicația ca fișiere statice într-un director separat. Cu toate acestea, nu o face implicit.
• Dezvoltatorul va construi mai întâi aplicația, apoi va executa următorul export, ceea ce face ca aplicația să fie disponibilă ca fișiere statice în directorul out în mod implicit.

Beneficiile Next.js

Pentru proprietarii de afaceri

Putem afirma fără îndoială că fiecare afacere dorește să-și îmbunătățească rata de conversie, ceea ce are un impact direct asupra vânzărilor. Aceste companii trebuie să folosească noi tehnologii pentru a oferi o experiență de utilizator cu adevărat unică, care să se adreseze atât clienților actuali, cât și potențialilor. Next.JS îi ajută, permițându-le control complet asupra designului final al site-urilor lor web, magazinelor online, aplicațiilor și altor produse digitale. În plus, nu sunteți restricționat de teme sau pluginuri specifice unei anumite platforme de comerț electronic sau unui sistem de gestionare a conținutului (CMS).

• Adaptabilitate și receptivitate: În continuare. js oferă site-uri web și aplicații ajustabile în funcție de dimensiunea ecranului dispozitivului)
• Timp scurt de încărcare a paginii și experiență unică pe site.
• Securitatea datelor: paginile web statice create cu NextJS nu au acces direct la baza de date, dependențe, datele utilizatorului sau alte informații sensibile. Acest lucru asigură siguranța datelor.
• Timp mai rapid de introducere pe piață: NextJS este o metodă excelentă de a crea un MVP cât mai rapid posibil, datorită mai multor componente predefinite. Această metodă de dezvoltare vă permite să colectați rapid feedback și să faceți modificări produsului fără a pierde timp sau bani.
• Complet omnicanal: site-urile web și aplicațiile bazate pe NextJS funcționează pe orice dispozitiv, permițându-vă să vă oferiți produsele și serviciile pe mai multe canale.
• Vizitatorii și clienții vor fi mulțumiți de performanța site-urilor web și a aplicațiilor web NextJS, deoarece site-urile web statice sunt rapide prin natura lor.
• Suport la cerere: pe măsură ce React și NextJS devin tot mai populare, la fel crește și numărul de dezvoltatori. Ca rezultat, va fi simplu să identifici o agenție sau un freelancer pentru a face orice revizuiri necesare.

Pentru marketeri

În contextul beneficiilor pe care marketerii le dobândesc de la Next.js. Unele avantaje proeminente sunt creșterea ratei de conversie, eficiența SEO și traficul organic.

• Cifre mai mari de conversii și vânzări: agenții de marketing beneficiază de NextJS, deoarece site-urile web și aplicațiile online sunt rapid, ușor și ușor de scanat, toate acestea contribuind la îmbunătățirea clasamentului Google. Pe măsură ce clasamentul Google crește, traficul organic crește, rezultând rate de conversie și vânzări crescute.
• Experiență unică de utilizator: acest avantaj este mai vizibil în industria comerțului electronic, unde magazinele online în care companiile folosesc NFT.js pentru a crea diferențiere și susținere pe o piață globală extrem de competitivă.

Pentru Dezvoltatori

Dezvoltatorii sunt incredibil de zeloși în ceea ce privește componentele React reutilizabile, care reduc costurile și timpul de dezvoltare.

• Analizor CSS: fișierele CSS pot fi importate dintr-un fișier JavaScript de către dezvoltatori. Noile pareri au îmbunătățit gestionarea CSS și au evidențiat probleme nerecunoscute anterior.
• Reîmprospătare rapidă: editări ușor vizibile efectuate asupra componentelor React.
• Componentă imagine încorporată și optimizare automată a imaginii: această caracteristică optimizează fotografiile pentru dvs. în mod automat. Acum acceptă imagini AVIF, care sunt cu 20 la sută mai mici decât imaginile WebP.
• Sprijin comunității: numărul de colaboratori la NextJS se extinde odată cu popularitatea sa. În loc să înceapă de la zero, dezvoltatorii pot folosi acest lucru pentru a găsi soluții probabile deja existente.
• Hibrid de randare SSR pe partea de server și SSG de generare a site-ului static: Permite utilizatorului să preradă paginile la momentul solicitării sau să construiască timpul într-un singur proiect.
• Regenerare statică incrementală: le permite dezvoltatorilor web să actualizeze site-urile existente în fundal pe măsură ce traficul intră prin re-rendarea lor. Conținutul static poate deveni dinamic în acest fel.
• Suport TypeScript: configurare și compilare automată TypeScript.
• Zero Config: NextJS se ocupă de compilare și grupare pentru dvs. Cu alte cuvinte, este construit de la zero pentru a fi productiv.
• Preluarea datelor: în funcție de cazul de utilizare al aplicației, sunt utilizate mai multe abordări de redare a conținutului. Aceasta cuprinde atât randarea pe partea serverului, cât și crearea site-ului static pentru pre-randare, cât și regenerarea statică incrementală pentru actualizarea sau producerea de conținut în timpul execuției.
• Rute API: Ca funcție fără server Node.js, este simplu să creați un punct final API.
• Divizarea codului: împărțiți codul și difuzați componente numai atunci când sunt necesare pentru a reduce dimensiunea primei sarcini utile a aplicației.
• Compilatorul bazat pe Rust SWC: SWC, un compilator bazat pe Rust, convertește și minimizează codul JavaScript pentru producție. Următorul. js dispune de un nou compilator Rust, care a optimizat gruparea și construirea, rezultând reîmprospătări locale de trei ori mai rapide și versiuni de producție de 5 ori mai rapide.
• Middleware: permite utilizatorului să ruleze cod înainte ca o solicitare să fie finalizată, permițându-i utilizatorului să folosească cod peste configurație. Utilizatorii pot modifica răspunsurile la solicitare și pot redirecționa utilizatorii de la o rută la alta.

Dezavantajele NextJS

Deși NextJS evoluează rapid și adaugă noi funcții, are totuși anumite dezavantaje și preocupări, care sunt enumerate mai jos:

• Costul flexibilității: Next JS are puține pagini frontale încorporate, ceea ce obligă dezvoltatorul să construiască întregul strat frontal de la zero.
• Dezvoltare și management: dacă utilizatorul dorește să folosească NextJS pentru a înființa un magazin online, dar nu are o echipă de dezvoltare internă, atunci utilizatorul va avea nevoie de o persoană angajată care să supravegheze dezvoltarea și managementul.
• Lipsa unui manager de stat încorporat: Dacă are nevoie de Redux, MobX sau ceva similar, utilizatorul va avea nevoie de un manager de stat.
• Numărul redus de plugin-uri: în comparație cu alți omologi precum Gatsby.js, utilizatorul nu poate utiliza atât de multe plugin-uri ușor de adaptat.

Este Next.js mai bun decât Gatsby?

Gatsby combină cele mai bune părți ale React, GraphQL și react-router pentru a crea un generator de site static prietenos pentru dezvoltatori. Gatsby generează fișiere HTML statice care se pot încărca dintr-un CDN. Când aplicațiile Gatsby devin prea mari sau preiau volume enorme de date, se știe că provoacă probleme și întârzierea versiunilor. Next.js este ideal dacă aplicația are mai mult de 100.000 de pagini sau va trebui să preia volume enorme de date (cum ar fi un magazin cu multe produse cu variante).

Ambele sunt opțiuni potrivite pentru randarea pe server, dar în două opțiuni diferite. Rezultatul folosind Gatsby este un generator de site static fără un server dacă utilizatorul își propune să construiască site-ul. Acum este necesar să implementați dezvoltarea procesului de construire static pe Netlify sau pe un alt site de găzduire static. Next.js oferă un backend care poate oferi un răspuns la o solicitare pe partea serverului, permițând utilizatorilor să dezvolte site-uri web dinamice pe platforme care acceptă Node.js. Next.js poate genera și un site static, dar nu am spune că este cazul său de utilizare principal.

Dacă scopul este de a crea un site static, cineva poate întâmpina dificultăți de decizie, iar Gatsby poate avea un ecosistem superior de pluginuri, inclusiv multe pentru blogging.

Gatsby se bazează, de asemenea, în mare măsură pe GraphQL, care poate îndeplini nevoile în funcție de opțiunile și cerințele utilizatorului.

Cum se instalează Node.js pe Windows?

Pentru a instala Next.js, trebuie să instalați Node.js.

Descărcați Windows Installer de pe site-ul web oficial al nodejs.

Sau iată metoda alternativă de a instala Node.Js

Folosind Winget

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

Folosind Chocolatey

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

Folosind Scoop

 scoop install nodejs

Pentru a vă asigura că Node.Js este instalat corect, executați această comandă

 C:\Users\Admin> node -v

Folosind create-next-app

O altă modalitate de a începe cu Nex.js este cu create-next-app . Este un instrument CLI care vă va ajuta să construiți o aplicație Nex.js. Pentru a utiliza acest lucru, trebuie să instalați pachetul npx_command și acest lucru vă va ajuta să executați comenzi Javascript. Utilizați una dintre următoarele comenzi pentru a începe.

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

Comanda necesită numele aplicației și creează un nou folder cu acel nume, apoi descarcă toate pachetele necesare ( react , react-dom , next ), setează package.json la:

Puteți rula aplicația exemplu cu npm run dev

Veți obține un rezultat ca acest http: // localhost:3000:

Pași pentru a instala și rula aplicația Next.js

Pasul 1: Puteți obține node.js de aici. Rulați aceste comenzi în terminal pentru a confirma instalarea.

 node -v npm -v

Pasul 2: Acum, creați un folder pentru proiectul dvs., navigați la el cu editorul de cod și rulați următoarea comandă pe terminal.

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

adăugați următorul script în fișierul package.json

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

Pasul 3: Adăugați un fișier index.js în folderul paginii și adăugați următorul cod în interiorul acestuia

 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> ) } }

Pasul 4: Porniți aplicația cu npm start.

Ieșire

Cum se adaugă TypeScript la 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

Cum să adăugați Pagini și Rute în aplicația dvs. next.js

Pentru a adăuga o pagină despre aplicația dvs., plasați componenta în /pages/about.js sau .tsx pentru TypeScript.

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

Legături și navigare

Next framework are și o componentă Link de la next/link .

Dacă doriți să faceți un link către pagina de pornire (/) și un traseu de blog (adică /blog/emizen), am include următoarele în /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 este un suport necesar pentru componenta Link și datele pot fi transmise acesteia și ca obiect:

 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 în Next.js

În Următorul, puteți utiliza componenta Head din next/head pentru a adăuga metadate la paginile web:

 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> ); }

Rute API

Nextjs permite crearea de aplicații React full-stack prin scrierea codului serverului printr-o funcție numită rute API.
Pentru a vă crea propriul API care este executat ca funcții separate fără server, creați un folder numit „api” în /pages.

Dacă doriți să obțineți date de la /api/about pentru pagina despre, includeți o pagină numită about.js în /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" }); }

Solicitați date din partea clientului

Pentru a solicita date de la rutele noastre API, abordarea convențională ar fi să le solicitați folosind 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> ); }

Solicitați pe partea serverului de date

Aceste două funcții ne ajută să obținem date de pe server.

 getServerSideProps #or getStaticProps

Funcțiile sunt în același fișier ca și componentele React, iar codul pentru ele este inclus separat de clientul React.

GetServerSideProps

Fiecare vizită de pagină declanșează execuția getServerSideProps . Drept urmare, este extrem de util pe paginile care conțin date dinamice sau necesită ca solicitări să fie efectuate de fiecare dată, cum ar fi preluarea datelor autentificate de utilizator.

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

Această funcție permite trimiterea datelor de pe server și injectarea acestora în elementele de recuzită ale componentei paginii.

Acesta permite clientului React să afișeze datele imediat, fără întârziere și fără a fi nevoit să se ocupe de nicio stare de încărcare sau eroare.

Dacă doriți să preluați date de pe server, puteți utiliza getServerSideProps async cu cuvântul cheie 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 }, }; }

Preluăm în mod dinamic date din API-ul XYZ, iar datele se modifică cu fiecare reîmprospătare a paginii.

GetStaticProps

Funcția getStaticProps este mai bună pentru paginile statice care se modifică rar. Această funcție rulează codul serverului și trimite o cerere GET către server, dar o singură dată când proiectul este finalizat.

Când aplicația este rulată în dezvoltare, solicită date de fiecare dată când reîmprospătează pagina, similar cu getServerSideProps.

În timpul dezvoltării, getStaticProps face cereri numai la fiecare vizită de pagină.

Dacă rulați yarn build și apoi rulați versiunea de producție sau proiectul dvs. React cu yarn start , veți obține același nume care a fost solicitat atunci când proiectul a fost construit, nu în timpul execuției.

getServerSideProps și getStaticProps pot face numai cereri GET. Rutele API pot gestiona orice tip de solicitare de citire și actualizare a datelor (adică atunci când sunt combinate cu un strat de date precum o bază de date)

Next.js Exemple

Puteți găsi mai multe exemple Next.js aici

Top Next șabloane JS

Tabloul de bord material

NextJS Material este un tablou de bord Material-UI React cu sursă deschisă, inspirat de Material Design de la Google. Principiile materiale sunt un set de componente simple și elegante. Cadrele populare Material-UI, NextJS și React au fost folosite pentru a crea tabloul de bord NextJS Material.

Kit de materiale

NextJS Material Kit este un kit gratuit de design de materiale creat pentru NextJS, React și Material-UI. NextJS Material Kit conține peste 100 de elemente frontale individuale care permit utilizatorului să se amestece și să se potrivească. Sunt posibile variații de culoare pentru toate componentele, pe care utilizatorul le poate schimba cu ușurință cu fișierele și clasele SASS și JSS (în cadrul fișierelor JS).

argon

NextJS Argon Dashboard cuprinde peste 100 de componente distincte pe care utilizatorul le poate combina și potrivește după cum crede de cuviință. Prin modificarea fișierelor SAAS incluse în proiect, utilizatorul poate personaliza cu ușurință acest tablou de bord React cu sursă deschisă.

Nu noi

Componentele cu cod complet Notus NextJS cuprind peste 100 de componente distincte pe care utilizatorul le poate amesteca și potrivi în funcție de nevoi. Toate componentele pot avea variații de culoare, pe care le puteți schimba cu ușurință cu clasele CSS Tailwind.

Unde poți învăța Next.js?

• Puteți verifica site-ul oficial pentru a afla Next.js
• O altă opțiune este React Bootcamp
• Next.js pe Udemy

și există multe mai multe resurse online care vă vor ajuta să stăpâniți Next.js

Concluzie

Nu contează dacă veți construi un software robust și complex, care va deservi milioane de oameni sau dacă vă extindeți rapid într-un magazin web. În ambele cazuri, puteți folosi avantajele tehnologiei web moderne precum Next.js pentru a vă eficientiza afacerea online. SEO și UX Next.js vă vor ajuta să faceți internetul un loc mai bun, mai curat și mai centrat pe utilizator pentru a vă îmbunătăți viteza paginii. Paginile generate static sunt încă receptive: Next.js vă va hidrata aplicația pe partea clientului, permițându-i să fie complet interactiv.

Căutați un dezvoltator Next.js sau full stack talentat? Vă oferim spatele! Vă oferim toate instrumentele și expertiza de care aveți nevoie pentru a începe să vă planificați și să executați proiectul Next.js chiar acum.

Întrebări frecvente despre Next.Js