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.jsPre-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
Contributors
