Comece com o OpenNext

Comece com o OpenNext na Azion: crie ou adapte um app Next.js, configure o cache e o armazenamento para ISR/SSG, desenvolva localmente com o Azion CLI e faça o deploy para produção.

Ver como Markdown

O adaptador @aziontech/opennextjs-azion permite que você faça deploy de apps Next.js na Azion Web Platform. Este guia irá ajudá-lo a configurar um projeto Next.js novo ou existente para a Azion, configurar cache, desenvolver localmente e fazer o deploy para produção.

Pré-requisitos

Criando um novo app Next.js

Para criar um novo app Next.js pré-configurado para a Azion:

npx create-next-app@14.2.4 my-next-app --use-npm
cd my-next-app
npm install @aziontech/opennextjs-azion@latest

Ou use um template inicial:

Apps Next.js existentes

  1. Instale o adaptador Azion:
npm install @aziontech/opennextjs-azion@latest
  1. Configure open-next.config.ts:

Crie ou atualize open-next.config.ts no diretório raiz do seu projeto. Exemplo:

import { defineAzionConfig } from "@aziontech/opennextjs-azion";
export default defineAzionConfig({
// Veja https://www.azion.com/pt-br/produtos/cache/ para opções avançadas
});
  1. Atualize tsconfig.json:

Seu tsconfig.json deve incluir json "moduleResolution": "bundler" . Isto é necessário para o comportamento correto de build e runtime.

Se você encontrar problemas com ESM ou open-next.config.ts, pode ser necessário adicionar:

"exclude": ["node_modules", "open-next.config.ts"]

Veja Problemas Conhecidos para mais detalhes.

  1. Build e Deploy com Azion CLI:
  • azion build: Constrói seu app para a Azion.
  • azion preview: Executa uma pré-visualização local usando o Azion CLI.
  • azion deploy: Faz deploy na Azion Web Platform usando deploy remoto.
    • ou azion deploy --local para fazer deploy na Azion Web Platform usando Deploy Local.
  1. Configure cache e armazenamento:

Veja o Guia de Cache para saber como configurar o Azion Object Storage e Cache para ISR/SSG. Exemplo de configuração Azion:

AzionCache
Definição de tipo para a configuração de cache.

Propriedades:

PropriedadeTipoDescrição
nomestringNome da configuração de cache.
staleness?booleanSe permite conteúdo obsoleto.
queryStringSort?booleanSe organiza parâmetros de string de consulta.
métodos?CacheMethodsMétodos HTTP para cache.
post?booleanSe faz cache de requisições POST.
opções?booleanSe faz cache de requisições OPTIONS.
navegador?BrowserCacheConfigConfigurações de cache para navegador.
navegador.maxAgeSecondsnumber | stringIdade máxima para cache do navegador em segundos.
edge?EdgeCacheConfigConfigurações de cache.
edge.maxAgeSecondsnumber | stringIdade máxima para cache em segundos.
cacheByCookie?CacheByCookieConfigCache por configurações de cookie.
cacheByCookie.option’ignore’ | ‘varies’ | ‘whitelist’ | ‘blacklist’Opção de cache por cookie.
cacheByCookie.list?string[]Lista de cookies para uso em cache.
cacheByQueryString?CacheByQueryStringConfigCache por configurações de string de consulta.
cacheByQueryString.option’ignore’ | ‘varies’ | ‘whitelist’ | ‘blacklist’Opção de cache por string de consulta.
cacheByQueryString.list?string[]Lista de parâmetros de string de consulta para uso em cache.
// azion.config.cjs
module.exports = {
build: { preset: "opennextjs", polyfills: true },
origin: [{ name: "origin-storage-default", type: "object_storage" }],
functions: [{ name: "handler", path: ".edge/worker.js" }],
cache: [
{
name: 'Default Cache',
browser: { maxAgeSeconds: 3600 },
edge: { maxAgeSeconds: 7200 },
},
],
rules: {
request: [
{
name: "Set storage origin for _next/static",
match: "^/_next/static/",
behavior: { setOrigin: { name: "origin-storage-default", type: "object_storage" }, deliver: true },
},
{
name: "Deliver Static Assets",
match: ".(css|js|ttf|woff|woff2|pdf|svg|jpg|jpeg|gif|bmp|png|ico|mp4|json)$",
behavior: { setOrigin: { name: "origin-storage-default", type: "object_storage" }, deliver: true },
},
{
name: "Execute Function",
match: "^/",
behavior: { runFunction: "handler", forwardCookies: true },
},
],
},
};

Desenvolvimento Local

Use o Azion CLI para desenvolvimento local:

azion dev

Isso executa sua aplicação localmente, simulando a plataforma Azion. Veja Solução de Problemas para dicas de depuração e monitoramento de logs.

Implementação

Implemente seu app na Azion Web Platform:

azion deploy

Ou use o Azion CLI para implementar na Azion Web Platform usando implementação local:

azion deploy --local

Melhores práticas e solução de problemas

Algumas APIs do Node.js ou Web podem não ser totalmente suportadas no ambiente de desenvolvimento local da Azion, mas funcionarão em produção. Se você encontrar problemas localmente, tente fazer o deploy antes de tentar uma depuração profunda.

Agora você está pronto para construir, testar e implementar apps Next.js nas Functions Azion!