Índice analítico[Ocultar][Mostrar]
Ao escoller unha biblioteca ou marco de software, adoitase ter en conta a experiencia do programador.
Cando menciono a "experiencia do programador", refírome a como os desenvolvedores realmente fan o traballo. Os desenvolvedores elixen bibliotecas ou frameworks que sexan agradables de usar.
Esta é unha das razóns principais polas que agora temos as bibliotecas e os frameworks máis populares. Como desenvolvedores, non temos que comezar de cero cando existen ferramentas creadas para axudarnos coas nosas tarefas.
Os frameworks son pezas de software que os desenvolvedores crean e usan para construír aplicacións, e NextJS é un deles.
Nesta publicación, repasaremos Nextjs, as súas principais características e como podemos usalo para crear unha aplicación. Imos entrar directamente.
Que é Next.js?
Seguinte.js é un marco de JavaScript para construír de forma rápida e sinxela páxinas web estáticas e aplicacións en liña baseadas en React. Permítelle deseñar excelentes aplicacións web para unha variedade de plataformas, incluíndo Windows, Linux e Mac.
Deberías estar familiarizado co framework Next.js se tes unha familiaridade mínima con react e queres aprender máis sobre o ecosistema react.
Aínda que Next.js inclúe todo o que necesitas para comezar, podes seleccionar entre NPM e Yarn, JavaScript e TypeScript, CSS e SCSS, exportación estática e implementación sen servidor.
características
- O enrutamento realízase automaticamente: non precisa configurar nada porque calquera URL está asignado ao sistema de ficheiros, aos ficheiros do cartafol das páxinas (tedes opcións de personalización, por suposto).
- Compoñentes dun único ficheiro: é sinxelo engadir estilos con alcance ao compoñente usando styled-jsx, que está totalmente integrado e producido polo mesmo equipo.
- Volver cargar un código quente: cando Next.js detecta unha modificación gardada no disco, recarga a páxina.
- Compoñentes dinámicos: pode cargar dinámicamente módulos JavaScript e compoñentes de React.
- Exportacións estáticas: Next.js permítelle exportar un sitio completamente estático desde a súa aplicación co seguinte comando de exportación.
- Compatibilidade co medio: Next.js intégrase perfectamente cos ecosistemas JavaScript, Node e React.
- Dividir códigos automaticamente: só se usan as bibliotecas e JavaScript necesarios para renderizar páxinas. En lugar de crear un único ficheiro JavaScript que contén todo o código da aplicación, Next.js divide a aplicación de xeito intelixente en moitos recursos.
Como crear unha aplicación next.js?
instalación
Podes usar o comando node npx para instalar e construír un proxecto Next.js.
Isto xerará un cartafol e todos os ficheiros, configuracións e outros elementos necesarios para executar un proxecto Next.js.
Podes iniciar a aplicación unha vez que se xerou.
Páxinas e enrutamento
Para xestionar rutas con Next.js, non necesitamos empregar un marco de enrutamento. O enrutamento con Next.js é moi sinxelo de configurar. Cando usas o comando create-next-app para crear unha nova aplicación Next.js, a aplicación crea un cartafol chamado "pages" por defecto.
Este cartafol "páxinas" é onde mantés as túas rutas. Como resultado, cada ficheiro de compoñentes reacts no subdirectorio tratarase como unha ruta separada.
Por exemplo, se o cartafol contén eses ficheiros:
- índice.js
- sobre.js
- aricles.js
Este ficheiro transformarase automaticamente de tres xeitos:
- A páxina de índice localhost/index
- A páxina sobre localhost/about
- A páxina do blog localhost/articles
A continuación móstrase un exemplo dunha páxina about.js. Non se proporciona nada sobre a páxina, como podes ver. É simplemente un compoñente funcional estándar de React.
rutas
Para facer rutas aniñadas, primeiro debes establecer un subcartafol. Por exemplo: páxinas/artigos. Crea o teu compoñente de reacción "contact.js" dentro dese cartafol e xerará a páxina localhost/articles/contact.
Se pon un ficheiro en pages/articles.js e outro en pages/articles/index.js. Ambos reflicten o mesmo camiño localhost/blog. Nesta situación, Next.js só renderizará o ficheiro article.js. Que dicir das rutas dinámicas, nas que cada entrada do blog ten o seu propio camiño:
- localhost/blog/primeiro-artigo
- localhost/blog/-segundo artigo
Usando a notación de corchetes, pode definir unha ruta dinámica en Next.js. Por exemplo: pages/article/[slug].js
Link Routes
Agora completaches a túa primeira ruta. Supoño que estás a preguntar como conectar páxinas con esas rutas. Necesitarás "seguinte/link" para facelo.
Aquí tes un exemplo de páxina de inicio que inclúe unha ligazón á páxina Acerca de:
Se desexa modificar o estilo da ligazón, use a seguinte sintaxe:
Rutas de redirección
E se precisas forzar un redireccionamento a unha determinada páxina? Por exemplo, cando se preme un botón? Podes facelo usando 'router.push':
SEO
As páxinas das aplicacións web requiren elementos meta (cabeza) ademais dos datos do corpo HTML. Isto precisará a instalación dun requisito adicional chamado React Helmet nunha aplicación React.
Podemos usar o compoñente Head de next/head en Next para engadir facilmente metadatos ás nosas páxinas web que se mostrarán nos resultados de busca e incrustacións:
Compoñentes
Con frecuencia necesitará desenvolver compoñentes ou un ficheiro de deseño. Por exemplo, un compoñente que representa a barra de navegación. Acabamos de usar o cartafol de páxinas ata agora. E se o teu compoñente non está destinado a ser unha páxina de ruta?
Non queres que o usuario navegue a unha páxina como un localhost/navbar. Se colocas o compoñente Navbar.js no cartafol das páxinas, iso ocorrerá. Que debes facer na situación?
Só ten que gardar todos os seus compoñentes de "non é unha páxina" nun cartafol separado. A maioría dos proxectos Next.js usan o nome de "compoñentes" e este cartafol xérase no cartafol raíz do teu proxecto.
Compoñente da cabeza
Next.js representa a carga inicial da páxina no servidor. Faino modificando o HTML da túa páxina. Inclúese a sección de cabeceira.
O compoñente Next.js Head úsase para dar etiquetas de sección de cabeceira como título e meta. O compoñente Head úsase neste exemplo de compoñente de deseño.
Non se atopou a páxina de creación 404
É posible crear a túa propia páxina de erro 404. Quizais queiras personalizar a mensaxe ou engadir o teu propio deseño de páxina. No cartafol das páxinas, cree o ficheiro 404.js.
Cando se produce un erro 404, Next.js redirixirá automaticamente a esta páxina. Aquí tes un exemplo dunha páxina 404 personalizada:
Recuperación de datos do lado do servidor
En lugar de descargar datos no lado do cliente, Next.js permítelle realizar unha poboación inicial de datos, o que implica enviar a páxina cos datos xa poboados desde o servidor.
Ten dúas opcións para implementar a obtención de datos do servidor:
- Os datos deben ser recuperados en cada solicitude.
- Obtén datos só unha vez durante o proceso de construción (sitio estático)
Obter datos de cada solicitude
O método getServerSideProps úsase para renderizar cada solicitude no lado do servidor. Esta función pódese incluír ao final do ficheiro de compoñente. Next.js encherá automaticamente os complementos dos compoñentes co obxecto getServerSideProps se esa función está presente no ficheiro de compoñentes.
Obter datos en tempo de compilación
O método getStaticProps úsase para renderizar o lado do servidor no momento da compilación. Esta función pódese incluír ao final do ficheiro de compoñente. Este método executa o código do servidor e envía unha solicitude GET ao servidor, pero só unha vez cando remate o noso proxecto.
Por que deberías aprender Next.js?
Unha das razóns para isto é porque Next.js está construído sobre React, un conxunto de ferramentas de desenvolvemento front-end para creación de interfaces de usuario que son a miña opción favorita para deseñar aplicacións web.
Pero non sería suficiente se Next.js non fose bo no que fixo... non?
Entón, que fai exactamente?
Primeiro debemos definir algúns conceptos para comprendelo. Next.js gañou popularidade porque resolveu un problema que moitos desenvolvedores web tiñan coas aplicacións web do cliente (no navegador). Estas aplicacións dunha soa páxina (SPA) tiveron unha mellor experiencia xa que non precisaban que o usuario recargase a páxina e permitían unha maior interactividade.
Non obstante, como a maior parte do material dunha aplicación como esta só se fai visible cando se realiza no navegador, os rastrexadores web teñen dificultades para comprender o contido do texto desta aplicación.
Como resultado, a pesar da súa popularidade, moitos SPA permaneceron en gran parte anónimos para os grandes buscadores como Google. Next.js agora inclúe un mecanismo integrado máis robusto para a representación no servidor (SSR) dos compoñentes de React.
Next.js permite aos desenvolvedores construír código JavaScript no servidor durante o proceso de compilación e proporcionar HTML básico e indexable ao usuario.
Pros
- Ideal para a experiencia do usuario
- Ideal para SEO
- Crea un sitio web estático súper rápido que se comporte como un dinámico
- Flexibilidade na creación de UI e UX.
- Moitas vantaxes de desenvolvemento
- Gran apoio comunitario
Contra
- Os sitios web ou as aplicacións teñen un tempo determinado para construír ou desenvolver.
- Para certas tarefas, Next.js é inadecuado. Os desenvolvedores deberían poder construír rutas dinámicas usando as ferramentas Node.js.
Conclusión
Como podes ver, Next.js simplifica o desenvolvemento da aplicación React e permíteche centrarte no que máis importa: a lóxica e a interface de usuario da túa aplicación. Inclúe todo o necesario para crear aplicacións contemporáneas, ricas en frontend e con API.
Tamén é apropiado para proxectos de só contido, como blogs e sitios web empresariais, debido á súa capacidade para construír páxinas HTML estáticas.
Coas edicións actuais, Next.js non só mantén un alto nivel de experiencia para desenvolvedores, senón que tamén ofrece ferramentas para aumentar o rendemento visual e a experiencia do usuario, garantindo un futuro brillante para este marco.
Deixe unha resposta