Subdominios 101

Iniciando

En este artículo vamos a ver cómo configurar un subdominio en una aplicación de NextJS en Vercel.

Lo primero es saber que no necesitamos comprar un dominio nuevo para crear un subdominio, ya que podemos crear un subdominio en un dominio que ya tengamos. En mi caso voy a usar el dominio que tengo registrado emmapiensa.com y voy a crear un subdominio llamado blog.emmapiensa.com, el cual en este caso sencillo se va a ligar a la ruta del blog, emmaapiensa.com/blog, de forma que yendo a blog.emmapiensa.com se llegue a la misma página.

Leer Comprando dominio y configurando Vercel

Creando el subdominio

Para crear el subdominio, vamos a la pestaña de configuración en Vercel y seleccionamos Domains/Dominios ingresamos el nombre del subdominio y lo agregamos.

Se nos creará el subdominio pero aún no será público hasta que no hagamos la configuración en el dominio. Por lo que vamos a la página de configuración de nuestro dominio y agregamos un nuevo registro de tipo CNAME, con el nombre del subdominio y la IP que nos da Vercel.

Configuración de NextJS

Vercel tiene su propia guía sobre como configurar un subdominio en una aplicación de NextJS, que nos dice que debemos agregar lo siguiente al archivo next.config.js:

rewrites() {
    return {
        beforeFiles: [
            // if the host is `app.acme.com`,
            // this rewrite will be applied
            {
                source: '/:path*',
                has: [
                    {
                        type: 'host',
                        value: 'app.acme.com',
                    },
                ],
                destination: '/app/:path*',
            },
        ]
    }
}

por lo que en mi caso agregué lo siguiente:

  async redirects() {
    return [
      {
        source: '/:path*',
        has: [
          {
            type: 'host',
            value: 'blog.emmapiensa.com',
          },
        ],
        destination: 'https://www.emmapiensa.com/blog/:path*',
        permanent: false,
      },
    ];
  },

Conclusión

Y con esto ya tenemos configurado nuestro subdominio, ahora si vamos a blog.emmapiensa.com llegaremos a la página del blog.