Azion and Next.js compatibility

Compatibility between different versions of Next.js and Azion Edge Platform.

Next.js 14.x.y

Feature	Support	Comments
Static Pages	🟢
SSG	🟢

Azion Runtime

Versions: 12.2.x, 12.3.x

Pages Router Support	Support	Comments
Static Pages	🟢
SSR	🟢
SSG	🟢
Edge API Routes	🟢
Dynamic Routes	🟢
Middleware	🟡	Features: rewrite, redirect, continue to response, set request header, throw error, set response header, and set response cookie
Next configs	🟡	Features: rewrite before files, rewrite after files, rewrite fallback, redirects, and header definition
i18n routing	🟢

Versions: 13.0.x, 13.1.x, 13.2.x, 13.3.x, 13.4.x, 13.5.x

Pages Router Support	Support	Comments
Static Pages	🟢
SSR	🟢
SSG	🟢
Edge API Routes	🟢
Dynamic Routes	🟢
Middleware	🟡	Features: rewrite, redirect, continue to response, set request header, throw error, return response, set response header, and set response cookie
Next configs	🟡	Features: rewrite before files, rewrite after files, rewrite fallback, redirects, and header definition
i18n routing	🟢
Custom errors	🟢

App Router Support	Support	Comments
App router	🟢	Basic structure, routing, and layouts
Server Components	🟢
Route Handlers	🟢
Dynamic Routes	🟢
Middleware	🟡	Features: rewrite, redirect, continue to response, set request header, throw error, set response header, and set response cookie
Next configs	🟡	Features: rewrite before files, rewrite after files, rewrite fallback, redirects, and header definition
i18n routing	🟢
Custom errors	🟢

Node Runtime

Versions: 12.3.x

Pages Router Support	Support	Comments
Static Pages	🟢
SSR	🟢
SSG	🟢
API Routes	🟢
Dynamic Routes	🟢
Next configs	🟡	Features: rewrite before files, rewrite after files, rewrite fallback, redirects, and header definition
i18n routing	🟢
Custom errors	🟢

About Next.js

Next.js is a flexible React framework that helps you to build fast and modern applications. It can be used to solve some application requirements such as:

Routing
Data Fetching
Integrations

Next.js allows you to use static generation on a per-page basis, through Incremental Static Regeneration (ISR), without having to rebuild the entire application. That means you can enjoy the benefits of static and still be able to scale.

A page, in Next.js, is a React Component inside a file. This file can be in any of the following extensions:

.js
.jsx
.ts
.tsx

Every page has an associated route based on its file name.

Example:

Let’s say you create pages/azion.js exporting a React component.

  export default function Azion() {
    return <div>The easiest way to build, deploy, observe and secure modern applications.</div>
  }

The page will be accessible at /azion:

pages/
    azion.js

Pre-rendering

Next.js generates HTML for each page in advance, relieving client-side Javascript of this burden. As a consequence, this pre-rendering can help your application have better performance and Search Engine Optimization (SEO).

Pre-rendering forms

Static Generation: during build time, the HTML is generated and reused on each request.
Server-side Rendering: the HTML is generated on each request.

To dive deeper into the Next.js world, read the Next.js documentation