Cómo hacer un deploy de tu aplicación Next.js en Netlify
Tags: tutorial, react, github
Published: 2020-03-06 02:29:47

Hacer un deploy de una aplicación creada en [Next.js](https://nextjs.org/) y [React](https://reactjs.org/) es muy fácil con [Netlify](https://www.netlify.com/). 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](https://github.com/cosio55/next-netlify-test-site)


## 1. Crea tu aplicación de Next.js

Si es la primera vez que utilizas Next.js, te recomiendo seguir esta [guía](https://nextjs.org/learn/basics/getting-started) 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.

```console
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:

```javascript
//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:

```javascript
//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:

```sh
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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tula2p8pk1bt8oygtli0.png)

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

Para este tutorial vamos a usar [Github](https://github.com/) 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í:

```javascript
//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-site`y quiero que sea un repositorio [público](https://github.com/cosio55/next-netlify-test-site).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3tqbv47dsiyrt4mbbhri.png)

### 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/euhdgzhu03hgi73oknk1.png)

##3. Configura Netlify y crea tu primer sitio

Lo primero que tienes que hacer es crear tu cuenta gratuita en [Netlify](https://app.netlify.com/signup), te recomiendo hacer el login con Github.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wq92tdxenlndkikposwk.png)

Navega a la página de `Sites`y selecciona `New Site from Git`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pcch4s6o4iuhd5fcl0y9.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ldkbh67uypcn8uzcve7t.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nacjugrme02p2uhdmbtg.png)


¡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í](https://boring-lovelace-62360a.netlify.com/).

¡Si te gustó este tutorial no dudes en seguirme en [Twitter](https://twitter.com/JeroCosio), y también comenta si tienes dudas o algo con lo que lo podría mejorar!