¿Qué es Next.js y por qué y cómo usarlo en 2022?

Trabajar en una aplicación JavaScript moderna con React es magistral hasta que uno detecta algunos problemas con la representación de todo el contenido en el lado del cliente. La representación del servidor, también conocida como representación previa estática, resuelve estos problemas. Next.Js es un marco de React que le permite al usuario realizar todas las cosas de manera sencilla, pero no se limita a eso. Se recomienda como una cadena de herramientas de un solo comando y configuración cero para proyectos React. Se trata principalmente de diseñar aplicaciones web atractivas, altamente dinámicas, interactivas y de alto rendimiento para diferentes plataformas como Mac, Windows y Linux.

Pero, ¿cómo funciona exactamente el marco? Dediquemos un tiempo a explorar qué son Next.js y React y cómo pueden ayudar.

Primero, ¿qué es Next.js?

Next.js es un marco React que permite a los usuarios crear aplicaciones Javascript de una sola página. Este marco tiene varias ventajas tanto para las aplicaciones de los clientes como para el equipo de desarrollo. Como usuarios, uno puede irritarse cada vez más porque los sitios web y las aplicaciones no cumplen con nuestras expectativas y tardan más de milisegundos en cargarse. Next.js está muy extendido y es una buena opción por varias razones; la mayoría están relacionados con la velocidad y el rendimiento.

Características principales:

• Experiencia de usuario enriquecida
• Gran actuación
• Desarrollo de características más rápido

Métodos de representación en Next.js

La representación es una unidad inevitable que permite al usuario convertir el código escrito en React en la representación de la interfaz de usuario HTML. La representación se puede realizar en el cliente y el servidor, y puede ocurrir antes de que se realice una solicitud en el momento de la compilación o después de que se realice cada solicitud en el tiempo de ejecución.

una. Representación del lado del servidor (SSR)

SSR es la capacidad de una aplicación que permite al desarrollador convertir archivos HTML en el servidor en una página de cliente HTML completamente renderizada. La principal ventaja de usar SSR como solución es que permite al desarrollador usar el mismo código para brindar una experiencia de usuario más rápida mientras usa datos personalizados. SSR es capaz de obtener datos y rellenar previamente la página web con contenido personalizado mientras aprovecha la conexión a Internet confiable del servidor. Por ejemplo, si el desarrollador tiene un archivo index.html que debe enviarse al cliente, existe una gran posibilidad de que el desarrollador tenga un tipo de metadatos, muy probablemente los metadatos de la página de inicio. No se contextualizará cuando el desarrollador desee compartir una ruta diferente. Por lo tanto, ninguna de sus rutas se mostrará en otros sitios con información de usuario pertinente (descripción y foto de vista previa) que a los usuarios les gustaría compartir con el mundo.

b. Pre-renderizado

La representación previa funciona como una alternativa atractiva o una solución para servidores obligatorios utilizados para aplicaciones universales que son disuasorias o excesivas para una aplicación pequeña. En otras palabras, la representación previa se refiere a la generación de HTML por adelantado en el servidor en lugar de hacerlo mediante JavaScript en el dispositivo del usuario. Es posible que parte del material de otra página o sitio se muestre previamente cuando el usuario navega por una página web en preparación para la siguiente visita del usuario. Debido a que algunos de los elementos de la página se procesaron antes de tiempo, la nueva página se carga rápidamente.

Por ejemplo, si el navegador lo permite, la primera página web en los resultados de búsqueda de Google siempre se representa previamente. Google asume que se hará clic en el resultado superior y, por lo tanto, solicita que el navegador muestre esa página.

C. Representación diferida (ISR)

En el marco de Next.js, la representación diferida se conoce como regeneración estática incremental (ISR), implementada por primera vez en la versión 9.4. Es similar a la renderización previa; solo la página solicitada no se procesa durante la compilación inicial; se representa cuando un usuario lo solicita. Los usuarios verán la versión prerenderizada de la página hasta que se realice una nueva compilación o hasta que expire un tiempo de espera de caché especificado. ISR tiene como objetivo reducir la cantidad de tiempo que lleva construir un sitio grande al permitir que el desarrollador posponga la creación de páginas con menos tráfico. También puede representar páginas basadas en contenido generado por el usuario caso por caso.

¿Qué se puede construir con Next.Js y cuándo usar Next.Js?

AL usar Next.js, un usuario puede crear numerosos productos e interfaces digitales, como:

• MVP (Producto Mínimo Viable): MVP es una versión del producto que abarca suficientes funciones para ser utilizadas por el primer cliente y agregar validación a la idea del producto en el ciclo de desarrollo del producto. Por ejemplo, el MVP puede ayudar al equipo de productos a modificar e integrar productos como comentarios iniciales de los usuarios en la industria del software.
• Sitios web Jamstack: Jamstack se conoce como la nueva arquitectura estándar en el contexto web. JAMstac es una arquitectura de desarrollo web moderna obtenida de Markup (JAM), JavaScript y API. JAMstack no se puede especificar como una tecnología discreta; por otro lado, es una técnica diferente para construir aplicaciones y sitios web.
• Portales web: un portal es una plataforma basada en la web que recopila datos de varias fuentes en una sola interfaz de usuario y los muestra a los usuarios de la manera más adecuada para su situación. Los portales web simples se han convertido en sistemas que permiten esfuerzos de experiencia del cliente digital a lo largo del tiempo.
• Páginas web únicas: un sitio web de una sola página, a veces conocido como sitio web de una sola página, es aquel que solo tiene una página HTML. No hay páginas adicionales como Contáctenos, Acerca de o Página de características.
• Sitios web estáticos: un sitio web estático (también conocido como página plana o estacionaria) se muestra exactamente como está almacenado en el navegador de una computadora. Se compone de páginas web codificadas en HTML guardadas en un servidor web. No cambia; sigue siendo el mismo, o "estático", para todos los visitantes del sitio.
• No se requiere programación web o diseño de base de datos para un sitio web estático. Los sitios web estáticos son los más básicos y fáciles de diseñar, lo que los hace ideales para sitios de pequeña escala. Mantener muchas páginas estáticas pronto puede convertirse en una tarea ineficiente y que requiere mucho tiempo.
• Productos SaaS: los productos SaaS son software de Internet alojado por un proveedor central y permiten el acceso a todos los usuarios, por ejemplo, el expansor de texto. DropBox, Google Apps y Canva son algunas de las ilustraciones destacadas de los productos SaaS.
• Sitios web de comercio electrónico y minoristas: un sitio web permite a las personas comprar y vender bienes físicos, servicios y productos digitales en línea en lugar de en una tienda real. Una empresa puede manejar pedidos, recibir pagos, administrar envíos y logística, y brindar atención al cliente a través de un sitio web de comercio electrónico.
• Tableros: un tablero es una representación visual o visualización de los datos de un usuario. Proporciona enlaces a herramientas valiosas e información crítica que se muestra en el sitio web.
• Aplicaciones web progresivas (PWA): PWA es una aplicación de software creada con tecnologías web estándar como Javascript y HTML.
• Interfaces de usuario interactivas: la interfaz de usuario (UI) es el punto de interacción y comunicación entre humanos y computadoras en un dispositivo. Las pantallas de visualización, los teclados, los ratones y la apariencia de un escritorio son ejemplos de esto. También puede referirse a cómo un usuario interactúa con un programa o un sitio web.
• Blog: un blog es un diario en línea cronológico inverso, una página web actualizada regularmente o un sitio web informativo que muestra material en orden cronológico inverso, con las publicaciones más recientes en la parte superior. Es una plataforma donde un escritor o un grupo de autores pueden expresar sus pensamientos sobre un tema específico.

NEXT.JS y JAMSTACK

Jamstack es una arquitectura web que tiene como objetivo hacer que la web sea más receptiva, segura y escalable. Se basa en muchas herramientas y flujos de trabajo que los desarrolladores aprecian y les ayuda a aprovechar al máximo su tiempo. El renderizado previo y el desacoplamiento son principios esenciales que permiten proporcionar sitios y aplicaciones con mayor certeza y confiabilidad. Jamstack funciona con varios generadores de sitios estáticos como Hugo, Jekyll, Gatsby, Nuxt, Huxo, Slate, Docsify, Gitbook, Docusaurus, Scully, etc. Next.js se está convirtiendo en uno de los marcos React más populares para crear sitios web Jamstack que son rápidos y compatible con SEO. Funciona bien con CMS autónomos y plataformas de comercio electrónico para ofrecer un rendimiento excepcional y beneficios de SEO.

Características de Next.js

• Hot Code Reloading: Cuando se guardan las modificaciones en el código, se recarga automáticamente el programa.
• División automática de código: esta funcionalidad agrupa y sirve cada página con cada importación en el código. Significa que no se carga más código en el sitio web.
• Compatibilidad con el ecosistema: JavaScript, Node y reaccionar son compatibles con el ecosistema Next.js.
• Representación del servidor: renderice componentes de reacción en el servidor de manera eficiente antes de entregar HTML al cliente.
• Styled-JSX: Styled-JSX styled-jsx es una extensión de JavaScript que le permite escribir CSS directamente en el código.
• Precarga automática: Next.js solo precarga los enlaces que se muestran en la ventana gráfica, que utiliza la API Intersection Observer para detectarlos. Next.js también deshabilita la obtención previa en caso de una conexión de red lenta o cuando el usuario tiene (Guardar datos) activado. Según las siguientes comprobaciones, inyecta dinámicamente etiquetas <link rel="preload"> para descargar componentes para navegaciones posteriores. Next.js no ejecuta JavaScript; solo lo trae. Esto evita que descargue cualquier otro material que la página precargada pueda solicitar hasta que el usuario haga clic en el enlace.
• Exportaciones estáticas: el usuario puede usar next export para exportar Siguiente. La aplicación Js para HTML estático se puede ejecutar sin un Node. servidor js.
• Compatibilidad con TypeScript: Next.js proporcionó una experiencia integrada de TypeScript lista para usar.

Generación de sitios estáticos con Next.js

Los sitios web estáticos son tan antiguos como la web. Sin embargo, con el auge de JavaScript, los sitios estáticos ganaron fricción en el mercado, haciéndolos más dinámicos. Ensamblar y representar un sitio web o una aplicación en el momento de la compilación es una generación estática. El resultado es una colección de archivos estáticos que incluyen el propio archivo HTML y activos como JavaScript y CSS. Tal como las conocemos, las aplicaciones web basadas en JavaScript funcionan ejecutando bibliotecas como React o scripts en el navegador en tiempo de ejecución. Cuando un navegador recibe una página, generalmente consiste en HTML simple con poco contenido. Luego, los scripts se cargan, lo que permite que el material se introduzca en la página, lo que se conoce como hidratación. Static Generation utiliza tecnologías como Next.js para representar una página similar a cómo aparecería en el navegador pero en tiempo de compilación. Esto nos permite servir todo el contenido en la carga inicial. Los scripts aún hidratan la página durante este proceso, pero idealmente con menos cambios o sin cambios.

• Next.js intenta generar estáticamente cualquier página lista para usar, si es posible. Next.js hace esto al detectar el proceso de obtención de datos desarrollado por una aplicación.
• Next.js proporciona API como getStaticProps y getServerSideProps para obtener datos según su uso en la creación de la aplicación para el usuario.
• Si el usuario usa getStaticProps , Next.js descubre la necesidad de que el servidor represente esas páginas.
• Next.js cargará cualquier dato cuando alguien solicite la página del servidor, junto con un sistema de implementación como Vercel que manejará automáticamente la configuración del servidor.
• Una vez que se ha desarrollado la aplicación, Next.js brinda la posibilidad de exportar la aplicación como archivos estáticos en un directorio separado. Sin embargo, no lo hace por defecto.
• El desarrollador compilará la aplicación primero y luego ejecutará la siguiente exportación, lo que hace que la aplicación esté disponible como archivos estáticos en el directorio de salida de forma predeterminada.

Beneficios de Next.js

Para dueños de negocios

Sin duda podemos afirmar que toda empresa desea mejorar su tasa de conversión, lo que impacta directamente en las ventas. Estas empresas deben emplear nuevas tecnologías para brindar una experiencia de usuario verdaderamente única que satisfaga tanto a los clientes actuales como a los potenciales. Next.JS los ayuda al permitirles un control total sobre el diseño final de sus sitios web, tiendas en línea, aplicaciones y otros productos digitales. Además, no está restringido por temas o complementos específicos de una plataforma de comercio electrónico en particular o un Sistema de gestión de contenido (CMS).

• Adaptabilidad y capacidad de respuesta: Siguiente. js proporciona sitios web y aplicaciones ajustables según el tamaño de la pantalla del dispositivo)
• Tiempo de carga de página corto y experiencia única en el sitio.
• Seguridad de datos: las páginas web estáticas creadas con NextJS no tienen acceso directo a la base de datos, dependencias, datos de usuario u otra información confidencial. Esto garantiza la seguridad de los datos.
• Tiempo de comercialización más rápido: NextJS es un método excelente para crear un MVP lo más rápido posible, gracias a varios componentes predefinidos. Este método de desarrollo le permite recopilar comentarios rápidamente y realizar cambios en su producto sin perder tiempo ni dinero.
• Totalmente omnicanal: los sitios web y las aplicaciones con tecnología de NextJS funcionan en cualquier dispositivo, lo que le permite ofrecer sus productos y servicios a través de muchos canales.
• Los visitantes y clientes estarán satisfechos con el rendimiento de los sitios web y las aplicaciones web de NextJS porque los sitios web estáticos son rápidos por naturaleza.
• Soporte a pedido: a medida que React y NextJS se vuelven más populares, también lo hace la cantidad de desarrolladores. Como resultado, será sencillo identificar una agencia o un profesional independiente para realizar las revisiones necesarias.

Para los vendedores

En contexto con los beneficios que los especialistas en marketing obtienen de Next.js. Algunas ventajas destacadas son el aumento de la tasa de conversión, la eficiencia de SEO y el tráfico orgánico.

• Mayores cifras de conversión y ventas: los especialistas en marketing se benefician de NextJS porque los sitios web y las aplicaciones en línea son rápidos, livianos y fáciles de escanear, todo lo cual ayuda a mejorar las clasificaciones de Google. A medida que aumentan las clasificaciones de Google, aumenta el tráfico orgánico, lo que resulta en mayores tasas de conversión y ventas.
• Experiencia de usuario única: esta ventaja es más visible en la industria del comercio electrónico, donde las tiendas en línea donde las empresas utilizan NFT.js para diferenciarse y mantenerse en un mercado global altamente competitivo.

Para desarrolladores

Los desarrolladores son increíblemente entusiastas con los componentes React reutilizables que reducen los costos y el tiempo de desarrollo.

• Analizador CSS: los desarrolladores pueden importar archivos CSS desde un archivo JavaScript. Los nuevos pares mejoraron el manejo de CSS y destacaron problemas previamente no reconocidos.
• Actualización rápida: ediciones fácilmente visibles realizadas en los componentes de React.
• Componente de imagen integrado y optimización automática de imagen: esta función optimiza las fotos automáticamente. Ahora admite imágenes AVIF, que son un 20 por ciento más pequeñas que las imágenes WebP.
• Soporte de la comunidad: la cantidad de colaboradores de NextJS se está expandiendo junto con su popularidad. En lugar de comenzar desde cero, los desarrolladores pueden usar esto para localizar posibles soluciones ya existentes.
• Híbrido de SSR de representación del lado del servidor y SSG de generación de sitios estáticos: permite al usuario prerenderizar páginas en el momento de la solicitud o en el momento de la creación en un solo proyecto.
• Regeneración estática incremental: permite a los desarrolladores web actualizar los sitios existentes en segundo plano a medida que ingresa el tráfico al volver a renderizarlos. El contenido estático puede volverse dinámico de esta manera.
• Compatibilidad con TypeScript: configuración y compilación automática de TypeScript.
• Zero Config: NextJS maneja la compilación y el empaquetado por usted. En otras palabras, está construido desde cero para ser productivo.
• Obtención de datos: según el caso de uso de la aplicación, se utilizan varios enfoques para representar el contenido. Esto comprende la representación del lado del servidor o la creación de sitios estáticos para la representación previa y la regeneración estática incremental para actualizar o producir contenido en tiempo de ejecución.
• Rutas de API: como función sin servidor de Node.js, es sencillo crear un punto final de API.
• División de código: divida el código y proporcione componentes solo cuando sean necesarios para reducir el tamaño de la primera carga útil de su aplicación.
• Compilador SWC basado en Rust: SWC, un compilador basado en Rust, convierte y minimiza el código JavaScript para la producción. Próximo. js presenta un nuevo compilador de Rust que ha optimizado la agrupación y la compilación, lo que resulta en actualizaciones locales 3 veces más rápidas y compilaciones de producción 5 veces más rápidas.
• Middleware: permite al usuario ejecutar el código antes de que se complete una solicitud, lo que permite al usuario emplear el código sobre la configuración. Los usuarios pueden modificar las respuestas a las solicitudes y redirigir a los usuarios de una ruta a otra.

Desventajas de NextJS

Aunque NextJS está evolucionando rápidamente y agregando nuevas funciones, todavía tiene ciertos inconvenientes y preocupaciones, que se enumeran a continuación:

• Costo de la flexibilidad: Next JS tiene pocas páginas frontales integradas, lo que obliga al desarrollador a construir toda la capa frontal desde cero.
• Desarrollo y administración: si el usuario desea usar NextJS para establecer una tienda en línea pero no tiene un equipo de desarrollo interno, el usuario necesitará una persona comprometida para supervisar el desarrollo y la administración.
• Falta de un administrador de estado incorporado: si necesita Redux, MobX o algo similar, el usuario necesitará un administrador de estado.
• La baja cantidad de complementos: en comparación con otras contrapartes como Gatsby.js, el usuario no puede utilizar tantos complementos fácilmente adaptables.

¿Es Next.js mejor que Gatsby?

Gatsby combina las mejores partes de React, GraphQL y react-router para crear un generador de sitios estáticos fácil de usar para desarrolladores. Gatsby genera archivos HTML estáticos que pueden cargarse desde un CDN. Cuando las aplicaciones de Gatsby se vuelven demasiado grandes o obtienen enormes volúmenes de datos, se sabe que causan problemas y retrasos en las compilaciones. Next.js es ideal si la aplicación tiene más de 100 000 páginas o si necesita recuperar enormes volúmenes de datos (como una tienda con muchos productos con variantes).

Ambas son opciones adecuadas para la representación del lado del servidor, pero en dos opciones diferentes. El resultado del uso de Gatsby es un generador de sitios estáticos sin servidor si el usuario pretende construir el sitio. Ahora es necesario implementar el desarrollo del proceso de compilación de forma estática en Netlify u otro sitio de alojamiento estático. Next.js proporciona un backend que puede generar una respuesta a una solicitud del lado del servidor, lo que permite a los usuarios desarrollar sitios web dinámicos en plataformas compatibles con Node.js. Next.js también puede generar un sitio estático, pero no diríamos que es su caso de uso principal.

Si el objetivo es crear un sitio estático, uno puede tener dificultades para decidirse, y Gatsby puede tener un ecosistema superior de complementos, incluidos muchos para blogs.

Gatsby también se basa en gran medida en GraphQL, que puede satisfacer las necesidades según las opciones y los requisitos del usuario.

¿Cómo instalar Node.js en Windows?

Para instalar Next.js, debe instalar Node.js.

Descargue el instalador de Windows desde el sitio web oficial de nodejs.

O aquí está el método alternativo para instalar Node.Js

Uso de Winget

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

usando chocolate

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

Usando Scoop

 scoop install nodejs

Para asegurarse de que Node.Js esté instalado correctamente, ejecute este comando

 C:\Users\Admin> node -v

Usando crear-siguiente-aplicación

Otra forma de comenzar con Nex.js es con create-next-app . Es una herramienta CLI que lo ayudará a crear una aplicación Nex.js. Para usar esto, debe instalar el paquete npx_command y esto lo ayudará a ejecutar los comandos de Javascript. Use uno de los siguientes comandos para comenzar.

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

El comando requiere el nombre de la aplicación y crea una nueva carpeta con ese nombre, luego descarga todos los paquetes necesarios ( react , react-dom , next ), establece el package.json en:

Puede ejecutar la aplicación de muestra con npm run dev

Obtendrá un resultado como este http://localhost:3000:

Pasos para instalar y ejecutar la aplicación Next.js

Paso 1: puede obtener node.js desde aquí. Ejecute estos comandos en la terminal para confirmar la instalación.

 node -v npm -v

Paso 2: Ahora, cree una carpeta para su proyecto, navegue hasta ella con su editor de código y ejecute el siguiente comando en la terminal.

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

agregue el siguiente script en el archivo package.json

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

Paso 3: agregue un archivo index.js en la carpeta de la página y agregue el siguiente código dentro

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

Paso 4: Inicie la aplicación con npm start.

Producción

¿Cómo agregar TypeScript a 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

Cómo agregar páginas y rutas a su aplicación next.js

Para agregar una página acerca de a su aplicación, suelte su componente en /pages/about.js o .tsx para TypeScript.

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

Enlaces y navegación

Next framework también tiene un componente Link de next/link .

Si desea vincular a la página de inicio (/) y una ruta de blog (es decir, /blog/emizen), incluiríamos lo siguiente en /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 es un accesorio requerido para el componente Link y los datos también se pueden pasar como un objeto:

 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 en Next.js

En Siguiente, puede usar el componente Head de next/head para agregar metadatos a las páginas 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> ); }

Rutas API

Nextjs permite crear aplicaciones React de pila completa escribiendo código de servidor a través de una función llamada rutas API.
Para crear su propia API que se ejecuta como funciones independientes sin servidor, cree una carpeta llamada "api" en /pages.

Si desea obtener datos de /api/about para la página acerca de, incluya una página llamada about.js en /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" }); }

Solicitar datos del lado del cliente

Para solicitar datos de nuestras rutas API, el enfoque convencional sería solicitarlos usando useEffect y 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> ); }

Solicitar datos del lado del servidor

Estas dos funciones ayudan a permitirnos obtener datos del servidor.

 getServerSideProps #or getStaticProps

Las funciones están en el mismo archivo que los componentes de React, y el código para ellas se incluye por separado del cliente de React.

ObtenerServerSideProps

Cada visita a la página desencadena la ejecución de getServerSideProps . Como resultado, es extremadamente útil en páginas que contienen datos dinámicos o requieren que se realicen solicitudes cada vez, como recuperar datos de usuarios autenticados.

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

Esta función permite enviar datos desde el servidor e inyectarlos en los accesorios del componente de la página.

Le permite al cliente React mostrar los datos de inmediato, sin demora y sin tener que lidiar con ningún estado de carga o error.

Si desea recuperar datos del servidor, puede usar getServerSideProps async con la palabra clave 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 }, }; }

Estamos recuperando datos dinámicamente de la API XYZ, y los datos cambian con cada actualización de página.

ObtenerAccesoriosEstáticos

La función getStaticProps es mejor para páginas estáticas que cambian con poca frecuencia. Esta función ejecuta el código del servidor y envía una solicitud GET al servidor, pero solo una vez cuando se completa el proyecto.

Cuando la aplicación se ejecuta en desarrollo, solicita datos cada vez que actualiza la página, de forma similar a getServerSideProps.

Durante el desarrollo, getStaticProps solo realiza solicitudes en cada visita a la página.

Si ejecuta yarn build y luego ejecuta la compilación de producción o su proyecto React con yarn start , obtendrá el mismo nombre que se solicitó cuando se creó el proyecto, no en tiempo de ejecución.

getServerSideProps y getStaticProps solo pueden realizar solicitudes GET. Las rutas API pueden manejar cualquier tipo de solicitud de lectura y actualización de datos (es decir, cuando se combinan con una capa de datos como una base de datos)

Ejemplos de Next.js

Puede encontrar más ejemplos de Next.js aquí

Las mejores plantillas Next JS

Tablero de materiales

NextJS Material es un panel React Material-UI de código abierto inspirado en Material Design de Google. Los principios materiales son un conjunto de componentes simples y elegantes. Los populares marcos Material-UI, NextJS y React se usaron para crear el Tablero de materiales de NextJS.

Juego de materiales

NextJS Material Kit es un kit de diseño de materiales gratuito creado para NextJS, React y Material-UI. NextJS Material Kit contiene más de 100 elementos frontales individuales que permiten al usuario mezclar y combinar. Las variaciones de color son posibles para todos los componentes, que el usuario puede cambiar fácilmente con archivos y clases SASS y JSS (dentro de archivos JS).

Argón

El tablero NextJS Argon comprende más de 100 componentes distintos que el usuario puede mezclar y combinar como mejor le parezca. Al modificar los archivos SAAS incluidos con el proyecto, el usuario puede personalizar fácilmente este React Dashboard de código abierto.

Nosotros no

Los componentes con el código completo Notus NextJS comprenden más de 100 componentes distintos que el usuario puede mezclar y combinar según sus necesidades. Todos los componentes pueden tener variaciones de color, que puede cambiar fácilmente con las clases CSS de Tailwind.

¿Dónde puede aprender Next.js?

• Puede consultar el sitio web oficial para aprender Next.js
• Otra opción es React Bootcamp
• Siguiente.js en Udemy

y hay muchos más recursos en línea que lo ayudarán a dominar Next.js

Conclusión

No importa si va a crear un software sólido y complejo que servirá a millones de personas o si se está expandiendo rápidamente en una tienda web. En ambos casos, puede utilizar las ventajas de la tecnología web moderna como Next.js para hacer que su negocio sea más eficiente en línea. SEO y UX Next.js lo ayudarán a hacer de Internet un lugar mejor, más limpio y más centrado en el usuario para mejorar la velocidad de su página. Las páginas generadas estáticamente aún responden: Next.js hidratará su aplicación en el lado del cliente, lo que le permitirá ser completamente interactivo.

¿Busca un desarrollador talentoso de Next.js o full stack? ¡Te cubrimos! Brindamos todas las herramientas y la experiencia que necesitará para comenzar a planificar y ejecutar su proyecto Next.js ahora mismo.

Preguntas frecuentes sobre Next.Js