# Next.js versions Next.js support on Azion varies by Next.js version and by feature. Each table marks a feature 🟢 supported, 🟡 partially supported, or 🔴 not supported. To build and deploy a Next.js application with the Azion CLI, refer to [Build with Next.js](/en/documentation/guides/application-development/frameworks/next/). > **Note** > > For more examples, refer to the [Azion Bundler repository](https://github.com/aziontech/bundler/). --- ## OpenNext The [`@aziontech/opennextjs-azion`](https://www.npmjs.com/package/@aziontech/opennextjs-azion) adapter deploys Next.js apps to [Functions](/en/documentation/platform/functions/) with the [Node.js "runtime" from Next.js](https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes). ### Get started How you start with the adapter depends on whether the Next.js app exists. #### New apps To create a Next.js app configured to run on Azion with `@aziontech/opennextjs-azion`, run: ```bash npx create-next-app@14.2.4 my-next-app --use-npm && cd my-next-app && npm install @aziontech/opennextjs-azion@latest ``` #### Existing Next.js apps To use `@aziontech/opennextjs-azion` with an existing Next.js app, refer to [Get Started With OpenNext](/en/documentation/guides/application-development/frameworks/get-started/). ### Supported Next.js versions The adapter supports all minor and patch versions of Next.js 15, and the latest minor version of Next.js 14. To report a bug or contribute code, use the [opennextjs-azion issues](https://github.com/aziontech/opennextjs-azion/issues). ### Supported Next.js features The adapter supports these Next.js features: | Feature | Support | Comments | | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------- | | [App Router](https://nextjs.org/docs/app) | 🟢 | | | [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) | 🟢 | | | [Dynamic routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) | 🟢 | | | [Static Site Generation (SSG)](https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default) | 🟢 | | | [Server-Side Rendering (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) | 🟡 | Node middleware, introduced in Next.js 15.2, is not supported | | [Image Optimization](https://nextjs.org/docs/app/building-your-application/optimizing/images) | 🔴 | | | [Partial Prerendering (PPR)](https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering) | 🟢 | | | [Pages Router](https://nextjs.org/docs/pages) | 🟢 | | | [Incremental Static Regeneration (ISR)](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration) | 🟢 | | | [Support for after](https://nextjs.org/blog/next-15-rc#executing-code-after-a-response-with-nextafter-experimental) | 🟢 | | | [Composable Caching](https://nextjs.org/blog/composable-caching) | 🔴 | `'use cache'` | > **Note** > > A function has a maximum size of 50 MB. Only the compressed (gzipped) size of the deployment package counts toward this limit, so check that size after you build the project. For more information, refer to [Functions limits](/en/documentation/platform/functions/limits/). ### Starter projects To create a Next.js app for Azion, start from one of these projects: - [Next.js + TypeScript + Tailwind Template](https://github.com/aziontech/azion-samples/tree/dev/templates/opennextjs/nextal-next-typescript-tailwind): a template for Next.js apps on Functions. - [Node Playground (Next.js 13)](https://github.com/aziontech/bundler-examples/tree/main/examples/nextjs/node-playground-13): an example that runs Next.js 13 in a Node.js environment on Azion. Each repository shows how to configure a Next.js app to run on Azion, and each one can be the starting point of your own project. ### Known issues The adapter has two known issues: the TypeScript configuration and local development. #### TypeScript configuration Your `tsconfig.json` must include this setting: ```json "moduleResolution": "bundler" ``` Without this setting, the build or the application at runtime can fail. The `open-next.config.ts` file also has a known issue with ESM. An older project, or a project that depends on a specific TypeScript version or a custom configuration, may need one of two changes: - Reconfigure the project, for example with `moduleResolution` set to `bundler`. - Exclude `open-next.config.ts` in `tsconfig.json`. To exclude the file, add this line to your `tsconfig.json`: ```json "exclude": ["node_modules", "open-next.config.ts"] ``` Whether the exclusion works depends on your project setup. In some cases, the build proceeds, but errors still occur, especially in a project that uses `_app.mdx` or other advanced configurations. This applies most to projects that were not tested with these setups. Issues can also occur in other environments. #### Local development Some applications use Node.js or Web Standard APIs that Azion's local development environment does not fully support. The deployed Azion Runtime can still make these APIs available. > **Tip** > > If your application does not work as expected during local development, deploy it to Azion before you troubleshoot further. The deployed application can work correctly. --- ## Next.js 14.x.y For Next.js 14.x.y, these features are supported: | Feature | Support | Comments | | ------------ | ------- | -------- | | Static Pages | 🟢 | | | SSG | 🟢 | | --- ## Azion Runtime The Azion Runtime support for Next.js changes with the Next.js version. ### Versions 12.2.x and 12.3.x For Next.js 12.2.x and 12.3.x, the Azion Runtime supports these Pages Router features: | Pages Router support | Support | Comments | | -------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | | Static Pages | 🟢 | | | SSR | 🟢 | | | SSG | 🟢 | | | 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, and 13.5.x For these Next.js 13 versions, the Azion Runtime supports the Pages Router and the App Router. Pages Router features: | Pages Router support | Support | Comments | | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | Static Pages | 🟢 | | | SSR | 🟢 | | | SSG | 🟢 | | | 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 features: | 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 The Node Runtime table covers Next.js 12.3.x. ### Version 12.3.x For Next.js 12.3.x, the Node Runtime supports these Pages Router features: | 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 **React** framework for building applications. It handles these application requirements: - Routing - Data fetching - Integrations With **Incremental Static Regeneration (ISR)**, Next.js applies static generation page by page, without a rebuild of the entire application. The application keeps the benefits of static pages and can still scale. In Next.js, a **page** is a **React component** inside a file with one of these extensions: - `.js` - `.jsx` - `.ts` - `.tsx` Every page has a *route* based on its file name. For example, the file `pages/azion.js` exports this React component: ```javascript export default function Azion() { return
The easiest way to build, deploy, observe and secure modern applications.
} ``` The page is available at `/azion`: ```text pages/ azion.js ``` --- ## Pre-rendering Next.js generates the HTML of each page in advance, so client-side JavaScript does not have to. Pre-rendering can improve the performance and the Search Engine Optimization (SEO) of an application. ### Pre-rendering forms Next.js pre-renders a page in one of two forms: - Static Generation: the HTML is generated at build time and reused on each request. - Server-side Rendering: the HTML is generated on each request. For more information, refer to the [Next.js documentation](https://nextjs.org/docs/getting-started). --- ## Related resources - [Build with Next.js](/en/documentation/guides/application-development/frameworks/next.md): Create a Next.js application from a template, a GitHub repository, or the Azion CLI, and deploy it. - [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility.md): The other frameworks Azion builds, and the guide for each one. - [Azion Runtime](/en/documentation/devtools/runtime.md): The runtime that runs your Next.js function, and the APIs it offers. - [Node.js APIs](/en/documentation/devtools/runtime/node.md): The Node.js modules the Azion Runtime supports, and how each one behaves.