# Compatiblidade entre a Azion e o Next.js

Compatibilidade entre diferentes versões do Next.js e a Azion Web Platform.

:::note
 Você pode encontrar exemplos mais detalhados no [repositório Azion Bundler](https://github.com/aziontech/bundler/).
:::

---

## OpenNext

O adaptador [`@aziontech/opennextjs-azion`](https://www.npmjs.com/package/@aziontech/opennextjs-azion) permite que você implemente aplicativos Next.js para [Functions da Azion](https://www.azion.com/pt-br/produtos/edge-functions/) usando o [runtime "de Node.js" do Next.js](https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).

### Introdução

#### Novos aplicativos

Para criar um novo aplicativo Next.js, pré-configurado para executar na Azion usando `@aziontech/opennextjs-azion`, execute:

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

#### Aplicativos Next.js existentes

[Siga o guia aqui](/pt-br/documentacao/produtos/guias/opennext/como-comecar/) para usar [@aziontech/opennextjs-azion](https://www.npmjs.com/package/@aziontech/opennextjs-azion) com um aplicativo Next.js existente.

### Versões do Next.js suportadas

Todos os patch e versões menores do Next.js 15 e o menor patch do Next.js 14 são suportados.

Para ajudar a melhorar a compatibilidade, incentivamos você a [relatar bugs](https://github.com/aziontech/opennextjs-azion/issues) e contribuir com código!

### Recursos do Next.js suportados

| Recurso | Suporte | Comentários |
|---|---|---|
| [App Router](https://nextjs.org/docs/app) | 🟢 | |
| [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) | 🟢 | |
| [Rotas dinâmicas](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) | 🟢 | |
| [Geração de site estático (SSG)](https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default) | 🟢 | |
| [Renderização no lado do servidor (SSR)](https://nextjs.org/docs/app/building-your-application/rendering/server-components) | 🟢 | |
| [Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware) | 🟢 | |
| [Node Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware#runtime) | 🟡 | Foi introduzido no 15.2, mas ainda não é suportado |
| [Otimização de imagem](https://nextjs.org/docs/app/building-your-application/optimizing/images) | 🔴 | |
| [Pré-renderização parcial (PPR)](https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering) | 🟢 | |
| [Pages Router](https://nextjs.org/docs/pages) | 🟢 | |
| [Geração estática incremental (ISR)](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration) | 🟢 | |
| [Suporte para after](https://nextjs.org/blog/next-15-rc#executing-code-after-a-response-with-nextafter-experimental) | 🟢 | |
| [Cache componível](https://nextjs.org/blog/composable-caching) | 🔴 | ('use cache') |

:::note
As Functions da Azion têm um limite máximo de tamanho de 50 MB por função. Após compilar seu projeto, preste atenção ao tamanho comprimido (gzipped) do seu pacote de implementação — apenas o tamanho comprimido conta para esse limite.
Para mais detalhes, consulte a [documentação sobre limites de tamanho para Functions](/pt-br/documentacao/produtos/build/applications/functions/#limites).
:::

### Exemplos

Para criar um novo aplicativo Next.js na Azion, você pode usar os seguintes projetos iniciantes e templates:

#### Projetos iniciantes básicos

- [Template Next.js + TypeScript + Tailwind](https://github.com/aziontech/azion-samples/tree/dev/templates/opennextjs/nextal-next-typescript-tailwind) — um template pronto para uso para construir aplicativos Next.js modernos nas Functions da Azion.
- [Node Playground (Next.js 13)](https://github.com/aziontech/bundler-examples/tree/main/examples/nextjs/node-playground-13) — um exemplo mostrando como executar Next.js 13 em um ambiente Node.js na Azion.

Você pode usar esses repositórios para entender como configurar seu aplicativo Next.js para rodar na Azion, ou como um ponto de partida para seus próprios projetos.

### Problemas conhecidos

#### Configuração TS
- Seu `tsconfig.json` deve incluir a seguinte configuração:
  
```json
"moduleResolution": "bundler"
```
  
 Se isso não estiver configurado, você poderá encontrar problemas durante o processo de build ou execução.

- Existe um problema conhecido com ESM e o arquivo `open-next.config.ts`. Se você tem um projeto mais antigo ou que depende de uma versão específica do TypeScript ou de uma configuração customizada, pode ser necessário:
  - Reconfigurar seu projeto (por exemplo, definindo `moduleResolution: bundler` como acima), **ou**
  - Add the following to your `tsconfig.json`:

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

Se isso funcionará depende da configuração do seu projeto. Em alguns casos, excluir `open-next.config.ts` permite que o build prossiga, mas você ainda pode encontrar erros, especialmente se seu projeto usar funcionalidades como `_app.mdx` ou outras configurações avançadas. Isso é particularmente relevante para projetos que não foram testados com essas configurações, e problemas também podem ocorrer em outros ambientes (como o pacote Cloudflare).

#### Desenvolvimento local

- Algumas aplicações podem usar Node.js ou APIs padrão web que não são totalmente suportadas pelo ambiente de desenvolvimento local da Azion. Entretanto, esses recursos podem estar disponíveis no runtime real da Azion.

:::tip
Se sua aplicação não funcionar como esperado durante o desenvolvimento local, tente implementá-la na Azion antes de continuar a solução de problemas, pois ela pode funcionar corretamente no ambiente implementado.
:::

## Next.js 14.x.y

| Feature | Support | Comments |
|---|---|---|
| Static Pages | 🟢 | |
| SSG | 🟢 | |

---

## Azion Runtime 

### Versões: 12.2.x, 12.3.x

| Suporte Pages Router | Suporte | Comentários |
|---|---|---|
| Static Pages | 🟢 | |
| SSR | 🟢 | |
| SSG | 🟢 | |
| Edge API Routes | 🟢 | |
| Dynamic Routes | 🟢 | |
| Middleware | 🟡 | Funcionalidades: rewrite, redirect, continue to response, set request header, throw error, set response header e set response cookie |
| Next configs | 🟡 | Funcionalidades: rewrite before files, rewrite after files, rewrite fallback, redirects e header definition |
| i18n routing | 🟢 | |

### Versões: 13.0.x, 13.1.x, 13.2.x, 13.3.x, 13.4.x, 13.5.x

| Suporte Pages Router | Suporte | Comentários |
|---|---|---|
| Static Pages | 🟢 | 
| SSR | 🟢 | | 
| SSG | 🟢 | | 
| Edge API Routes | 🟢 | | 
| Dynamic Routes | 🟢 | |
| Middleware | 🟡 | Funcionalidades: rewrite, redirect, continue to response, set request header, throw error, return response, set response header e set response cookie | 
| Next configs | 🟡 | Funcionalidades: rewrite before files, rewrite after files, rewrite fallback, redirects e header definition | 
| i18n routing | 🟢 | | 
| Custom errors | 🟢 | | 

<br />

| Suporte App Router | Suporte | Comentários |
|---|---|--- | 
| App router | 🟢 | Basic structure, routing e layouts| 
| Server Components | 🟢 | | 
| Route Handlers | 🟢 | | 
| Dynamic Routes | 🟢 | |
| Middleware  | 🟡 | Funcionalidades: rewrite, redirect, continue to response, set request header, throw error e set response header e set response cookie |
| Next configs | 🟡 | Funcionalidades: rewrite before files, rewrite after files, rewrite fallback, redirects e header definition  |
| i18n routing | 🟢 | |
| Custom errors | 🟢 | | 

---

## Node Runtime 

### Versões: 12.3.x

| Suporte Pages Router | Suporte | Comentários |
|---|---|---| 
| Static Pages | 🟢 | | 
| SSR | 🟢 | | 
| SSG | 🟢 | | 
| API Routes | 🟢 | | 
| Dynamic Routes | 🟢 | |
| Next configs  | 🟡 | Funcionalidades: rewrite before files, rewrite after files, rewrite fallback, redirects e header definition | 
| i18n routing | 🟢 | | 
| Custom errors | 🟢 | | 

---

## Sobre o Next.js

**Next.js** é um framework **React** que auxilia no desenvolvimento de aplicações rápidas e modernas. Pode ser usado para resolver:

- Routing
- Data Fetching
- Integrações

Com o Next.js, você pode usar geração estática por página, utilizando **Incremental Static Regeneration (ISR)**, sem ter que realizar o processo de `rebuild` na aplicação inteira. Isso significa que você pode aproveitar os benefícios da geração estática e ainda ser capaz de escalar a aplicação.

Uma **página**, em Next.js, é um **componente React** dentro de um arquivo. Esse arquivo utiliza uma das seguintes extensões:

- `.js`
- `.jsx`
- `.ts`
- `.tsx`

Toda página tem uma **rota** associada à ela, baseada no nome do arquivo.

**Exemplo**:

Digamos que você crie `pages/azion.js` exportando um React component.

```js
  export default function Azion() {
    return <div>A maneira mais fácil de construir, implementar, observar e proteger aplicações modernas.</div>
  }
```

A página pode ser acessada em `/azion`:

```js
pages/
    azion.js
```

---

## Pré-renderização 

Com o Next.js, o HTML de cada página é gerado com antecedência, desonerando o lado do cliente deste trabalho. Como consequência, essa pré-renderização ajuda sua aplicação a ter uma performance potencializada e também a ter melhores índices de Search Engine Optimization (SEO).

### Formas de pré-renderização

- Geração estática: durante o processo de `build`, o HTML é gerado e reutilizado em cada requisição.
- Renderização do lado servidor: o HTML é gerado em cada requisição.