Hola! Ya tenía tiempo que no escribía y la verdad he perdido la práctica, pero espero este post sea de lo más ameno para ti.

Este tema ya me lo habían pedido últimamente después de realizar mis últimas publicaciones al respecto en mi canal de Youtube y página de FB y también después de que mostré lo que Vercel + Next.js ha hecho por mi y por mi sitio web.

Este post es algo más introductorio y espero que sea uno de varios post que haré sobre Next.js, ya que planeo, a manera de documentación, mostrar los proyectos que he hecho con next.js y como hacerlos.

Sin más, voy a explicarte rápidamente lo que es Next.js, sus principales funcionalidades y como puedes hacer tu primer sitio con React + Next.js + + TailwindCSS + Vercel, sin si quiera abrir tu editor de código.

Para este pequeño “tutorial” o guía voy a usar CodeSandbox y Vercel, por lo que necesitaré que crees una cuenta en ambos sitios. Lo más rápido es que uses tu cuenta de github para usar ambos.

¿Qué es Next.js?

Primero que nada, Next.js es un framework para React (yo diría que el último framework) e incluso podría considerarse un framework de express o Node.js.

Esto último, ya que en realidad Next.js lo inicias conectándolo a express como cualquier middleware, y trabaja usando node.js, pero su objetivo principal es de servir tus proyectos de React. Pero no te preocupes, no tendrás que hacer nada de eso, ya que para eso es Vercel y hace todo lo relacionado a la configuración y la infraestructura por ti.

Vercel es la compañía detrás de Next.js y fundada por Guillermo Rauch una de las personas más conocidas en la comunidad de JS por sus creaciones como Socket.io y Mongoose. Y para no hacerte el cuento más largo, Vercel es la plataforma insuperable para subir tus proyectos hechos con Next.js (y otros).

Vercel te permite hacer deploy de tus proyectos en Next.js de una manera extremadamente fácil, con una infraestructura y rendimiento impresionantes, y con una gran calidad en el servicio. Prácticamente es el mejor lugar para alojar tus sitios y lo mejor de todo… GRATIS.

Continuando con la explicación de Next.js. Es difícil encasillarlo en una categoría de frameworks, ya que prácticamente hace de todo y soluciona un montón de cosas. Tiene desde un sistema integrado de rutas (como react-routing) que incluso va más allá y te sirve para crear rutas de express (tipo serverless) hasta manejo de “code splitting”. Se puede considerar un híbrido entre SSR (Server Side Rendering) y SSG (Static Site Generator) ya que puedes hacer ambos y comparten ciertos conceptos que incluso hacen a Next.js el mejor motor para hacer tanto SSR como SSG.

Pero para no desviarme tanto del tema, simplemente voy a enlistar sus principales features:

• Cero configuraciones: No necesitas configurar nada, solo te enfocas en el código y es todo, olvídate de configurar un servidor o la infraestructura, incluso no tienes que mover nada a webpack, totalmente “plug-and-play” o debería decir… ¿ “code-and-play” ?
• SSR: Sirve tus proyectos de React pre-procesados, es decir que tu sitio no se carga en el cliente, si no en el servidor y posteriormente en el cliente, esto le dan gran potencia a tu proyecto en React para sitios que requieren muy buen puntaje de SEO y poder ser indexado en motores de búsqueda
• SSG: Si el tema del SEO no es suficiente, los sitios estáticos, como sabes, es prácticamente tu proyecto de react pre-renderizado y convertido en un archivo inmovible, solo es cuestión de servirlos, con esta funcionalidad tu sitio se cargará a velocidad luz.
• Generaciones estáticas incrementales: El mayor problema de los sitios estáticos y los generadores de estos, es que no es tan escalable, ya que tienes que generar el sitio completo en cada cambio, imagina corregir una errata en un blog de 1000 posts. Con esta funcionalidad eso ya no pasa, cómo su nombre lo dice, solo se realizan los cambios incrementales, generando solo lo necesario en demanda.
• Soporte para Typescript: Si, puedes usar Typescript con Next.js
• Soporte para CSS: Y también puedes usar css-modules, Sass, post-css, styled-components, prácticamente cualquier motor o framework css.
• Fast Refresh: Lo ultimo para “live-editing” o “live-reloading” para react.
• Rutas basado en el sistema de archivos: Utiliza el sistema de archivos y directorios para definir tus rutas.
• Rutas de API: E incluso define las rutas de tu API a modo de serverless.
• Separación de Código y Enpaquetado: Next.js se encarga todo lo relacionado al code-splitting y packaging, no necesitas hacer configuraciones tediosas en webpack.

Pero creo que es suficiente introducción, puedes encontrar más en el sitio oficial de Next.js

¿Que es Tailwind?

No quisiera enfocar este posts a tailwind y hacer muy pesada la lectura.

Así que si no conocías Tailwind, te diré que yo no lo he dejado de usar desde que lo conozco, y la verdad es que es un framework css basado en utilidades bastante poderoso.

Puedes encontrar más sobre él en el sitio oficial. Solo te puedo decir que al ser un framework basado en utilidades, es como tener tu html y estilos de una manera mas descriptiva.

Por ejemplo, yo antes usaba styled-components y empieza el problema de tener que buscar nombres para cada componente y cada parte de tu código, si no fuera suficiente trauma el tener que encontrar el nombre perfecto para tus variables jaja.

En fin, en vez de de tener algo como esto:

Ahora puedo tener algo un poco más descriptivo como esto:

Eso que ves, es tailwind, son clases que no te dicen que componente es, si no como se ve ese componente o elemento. Aunque no es necesario hacer esto, por ejemplo en ese componente también estoy usando clases que cree pero que por dentro utilizan las clases utilitarias de tailwindcss. Esto me gusta ya que puedes leer y saber cómo se puede ver lo que estas escribiendo o leyendo.

Pero no te confundas, yo al principio no quería usar tailwind ya que pensaba que tantas utilidades hacían bastante pesado el sitio con el archivo de css, y que para eso, mejor creaba mis propias clases, sin embargo este framework está hecho sobre post-css, así que hace una limpieza al “compilar” o hacer código para producción, que solo entrega un css con únicamente las clases que usaste.

También tiene utilidades específicas que hacen que puedas crear cualquier interfaz, pero a la ves están limitadas, por lo que hace imposible que termines con un montón de clases, estilos, tamaños y familia de fuentes, colores, bordes, como si fuera un Frankenstein de CSS.

Manos a la obra

Ahora si vamos a hacer algo de código. Recuerda tener tus cuentas de CodeSandbox y Vercel listas.

Lo primero que tenemos que hacer es crear un nuevo sandbox basado en Next.js:

Posteriormente agregamos las dependencias necesarias para tailwind css usando el administrador de dependencias de CodeSandbox, que sería lo equivalente a usar el siguiente comando en nuestra terminal de un proyecto local (en codesandbox se instalarán en las dependencias normales y no en las dev):

yarn add --dev tailwindcss postcss-preset-env postcss-flexbugs-fixes

Posteriormente importamos los css de tailwind a nuestro archivo principal o archivo maestro de estilos, por ejemplo el siguiente index.css en el directorio styles del proyecto:

@tailwind base;
/* estilos base (aplicados a los elementos) */
@tailwind components;
/* aquí van nuestras clases de componentes (extraidos, podemos usar @apply para aplicar estilos de tailwind */
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
@tailwind utilities;
/* nuestras utilidades extra */

Ahora tenemos que agregar 2 archivos, uno para configurar PostCSS (postcss.config.js) y otro para configurar Tailwind (tailwind.config.js), básicamente lo que hacen es conectar tailwind con postcss, agregar una pequeña feature de flexbox y activar el “purge” en tailwind:

module.exports = {
  plugins: [
    'tailwindcss',
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    ],
  ],
}

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'accent-1': '#333',
      },
    },
  },
  variants: {},
  plugins: [],
}

Finalmente agregamos dos componentes que nos servirán para importar nuestros estilos en todas las páginas de nuestro proyecto (_app.js), y el otro nos va a ayudar a agregar el idioma o localización de nuestro html (_document.js):

import "../styles/index.css";
import Head from "next/head";

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title key="title">Soy Desarrollador</title>
        <meta key="description" name="description" content="Contactame!" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="es">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Ahora hacemos un reinicio de servidor:

Probamos que este funcionando agregando algunas clases de tailwind a nuestro archivo principal:

Quisiera no enfocar el artículo en el diseño de la web, así que para nuestro sitio utilizaré un recurso bastante bueno para crear los componentes de nuestra web en tiempo record. Me estoy refiriendo a tailblocks, donde puedes encontrar componentes para todo:

Lo mejor de todo es que es tailwind, puedes cambiar, quitar, poner clases de cada elemento para modificar cada detalle de los componentes, podemos partir de estos componentes base de tailblocks y darles la personalidad de nuestra marca:

OJO! al copiar y pegar de tailblocks, ya que hay que cambiar ciertas propiedad, como pasar de class a classNames, cerrar todos los tags, etc.

Finalmente, ligamos nuestra cuenta de Vercel en la pestaña de “Deploy” y hacemos el despliegue directamente desde nuestro CodeSandbox:

Y listo, ya tenemos nuestro sitio hecho:

https://csb-l81ps-o3kahmoi7.vercel.app/

Te dejo el proyecto de CodeSandbox, para que le puedas echar un vistazo y apoyarte de este para crear el tuyo:

Bonus

Seguramente te estarás preguntando como editarlo desde tu computadora, o si puedes tener algún control de versiones sobre esto, te voy a explicar como hacerle para bajarlo localmente.

Solamente tienes que crear un repo en github directamente desde CodeSandbox:

Posteriormente lo clonamos en nuestra computadora:

Activamos la integración con github en Vercel:

Finalmente, ya solo tenemos que hacer cambios en nuestro repositorio que acabamos de crear, hacer un “push” a master y listo! automáticamente Vercel empezará a construir nuevamente el sitio!

Espero que te haya gustado mi post, estaré subiendo más al respecto, nos vemos en la siguiente! ;)