Presentamos cómo implementar fácilmente una app Fullstack Next.js con Vercel, lo que permitirá el desarrollo y el funcionamiento óptimo de las aplicaciones.
Una de las ventajas es que desde el primer momento y está optimizado para impulsar cargas de trabajo de producción de alto rendimiento. Next.js es atractivo para trabajar y fácil para implementar el trabajo en producción.
Instalación y configuración
Primeramente, hay que asegurarse de haber instalado npm en el sistema:
node -v && npm -v
Se debería ver los números de versión respectivos impresos en la consola. De lo contrario se puede acudir al sitio de Node.js para obtener instrucciones de instalación.
Con la cadena de herramientas de nodo instalada se puede escribir lo siguiente para crear un nuevo proyecto Next.js:
npx create-next-app my-amazing-app
Ingresar al directorio nuevo e iniciar el servidor de desarrollo:
cd my-amazing-app && npm run dev
La aplicación se publicará en localhost: 3000 de forma predeterminada y se dará la bienvenida con su navegador.
Datos estáticos
Se puede proporcionar datos dinámicos a las páginas en el momento de la compilación a través del enlace getStaticProps de búsqueda de datos. Esto es ideal para páginas de marketing donde los datos no cambian con demasiada frecuencia y la velocidad es la prioridad. Después hay que eliminar el contenido predeterminado de pages/index.jsy y reemplazarlo con lo siguiente:
import Head from «next/head»;
export default function Home({
title = «Hello World!»,
metaContent = «Generic SEO pitch»,
copy = «I’m having writer’s block.»,
}) {
return (
<>
<Head>
<title>{title}</title>
<meta content={metaContent} />
</Head>
<div>
<h1>{title}</h1>
<p>{copy}</p>
</div>
</>
);
}
export const getStaticProps = async () => {
// This is a full server-side Node environment,
// which means that you can make network requests,
// talk to databases, read from the file-system,
// and do whatever you want to fetch your data.
return {
props: {
title: «My Amazing Startup»,
metaContent: «Amazing SEO poetry»,
copy:
«I’m in the business of making people smile. That’s all I’m here for.»,
},
};
};
Se puede decir que es muy similar cualquier aplicación React, sin embargo, hay algunas diferencias. Primero, hay que notar que no se importa explícitamente React porque Next.js ya lo incluye en el alcance.
Se puede ver que la capacidad de configuración de los metadatos de la página desde el componente <Head /> y no se necesita traer otra biblioteca de terceros como react-helmet.
También se debe exportar una función llamada getStaticProps que devuelve un objeto props con las claves de título, contenido meta y copia, lo que permite desestructurar los accesorios del componente de página de nivel superior y leer esos valores.
Hay que tener en cuenta que se han proporcionado valores predeterminados en caso de que los accesorios no se ofrezcan para una buena práctica. Cuando se crea el proyecto Next.js, estos accesorios se integran directamente en las páginas sin sobrecarga de tiempo de ejecución, lo que brinda mejor rendimiento y confiabilidad.
Regeneración estática incremental
Next.js difumina la línea entre estático y dinámico. El hecho de que sus datos se obtengan de forma estática no significa que se atasquen hasta que vuelva a implementar.
La regeneración estática incremental permite actualizar las páginas existentes lo que vuelve a representar en segundo plano a medida que ingresa el tráfico. Todo lo que necesita hacer es agregar la clave revalidate al objeto que regresa de la función getStaticProps con la cantidad de segundos que desea esperar antes de revalidar y regenerar la página si los datos han cambiado.
A continuación, un ejemplo local artificial; es posible que no se note una diferencia, pero cobrará vida cuando se comience a consultar datos de una base de datos o CMS.
export const getStaticProps = async () => {
return {
props: {
title: «My Amazing Startup»,
copy:
«I’m in the business of making people smile. That’s all I’m here for.»,
},
revalidate: 1, // number of seconds to wait before revalidating
};
};
Server side
En ocasiones hay contenido dinámico que debe cambiar de acuerdo con una serie de variables. Tal vez se busque inspeccionar los encabezados de solicitud del tráfico entrante y usarlos para determinar cómo desea representar su página. Para eso, Next.js proporciona la función getServerSideProps que no es muy diferente de la función getStaticProps que se ha visto.
Se debe crear un nuevo archivo nombrado hello-user-agent.js en el directorio pages con el siguiente contenido:
import Head from «next/head»;
export default function HelloUserAgent({ userAgent = «Nobody» }) {
return (
<>
<Head>
<title>Hello User Agent!</title>
</Head>
<p>
{» «}
Hi <em>{userAgent}</em> !{» «}
</p>
</>
);
}
export const getServerSideProps = async ({ req }) => {
return {
props: {
userAgent: req.headers[«user-agent»],
},
};
};
Esta página sigue una estructura similar a la de la página index.js de inicio, pero hay una diferencia. En lugar de exportar una función getStaticProps debajo del componente de página, se está exportando una función llamada getServerSideProps. Se puede observar que se desestructura el mensaje Node.js y entrante objeto HTTP y la lectura de valores en el cuerpo de función.
Esta página está renderizada en un entorno de servidor con tecnología de función sin servidor y proporciona nuevos accesorios a la página cada vez que se le solicita. Si navega hasta localhost:3000/hello-user-agent, se verá la cadena de agente de usuario del navegador pintada en la pantalla.
Cabe mencionar que renderizar una página de esta manera tiene un ligero impacto en el rendimiento. Si no se ha accedido a la función que está renderizando la página durante un par de minutos, se puede tardar unos minutos en iniciarse. Esto se conoce como el inicio de un problema. Una estrategia de almacenamiento en caché puede ayudar a mitigar este problema.
Rutas API
Estas rutas permiten crear controladores de solicitudes HTTP utilizando la misma estructura de enrutamiento del sistema de archivos que se puede ver en la interfaz. Cuando se crea un propio proyecto con create-next-app, ya se generó una ruta API en pages/api/hello.jscon los siguientes contenidos:
export default (req, res) => {
res.statusCode = 200
res.json({ name: ‘John Doe’ })
}
Si se navega a localhost: 3000 / api / hola se obtendrá una respuesta JSON de la función. Las rutas API son buenas para cosas como conectarse rápidamente a una base de datos y devolver resultados o procesar un formulario y enviar correos electrónicos.
Implementar en Vercel
Para seguir los pasos de cómo implementar fácilmente una app Fullstack Next.js con Vercel, ahora se requiere de una forma de publicarlo en Internet. Vercel es una plataforma de implementación para proyectos frontend realizados por las mismas personas que crearon Next.js, por lo que es natural que la experiencia de implementación se sienta tan simple como la experiencia de desarrollo.
Para comenzar, hay que inicializar un nuevo repositorio de git y enviarlo a un proveedor de Git. Una vez que se tenga una URL para su repositorio, navegar hasta https://deploy.new/y pasará por el flujo de importación.
Si aún no se tiene una cuenta, se creará una nueva para y se realizará una implementación en su cuenta. Una vez hecho esto, el proyecto Next.js se implementará a través del borde Red de Vercel.
Cada vez que se realice cambios o cree una nueva rama, se realizará una nueva implementación y su URL se actualizará en consecuencia. Se puede obtener más información sobre la plataforma Vercel consultando la documentación.
También se puede utilizar el Vercel CLI para realizar una implementación ejecutando el comando vercel desde la raíz del proyecto, aunque el flujo de trabajo de Git es una configuración ideal para iterar en una aplicación de producción.
Leíste: Cómo implementar fácilmente una app Fullstack Next.js con Vercel, te recomendamos: Complementos de encuestas en WordPress
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
