Next.js és un marc React per a la representació de la banda de servidor, Que els seus creadors el presenten com una cadena d'eines de comandament únic de configuració zero per a aplicacions React.
aquest marc proporciona una estructura comuna que li permet crear fàcilment una aplicació front-end React i gestiona de forma transparent el renderitzat de la banda de servidor. La versió 9.3 de Next.js es va llançar dilluns amb noves característiques i algunes millores, de les quals podrem trobar com a principal novetat la capacitat de poder generar llocs estàtics.
Què hi ha de nou en Next.js 9.3?
Amb el llançament de Next.js 9.0, el marc va introduir el concepte d'optimització automàtica estàtica. quan una pàgina no té requisits de bloqueig de recuperació de dades com getInitialProps, es representarà automàticament en HTML una vegada que s'hagi construït.
Hi ha altres casos en què és possible que vulgueu fer una pàgina en HTML estàtic en el moment de la compilació, fins i tot amb el bloqueig dels requisits d'extracció de dades. Aquest és el cas, per exemple, de pàgines de màrqueting alimentades per un sistema de gestió de continguts (CMS).
Next.js 9.3 presenta dos nous mètodes de recuperació de dades: getStaticProps i getServerSideProps.
Aquests nous mètodes tenen molts avantatges sobre el model getInitialProps, Ja que hi ha una clara distinció entre el que es convertirà en SSG (Static Side Generation) i SSR (Server Side Rendering). Són addicions d'API.
Totes les noves característiques són compatibles amb versions anteriors i es poden adoptar gradualment. No hi ha depreciació i getInitialProps continua funcionant normalment. S'ha afegit un paràmetre getStaticPaths per obtenir el enrutament dinàmic.
- getStaticProps: permet obtenir dades durant la construcció;
- getStaticPaths: permet especificar enrutament dinàmic basat en dades;
- getServerSideProps: permet obtenir dades per a cada sol·licitud.
Un altre canvi que es destaca d'aquesta nova versió és el suport per a la manera de vista prèvia. La introducció de getStaticProps a Next.js obre noves possibilitats, com l'ús de les capacitats de representació de Next.js sota demanda sota certes condicions.
Per exemple, a l'obtenir una vista prèvia d'un esborrany en un CMS, desitjarà ometre la representació estàtica i renderitzar la pàgina a comanda amb el contingut de l'esborrany en lloc de el contingut publicat. Desitja que Next.js ometi la generació estàtica només en aquest cas específic. Segons l'equip de Next.js, la manera de vista prèvia possible fer-ho.
La manera de vista prèvia permet als usuaris ometre la pàgina generada estàticament per tornar a sol·licitud (SSR) un esborrany de pàgina, per exemple, d'un CMS. No obstant això, no està limitat a certs sistemes CMS. La manera de vista prèvia s'integra directament amb getStaticProps i getServerSideProps perquè pugui usar-se amb qualsevol tipus de solució de recuperació de dades.
Next.js 9.2 ha afegit suport per a CSS incorporat, però Next.js 9.3 ha afegit suport per Sass. S'admeten fulls d'estil globals i mòduls CSS, així com CSS incorporat. Next.js ara admet mòduls CSS amb arxius Sass utilitzant la convenció de nomenclatura d'arxius [nom] .module.scss. A diferència d'el suport prèviament disponible a Next.js 5+ amb next-Sass, els mòduls globals Sass i CSS ara poden coexistir.
els mòduls CSS permeten administrar Sass localment creant automàticament noms de classe únics.
Amb la versió 9.0 de Next.js, hi havia una pàgina que no es representava automàticament en HTML estàtic: pàgina 404.
La raó principal darrere d'això és que la pàgina d'error que alimenta el 404 es va manejar més que el 404. Per exemple, també va manejar errors. Atès que les pàgines 404 es representen per rutes inexistents, la representació de la pàgina a comanda podria generar majors costos i una major càrrega de servidor. La versió 9.3 de el marc millora les coses i ofereix una optimització estàtica automàtica per 404 pàgines.
Ara, quan el seu tràmit no inclou una pàgina personalitzada error.js, l'arxiu Next.js genera automàticament la pàgina 404 de forma estàtica i la utilitza quan s'ha de servir una 404. Això succeeix automàticament i no es requereixen canvis.
També pots personalitzar aquesta pàgina. Per reemplaçar la pàgina 404 per defecte, es pot crear un fitxer de pàgines 404.js.
Si vols conèixer més a l'respecte, pots consultar el següent enllaç.