Cómo hacer un deploy de tu aplicación Next.js en Netlify

Hacer un deploy de una aplicación creada en Next.js y React es muy fácil con Netlify. En estos pasos podrás tener tu aplicación funcionando en un servidor en menos de 5 minutos. Y lo mejor es que es completamente gratis. Además puedes agregar un dominio personalizado y tener SSL completamente gratis.

Puedes revisar la última versión de este tutorial en el repositorio de Github

1. Crea tu aplicación de Next.js

Si es la primera vez que utilizas Next.js, te recomiendo seguir esta guía paso a paso para entender bien cómo funciona. Para este tutorial crearemos sólo una página extremadamente sencilla para enfocarnos más en el deploy. Si ya tienes un proyecto de Next.js puedes ir directo al paso 2.

Crear la estructura de tu proyecto

Escribe estos comandos en la terminal para crear el directorio pagina-de-prueba, iniciar npm, instalar las dependencias de Next.js react react-dom next y crear un directorio pages para agregar las páginas de nuestra aplicación.

mkdir pagina-de-prueba
cd pagina-de-prueba
npm init -y
npm install --save react react-dom next
mkdir pages

Para poder correr Next.js en tu computadora abre el archivo package.json que está dentro del directorio pagina-de-prueba y reemplaza "scripts" con lo siguiente:

//package.json
...
"scripts": {
  "dev": "next",
    "build": "next build",
      "start": "next start"
}
...

Agrega una página de inicio

Sólo vamos a crear una página muy sencilla así que crea un archivo llamado 'index.js' dentro del directorio pages y agrega lo siguiente:

//pages/index.js
function IndexPage() {
    return (
            <div>
                <p>
                    ¡Este es mi primer deploy con Next.js!
                </p>
            </div>
    )
}
export default IndexPage

Corre tu aplicación localmente

Si te das cuenta estamos utilizando React, y creaste una página de inicio, para correr el proyecto sólo usa este comando en la terminal:

npm run dev

Listo, tu primer aplicación de Next.js debe estar corriendo en http://localhost:3000/
Si seguiste todos los pasos debes ver algo similar a esto:

2. Prepara tu proyecto para Netlify, agrega git y súbelo a Github

Para este tutorial vamos a usar Github como nuestro repositorio. Netlify creará un nuevo build cada vez que hagamos un push de nuestro código a un branch específico.

Configura tu proyecto de Next.js para el deploy en Netlify

En tu proyecto edita el archivo package.json para que quede así:

//package.json
...
"scripts": {
    "dev": "next",
    "build": "next build",
    "export": "next export",
    "deploy": "npm run build && npm run export",
    "start": "next start",
},
...

Crea tu repositorio de Github

Entra en tu perfil de Github, crea un repositorio y escoge un nombre. Puedes escoger si quieres que se público o privado. Para este tutorial yo elegí el nombre next-netlify-test-sitey quiero que sea un repositorio público.

Agrega git en tu proyecto

Para subir tu proyecto al repositorio de Github tienes agrega git a tu proyecto corriendo el comando git init dentro del directorio, que en este caso es pagina-de-prueba.

Antes de crear tu primer commit agrega un archivo con el nombre .gitignore y edítalo para que quede así:

# /.gitignore
# next.js build output
.next
# Dependency directories
node_modules/

Crea el primer commit

Con estos comandos creas tu primer commit, agregas el repositorio de Github que creaste como un remote y haces un push al repositorio remoto en el branch master. Es importante cambiar la dirección después de git remote add origin por la dirección/nombre de TU repositorio.

git add .
git commit -m 'Este es el primer commit del proyecto.'
git remote add origin https://github.com/cosio55/next-netlify-test-site.git
git push -u origin master

Si revisas tu repositorio de Github puedes ver que ya está ahí todo tu código.

3. Configura Netlify y crea tu primer sitio

Lo primero que tienes que hacer es crear tu cuenta gratuita en Netlify, te recomiendo hacer el login con Github.

Navega a la página de Sitesy selecciona New Site from Git

Selecciona Github en la parte de abajo, y dale acceso a Netlify para que pueda ver el repositorio que creaste.

Selecciona el repositorio que creaste, la branch que quieres utilizar para tu deploy, y algo muy importante escribe npm run deploy como el build commandy out como el publish directory. Dale click en el botón Deploy Site.

¡Listo! Netlify en automático empezará a correr el deploy con código de tu repositorio, y en 1-2 minutos estará listo. Puedes revisar el ejemplo de este tutorial aquí.

¡Si te gustó este tutorial no dudes en seguirme en Twitter, y también comenta si tienes dudas o algo con lo que lo podría mejorar!