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.
Prerequisites
Console
- 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:
Console
To deploy a Next.js template from Azion Console:
Access Azion Console > Create > Templates.
In Search by name, framework, or keyword, enter Next.
If the form shows GitHub Connection, select Connect with GitHub and install the Azion GitHub App.
In Git Scope, select the scope for the template.
While the project builds, the deploy page shows the Deploy Log. A successful deploy shows Successfully created!, the URL of the domain, and a Manage button that opens the application.
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.