Taula de continguts[Amaga][Espectacle]
En triar una biblioteca o un marc de programari, normalment es té en compte l'experiència del desenvolupador.
Quan esmento "experiència del desenvolupador", em refereixo a com els desenvolupadors fan la feina. Els desenvolupadors trien biblioteques o marcs que siguin agradables d'utilitzar.
Aquesta és una de les raons principals per les quals ara tenim les biblioteques i marcs més populars. Com a desenvolupadors, no hem de començar de zero quan hi ha eines creades per ajudar-nos amb les nostres tasques.
Els frameworks són peces de programari que els desenvolupadors creen i utilitzen per construir aplicacions, i NextJS és un d'ells.
En aquesta publicació, repassarem Nextjs, les seves característiques clau i com podem utilitzar-lo per crear una aplicació. Saltem directament.
Què és Next.js?
Next.js és un marc de JavaScript per construir de manera ràpida i senzilla pàgines web estàtiques i aplicacions en línia basades en React. Us permet dissenyar aplicacions web excel·lents per a diverses plataformes, com ara Windows, Linux i Mac.
Hauríeu d'estar familiaritzat amb el marc Next.js si teniu una familiaritat mínima amb react i voleu obtenir més informació sobre l'ecosistema de react.
Tot i que Next.js inclou tot el que necessiteu per començar, podeu seleccionar entre NPM i Yarn, JavaScript i TypeScript, CSS i SCSS, exportació estàtica i desplegament sense servidor.
Característiques
- L'encaminament es fa automàticament: no cal que configureu res perquè qualsevol URL s'assigna al sistema de fitxers, als fitxers de la carpeta de pàgines (teniu opcions de personalització, és clar).
- Components d'un únic fitxer: és senzill afegir estils amb abast al component mitjançant styled-jsx, que està totalment integrat i produït pel mateix equip.
- Tornar a carregar un codi ràpid: quan Next.js detecta una modificació desada al disc, torna a carregar la pàgina.
- Components dinàmics: podeu carregar dinàmicament mòduls JavaScript i components React.
- Exportacions estàtiques: Next.js us permet exportar un lloc completament estàtic des de la vostra aplicació amb la següent comanda d'exportació.
- Compatibilitat amb l'entorn: Next.js s'integra perfectament amb els ecosistemes JavaScript, Node i React.
- Divisió de codis automàticament: només s'utilitzen les biblioteques i JavaScript que es requereixen per representar les pàgines. En lloc de crear un únic fitxer JavaScript que contingui tot el codi de l'aplicació, Next.js divideix l'aplicació de manera intel·ligent en molts recursos.
Com es crea una aplicació next.js?
instal·lació
Podeu utilitzar l'ordre node npx per instal·lar i crear un projecte Next.js.
Això generarà una carpeta i tots els fitxers, configuracions i altres elements necessaris per executar un projecte Next.js.
Podeu iniciar l'aplicació un cop s'hagi generat.
Pàgines i encaminament
Per gestionar rutes amb Next.js, no cal que utilitzem un marc d'encaminament. L'encaminament amb Next.js és fàcil de configurar. Quan utilitzeu l'ordre create-next-app per crear una nova aplicació Next.js, l'aplicació crea una carpeta anomenada "pàgines" per defecte.
Aquesta carpeta "pàgines" és on manteniu les vostres rutes. Com a resultat, cada fitxer de components reacts al subdirectori es gestionarà com una ruta independent.
Per exemple, si la carpeta conté aquests fitxers:
- index.js
- sobre.js
- aricles.js
Aquest fitxer es transformarà automàticament de tres maneres:
- La pàgina d'índex localhost/index
- La pàgina sobre localhost/sobre
- La pàgina del bloc localhost/articles
A continuació es mostra un exemple de pàgina about.js. No es proporciona res sobre la pàgina, com podeu veure. És simplement un component funcional estàndard de React.
rutes
Per fer rutes imbricades, primer heu d'establir una subcarpeta. Per exemple: pàgines/articles. Creeu el vostre component de reacció "contact.js" dins d'aquesta carpeta i generarà la pàgina localhost/articles/contact.
Si poseu un fitxer a pages/articles.js i un altre a pages/articles/index.js. Tots dos reflecteixen el mateix camí localhost/blog. En aquesta situació, Next.js només representarà el fitxer article.js. Què passa amb les rutes dinàmiques, en què cada entrada del blog té el seu propi camí:
- localhost/blog/primer-article
- localhost/blog/-segon-article
Amb la notació de claudàtors, podeu definir una ruta dinàmica a Next.js. Per exemple: pages/article/[slug].js
Enllaç de rutes
Ara heu completat la vostra primera ruta. Suposo que esteu preguntant com connectar pàgines amb aquestes rutes. Necessitareu "següent/enllaç" per fer-ho.
Aquí teniu un exemple de pàgina d'inici que inclou un enllaç a la pàgina Sobre:
Si voleu estilitzar l'enllaç, utilitzeu la sintaxi següent:
Redirecció de rutes
Què passa si necessiteu forçar una redirecció a una pàgina determinada? Per exemple, quan es prem un botó? Podeu aconseguir-ho fent servir "router.push":
SEO
Les pàgines de les aplicacions web requereixen elements meta (capçalera) a més de les dades del cos HTML. Això requerirà la instal·lació d'un requisit addicional anomenat React Helmet en una aplicació React.
Podem utilitzar el component Head de next/head a Next per afegir fàcilment metadades a les nostres pàgines web que es mostraran als resultats de la cerca i incrustacions:
components
Sovint haureu de desenvolupar components o un fitxer de disseny. Per exemple, un component que representa la barra de navegació. Fins ara només hem utilitzat la carpeta de pàgines. Què passa si el vostre component no ha de ser una pàgina de ruta?
No voleu que l'usuari navegui a una pàgina com ara un localhost/navbar. Si col·loqueu el component Navbar.js a la carpeta de pàgines, això és el que passarà. Què has de fer davant la situació?
Simplement emmagatzemeu tots els vostres components "no és una pàgina" en una carpeta separada. La majoria dels projectes Next.js utilitzen el sobrenom "components" i aquesta carpeta es genera a la carpeta arrel del vostre projecte.
Component del cap
Next.js representa la càrrega inicial de la pàgina al costat del servidor. Ho fa modificant l'HTML de la vostra pàgina. S'inclou la secció de capçalera.
El component Next.js Head s'utilitza per donar etiquetes de secció de capçalera com ara títol i meta. El component Cap s'utilitza en aquest exemple de component Layout.
No s'ha trobat la pàgina Crea 404
És factible crear la vostra pròpia pàgina d'error 404. És possible que vulgueu personalitzar el missatge o afegir el vostre propi disseny de pàgina. A la carpeta de pàgines, creeu el fitxer 404.js.
Quan es produeix un error 404, Next.js redirigirà automàticament a aquesta pàgina. Aquí teniu un exemple de pàgina 404 personalitzada:
Obtenció de dades del costat del servidor
En lloc de descarregar dades al costat del client, Next.js us permet realitzar una població inicial de dades, la qual cosa implica enviar la pàgina amb les dades ja emplenats des del servidor.
Teniu dues opcions per implementar l'obtenció de dades del costat del servidor:
- Les dades s'han d'obtenir a cada sol·licitud.
- Obteniu dades només una vegada durant el procés de construcció (lloc estàtic)
Obteniu dades de cada sol·licitud
El mètode getServerSideProps s'utilitza per representar cada sol·licitud al costat del servidor. Aquesta funció es pot incloure al final del fitxer de components. Next.js omplirà automàticament els accessoris dels vostres components amb l'objecte getServerSideProps si aquesta funció està present al fitxer de components.
Obteniu dades en temps de creació
El mètode getStaticProps s'utilitza per representar el costat del servidor en temps de compilació. Aquesta funció es pot incloure al final del fitxer de components. Aquest mètode executa el codi del servidor i envia una sol·licitud GET al servidor, però només una vegada quan el nostre projecte ha acabat.
Per què hauríeu d'aprendre Next.js?
Una de les raons d'això és perquè Next.js està construït sobre React, un conjunt d'eines de desenvolupament frontal per a creació d'interfícies d'usuari que són la meva opció preferida per dissenyar aplicacions web.
Però no n'hi hauria prou si Next.js no fos bo en el que va fer... oi?
Aleshores, què fa exactament?
Primer hem de definir alguns conceptes per entendre-ho. Next.js va guanyar popularitat perquè va resoldre un problema que tenien molts desenvolupadors web amb les aplicacions web del client (al navegador). Aquestes aplicacions d'una sola pàgina (SPA) van tenir una millor experiència, ja que no necessitaven que l'usuari tornés a carregar la pàgina i permetien més interactivitat.
Tanmateix, com que la major part del material d'una aplicació com aquesta només es fa visible quan es realitza al navegador, els rastrejadors web tenen dificultats per entendre el contingut de text d'aquesta aplicació.
Com a resultat, malgrat la seva popularitat, molts SPA es van mantenir en gran part anònims per als grans motors de cerca com Google. Next.js ara inclou un mecanisme integrat més robust per a la representació del costat del servidor (SSR) dels components de React.
Next.js permet als desenvolupadors construir codi JavaScript al servidor durant el procés de creació i proporcionar HTML bàsic i indexable a l'usuari.
pros
- Genial per a l'experiència d'usuari
- Genial per a SEO
- Creeu un lloc web estàtic súper ràpid que es comporti com un dinàmic
- Flexibilitat en la creació d'IU i UX.
- Molts avantatges de desenvolupament
- Gran suport comunitari
Contres
- Els llocs web o les aplicacions tenen una certa quantitat de temps per construir o desenvolupar.
- Per a determinades tasques, Next.js és inadequat. Els desenvolupadors haurien de poder construir rutes dinàmiques mitjançant les eines Node.js.
Conclusió
Com podeu veure, Next.js simplifica el desenvolupament d'aplicacions React i us permet centrar-vos en allò que més importa: la lògica de l'aplicació i la interfície d'usuari. Inclou tot el necessari per crear aplicacions contemporànies, riques en interfície i amb API.
També és adequat per a projectes només de contingut, com ara blocs i llocs web empresarials, a causa de la seva capacitat per crear pàgines HTML estàtiques.
Amb les edicions actuals, Next.js no només manté un alt nivell d'experiència de desenvolupador, sinó que també ofereix eines per augmentar el rendiment visual i l'experiència de l'usuari, assegurant un futur brillant per a aquest marc.
Deixa un comentari