Next.js com serverless-stack

Existem algumas formas de fazer deploy de uma aplicação React ou Next.js no ambiente da AWS sem custos. Por exemplo, é possível subir uma aplicação React pura usando apenas CloudFront e o S3, porém como o Next.js existe a opção de usarmos como SSR vamos usar o serverless-stack. Há outras formas de fazer isso como o Vercel (criadores do Next.js), Amplify e Serverless Next.js (sls-next) Component, mas na minha opinião a abstração que o serverless-stack (ou SST) é a melhor dentre as opções.

Você pode conferir o código final aqui.

O que você vai precisar

• Uma conta na AWS;
• AWS 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.

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:

{
  "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.

rm -rf src

Criando uma aplicação Next.js

Para criar a aplicação vamos usar o create-next-app, que vai gerar uma aplicação do Next.js padrão. Nossa aplicação ficará no diretório src.

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:

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:

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.