Next.js com serverless-stack
Tags: react, serverless, serverlessstack, nextjs
Published: 2022-11-12 14:22:06

---
title: Next.js com serverless-stack
published: true
description: Next.js com serverless-stack
tags: react, serverless, serverlessstack, nextjs
cover_image: https://user-images.githubusercontent.com/19496473/196418413-c32898c4-350c-4b97-9b19-59357b053530.png
---

Existem algumas formas de fazer deploy de uma aplicação [React](https://reactjs.org/) ou [Next.js](https://nextjs.org/) no ambiente da [AWS](https://aws.amazon.com/pt/) sem custos. Por exemplo, é possível subir uma aplicação [React](https://reactjs.org/) pura usando apenas [CloudFront](https://aws.amazon.com/pt/cloudfront/) e o [S3](https://aws.amazon.com/pt/s3/), porém como o [Next.js](https://nextjs.org/) existe a opção de usarmos como SSR vamos usar o [serverless-stack](https://serverless-stack.com/). Há outras formas de fazer isso como o [Vercel](https://vercel.com/) (criadores do Next.js), [Amplify](https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/) e [Serverless Next.js (sls-next) Component](https://github.com/serverless-nextjs/serverless-next.js), mas na minha opinião a abstração que o [serverless-stack](https://serverless-stack.com/) (ou SST) é a melhor dentre as opções.

Você pode conferir o código final [aqui](https://github.com/rfoel/exemplo-next.js-serverless-stack).

## O que você vai precisar

- Uma conta na [AWS](https://aws.amazon.com/pt/);
- [AWS CLI](https://aws.amazon.com/pt/cli/) instalado;

## Criando uma aplicação SST

O serverless-stack possuí uma CLI que facilita a criação de uma aplicação inicial, similar com o create-react-app (CRA) do React e create-next-app do Next.js.

```sh
npx create-serverless-stack nextjs-app
cd nextjs-app
```

Dentro do diretório `nextjs-app` você vai ver um arquivo chamado `sst.json` com o conteúdo:

```json
{
  "name": "nextjs-app",
  "region": "us-east-1",
  "main": "stacks/index.js"
}
```

A propriedade `name` é o nome da aplicação, `region` é a região que sua aplicação será hospedada e `main` é o arquivo principal da sua aplicação SST. Por padrão a região selecionada sempre será `us-east-1`, mas é possível trocar por `sa-east-1` por exemplo, que são os servidores da AWS em São Paulo.

No mesmo diretório também haverá uma pasta chamada `stacks`, que é onde fica o código que servirá para gerar a infraestrutura da aplicação.

Para este exemplo, vamos apagar a pasta `src` que o SST criou por padrão porque vamos colocar nossa aplicação Next.js em uma pasta com esse mesmo nome.

```sh
rm -rf src
```

## Criando uma aplicação Next.js

Para criar a aplicação vamos usar o [create-next-app](https://nextjs.org/docs/api-reference/create-next-app), que vai gerar uma aplicação do Next.js padrão. Nossa aplicação ficará no diretório `src`.

```sh
npx create-next-app src
```

Para esse exemplo não vamos fazer nenhuma alteração no diretório do Next.js.

## Configurando Next.js no SST

Agora vamos configurar nossa aplicação Next.js no arquivo `stacks/MyStack.js`. Inicialmente esse arquivo vai conter um exemplo de uma configuração de um lambda. Podemos remover essa configuração e colocar a seguinte configuração:

```js
import * as sst from '@serverless-stack/resources'

export default class MyStack extends sst.Stack {
  constructor(scope, id, props) {
    super(scope, id, props)

    // Configuração do Next.js aqui
    const site = new sst.NextjsSite(this, 'Site', {
      path: 'src',
    })

    this.addOutputs({
      URL: site.url,
    })
  }
}
```

Em `path` será onde sua aplicação do Next.js está.

## Subindo a aplicação

Nesse ponto já podemos subir nossa aplicação com o seguinte comando:

```sh
npm run deploy -- --stage prod
```

Esse comando vai subir a infra da nossa aplicação e mostrar a URL da nossa aplicação. Essa URL será do CloudFront, mas é possível configurar um domínio customizado diretamente no SST, mas isso é conteúdo para outra postagem.