DEV Community

Cover image for Next.js com serverless-stack
Rafael Franco
Rafael Franco

Posted on

Next.js com serverless-stack

#react #serverless #serverlessstack #nextjs

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

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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,
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)