Deploy de uma aplicação Next.js no S3 da AWS

Introdução#

Provavelmente você já tenha ouvido falar do Next.js, mas caso não tenha, ele é um framework para React que permite criar aplicações SSR (Server Side Rendering), SSG (Static Site Generation) e ISG (Incremental Static Generation). A maioria dos artigos e tutoriais que você encontra na internet sobre Next.js, mostram como fazer o deploy da aplicação na Vercel, mas nem sempre é isso que queremos. Neste artigo vou te mostrar como fazer o deploy de uma aplicação Next.js no S3 da AWS.

Por que fazer o deploy no S3?#

A Vercel é uma ótima plataforma para fazer o deploy de aplicações Next.js, mas pode acontecer da sua empresa não permitir hospedagens por meio de terceiros ou até mesmo o simples fato de você não querer utilizar a Vercel. Neste caso, você pode gerar um build estático e colocá-lo no S3.

Por que NÃO utilizar o S3 para fazer o deploy?#

Apesar do foco desse artigo seja te mostrar como colocar no S3, é bom que você já saiba de antemão as desvantagens de utilizar o S3 para isto. Como o S3 é um serviço de armazenamento de arquivos da AWS, isso quer dizer que você irá gerar todas as páginas na etapa de build e colocará esses arquivos no S3, portanto você deixará de aproveitar algumas funcionalidades do NEXT.

Abaixo alguns pontos que você deve considerar antes de fazer o deploy no S3:

• SSR: Se o seu projeto incluir funções, como por exemplo, getServerSideProps elas não funcionarão, pois o build já terá sido feito e não terá um servidor rodando a aplicação;
• ISG: Caso seu projeto utilize, por exemplo, revalidate para atualizar a página, isso não funcionará, pois nada é gerado no momento do acesso, apenas o no momento do build;
• Muitas páginas: Se o seu projeto tiver muitas páginas, o build pode demorar muito tempo, pois todas as páginas serão geradas de uma vez só e não serão modificadas até o próximo build;

Problema do Next.js com o S3#

Antes de explicar como fazer o deploy, é importante que você entenda o problema que o Next.js tem com o S3. Quando você gera o build da sua aplicação, o Next.js cria uma pasta chamada _next que contém os arquivos referentes a cada página da sua aplicação. Por exemplo, se você tiver uma página chamada pagina1.js e outra chamada pagina2.js, o Next.js irá arquivos estáticos para cada uma das páginas. O problema é que caso você tenha uma página com url dinâmica, por exemplo /posts/[id].js, o S3 não direcionará para a página correta, pois ele não entende que o [id] é um parâmetro da url e tentará buscar por um arquivo com o id informado na url.

Configurando S3#

Vá até o console da AWS, procure pelo serviço S3 e crie um bucket. Após criar o bucket, vá até a aba Propriedades e clique em Hospedagem de site estático. Nesta tela, marque a opção Usar este bucket para hospedar um site estático e informe o nome do arquivo de index e de erro. No meu caso, eu informei index.html para ambos. Após isso, clique em Salvar alterações. Em seguida vá para a página de regras de redirecionamento e adicione a seguinte regra:

[
  {
    "Condition": {
      "HttpErrorCodeReturnedEquals": "404"
    },
    "Redirect": {
      "HostName": "<meu site>",
      "ReplaceKeyPrefixWith": "#!/"
    }
  },
  {
    "Condition": {
      "HttpErrorCodeReturnedEquals": "403"
    },
    "Redirect": {
      "HostName": "<meu site>",
      "ReplaceKeyPrefixWith": "#!/"
    }
  }
]

Com esta configuração você forcará o S3 a redirecionar para o arquivo index.html caso ele não encontre o arquivo solicitado e altere a url incluindo #! para identificar o caminho solicitado, assim basta você configurar a sua aplicação nextjs para identificar URLs neste formato.

Então vamos para a parte do Next.js! Vamos editar o arquivo _app.js e adicionar o seguinte código:

import { useRouter } from 'next/router'

const MyApp = ({ Component, pageProps }) => {
  const router = useRouter()
  const path = (/#!(\/.*)$/.exec(router.asPath) || [])[1]
  if (path) {
    router.replace(path)
  }

  return (
    <Component {...pageProps} />
  )
}

export default MyApp

Pronto! Agora a sua aplicação está devidamente configurada.

Conclusão#

Ao longo deste artigo você aprendeu como fazer o deploy de uma aplicação Next.js no S3 da AWS. Apesar de não ser a melhor opção, é uma simples alternativa para quem não pode ou não quer utilizar a Vercel.

Também é possível realizar deploys mais sofisticados utilizando lambdas para resolver o problema do roteamento, mas isso não será abordado neste artigo.

Referências#