Next.js er en React-ramme til gengivelse på serversiden, som dets skabere præsenterer som en nulkonfigurationsværktøjskæde til enkeltkommando til React-applikationer.
Denne ramme giver en fælles struktur, der giver dig mulighed for nemt at oprette en React front-end-applikation og administrerer transparent gengivelse på serversiden. Next.js version 9.3 blev frigivet på mandag med nye funktioner og nogle forbedringer, hvoraf vi vil være i stand til at finde muligheden for at generere statiske websteder som den vigtigste nyhed.
Hvad er nyt i Next.js 9.3?
Med udgivelsen af Next.js 9.0, rammen introducerede begrebet statisk automatisk optimering. Når a siden har ingen blokeringskrav datagendannelse som getInitialProps, gengives automatisk i HTML når den er bygget.
Der er andre tilfælde, hvor du måske vil oprette en side i statisk HTML på kompileringstidspunktet, selv med blokerende krav til dataudvinding. Dette er for eksempel tilfældet med marketing-sider drevet af et content management system (CMS).
Next.js 9.3 introducerer to nye datagendannelsesmetoder: getStaticProps og getServerSideProps.
Disse nye metoder har mange fordele i forhold til getInitialProps-modellenDa der er en klar skelnen mellem hvad der bliver SSG (Static Side Generation) og SSR (Server Side Rendering). De er API-tilføjelser.
Alle nye funktioner er bagudkompatible og de kan adopteres gradvist. Der er ingen afskrivninger, og getInitialProps fungerer fortsat normalt. En getStaticPaths-parameter er tilføjet for at opnå dynamisk routing.
- getStaticProps: tillader indhentning af data under konstruktion;
- getStaticPaths - Angiv databaseret dynamisk routing;
- getServerSideProps: giver dig mulighed for at hente data for hver anmodning.
En anden ændring, der skiller sig ud fra denne nye version, er understøttelsen af preview-tilstanden. Introduktion til getStaticProps i Next.js åbner nye muligheder, såsom at bruge Next.js-gengivelsesfunktioner efter behov under visse betingelser.
Fx når du får vist et kladde I et CMS vil du springe over den statiske gengivelse og gengive side efter behov med kladdeindhold i stedet for det offentliggjorte indhold. Du vil have, at Next.js kun skal springe statisk build over i dette specifikke tilfælde. Ifølge Next.js-teamet giver preview-tilstanden dig mulighed for at gøre dette.
Tilstanden af preview giver brugerne mulighed for at springe den genererede side over statisk for at returnere på anmodning (SSR) et kladdeside, for eksempel fra et CMS. Det er dog ikke begrænset til visse CMS-systemer. Preview-tilstand integreres direkte med getStaticProps og getServerSideProps, så den kan bruges med enhver form for datagendannelsesløsning.
Next.js 9.2 tilføjede understøttelse af indbygget CSS, men Next.js 9.3 tilføjede understøttelse af Sass. Globale typografiark og CSS-moduler understøttes såvel som indlejrede CSS. Next.js understøtter nu CSS-moduler med Sass-filer ved hjælp af [navn] .module.scss filnavngivningskonvention. I modsætning til den tidligere tilgængelige support i Next.js 5+ med next-sass kan de globale Sass- og CSS-moduler nu eksistere sammen.
Moduler CSS giver dig mulighed for at administrere Sass lokalt ved automatisk at oprette unikke klassenavne.
Med version 9.0 fra Next.js, der var en side, der ikke blev gengivet automatisk i HTML statisk: 404 side.
Hovedårsagen bag dette er, at fejlsiden, der fodrer 404, blev håndteret mere end 404. For eksempel håndterede den også fejl. Da 404 sider gengives til ikke-eksisterende stier, gengivelse af siden efter behov kan føre til højere omkostninger og højere belastning server. Framework version 9.3 forbedrer tingene og tilbyder automatisk statisk optimering i 404 sider.
Nu når din anmodning ikke inkluderer en error.js tilpasset side, filen Next.js genererer automatisk 404 sider statisk og bruger den, når en 404 skal serveres. Dette sker automatisk, og der kræves ingen ændringer.
Du kan også tilpasse denne side. For at erstatte standard 404-siden kan der oprettes en 404.js-fil.
Hvis du vil vide mere om det, kan du konsultere følgende link.