Build with Next.js
Create a Next.js application from an Azion template, a GitHub repository, or the Azion CLI, and deploy it to an Azion domain.
You can build a Next.js application and deploy it on Azion from a template in Azion Console, from a GitHub repository, or from a project you create with the Azion CLI. The result is the same on each route: an Azion domain that serves the application.
The build splits a Next.js application in two. Static assets go to a storage bucket, and a function runs the rest of the application. An application routes each request to one of them, and Next.js can also render pages on the server. For the Next.js versions and features Azion supports, refer to Azion and Next.js compatibility. For the APIs the function can call, refer to Web APIs and Azion Runtime and Node.js API compatibility. For the other frameworks Azion builds, refer to Frameworks compatibility.
Choose a route below. The prerequisites and the deploy procedure change with it.
Prerequisites
- An Azion account. To create one, refer to Create an account.
- Access to Azion Console. To sign in, refer to How to access Azion Console.
- A GitHub account. The template form connects it when it asks for it.
Next.js templates
Each template is a complete Next.js project. The Console route deploys one of them:
| Template | Use |
|---|---|
| Next JS Static Boilerplate (14.1.4) | Static/SPA |
| Cosmic - Simple Next.js Blog | Blog |
| Cosmic - Agency Website | Agency/Starter |
| Space Jelly Shop | E-commerce |
| Nextal - (NextJS, Typescript, Tailwind) | Starter project |
The linked templates have a guide of their own. For more information on the others, refer to Azion Marketplace. In the CLI, Nextal belongs to the OpenNextJS preset and the other four to the Next preset; azion init lists the templates of each preset in its own picker.
Deploy the application
Every route builds the project and creates the Azion resources that serve it. Follow the panel of your route:
To create the project, run azion init with a name. In the first picker, select Next. In the second, select a template:
With -y, the command installs the dependencies. With --auto, it does not ask about a local development server or a deploy. Without these options, it asks the questions that Azion CLI init lists. With the Next JS Static Boilerplate (14.1.4) template, the command prints:
Some templates ask for a value from another service before the dependencies install. Cosmic - Agency Website asks Type the Bucket Slug of your Cosmic project, and the OpenNextJS template Next.js Multi-tenant Starter Template asks Type your Stack Auth Project ID. Have the value ready. If init stops at that question, the project has no dependencies, and azion build stops with Please install dependencies using pnpm.
The project is in the my-app folder. Its azion.config.cjs sets the next preset, uploads .edge/next-build-assets to a storage bucket that workloads can only read, and creates a function from ./functions/handler.js. Two rules deliver paths under /_next/static/ and static file types from the bucket, and a third rule runs the function. For every setting in that file, refer to azion.config.js.
To build the application, change to the project folder and run azion build:
The command runs the Next.js build through Azion Bundler with the next preset, and then adapts its output for Azion:
If you selected OpenNextJS in the preset picker, the build runs through the @aziontech/opennextjs-azion adapter. That project’s azion.config.cjs uploads ./.edge/assets to a bucket that workloads can read and write, and creates the function from ./functions/worker.js. The first build asks to create an open-next.config.ts file. Run azion build in an interactive terminal and answer y:
To deploy the application, run azion deploy in the project folder:
The command uploads the project and opens the Console page that tracks the deploy. If the browser does not open, use the page URL the command prints. At the end, the command prints the URL of the application’s domain. For the full output and every flag, refer to Azion CLI deploy.
To run the application on your machine first, refer to Azion CLI dev. For a Next.js project that already exists, run azion link in its folder and select the next preset, as Azion CLI link describes.
Check the application
Every route returns a URL for the application’s Azion domain, in the form https://xxxxxxxxxx.map.azionedge.net. On the Console routes, the deploy page shows it. On the CLI route, azion deploy prints it at the end. Open the URL in a browser to see the Next.js application.
The first deploy can take several minutes to answer from every location; later deploys take about two minutes. A location that does not have the application yet answers with a 404 page that reads There's nothing here yet. If you get that page, wait and open the URL again.