--- name: azion-build-with-next-js description: >- Create a Next.js application from an Azion template, a GitHub repository, or the Azion CLI, and deploy it to an Azion domain. --- # Build with Next.js 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](/en/documentation/devtools/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](/en/documentation/platform/functions/) runs the rest of the application. An [application](/en/documentation/platform/applications/) 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](/en/documentation/devtools/runtime/frameworks/nextjs-compatibility/). For the APIs the function can call, refer to [Web APIs](/en/documentation/devtools/runtime/api-reference/javascript/) and [Azion Runtime and Node.js API compatibility](/en/documentation/devtools/runtime/node/). For the other frameworks Azion builds, refer to [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/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](/en/documentation/fundamentals/creating-account/). **Console** - Access to Azion Console. To sign in, refer to [How to access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/). - A GitHub account. The template form connects it when it asks for it. **GitHub** - Access to Azion Console. To sign in, refer to [How to access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/). - A GitHub account. - A GitHub repository with a Next.js project. **CLI** - The Azion CLI, installed and logged in. To set it up, refer to [Azion CLI quickstart](/en/documentation/devtools/cli/quickstart/). - Node.js 18 or later, with npm. - A terminal and a code editor. --- ## 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)](/en/documentation/guides/application-development/frameworks/nextjs-static-boilerplate/) | Static/SPA | | [Cosmic - Simple Next.js Blog](/en/documentation/guides/application-development/frameworks/cosmic-simple-next-blog/) | Blog | | Cosmic - Agency Website | Agency/Starter | | [Space Jelly Shop](/en/documentation/guides/application-development/frameworks/next-js-ecommerce-collection/) | E-commerce | | [Nextal - (NextJS, Typescript, Tailwind)](/en/documentation/guides/application-development/frameworks/nextal/) | Starter project | The linked templates have a guide of their own. For more information on the others, refer to [Azion Marketplace](/en/documentation/platform/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: 1. **Open the templates** Access [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Search for the Next.js templates** In **Search by name, framework, or keyword**, enter `Next`. 3. **Select the template to deploy** 4. **Connect your GitHub account** If the form shows **GitHub Connection**, select **Connect with GitHub** and install the [Azion GitHub App](/en/documentation/guides/application-development/automation/azion-github-app/). 5. **Select a Git Scope** In **Git Scope**, select the scope for the template. 6. **Fill in the settings the template asks for** 7. **Select Deploy** 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. **GitHub** To deploy a Next.js project from your GitHub repository: 1. **Open Import from GitHub** Access [Azion Console](https://console.azion.com/) > **Create** > **Import from GitHub**. 2. **Select the import card** In the **Import from GitHub** tab, select the card. The **Import from GitHub** page opens. 3. **Connect your GitHub account** If your GitHub account is not connected yet, select **Connect with GitHub** in **GitHub Connection**. 4. **Select the repository** Select a **Git Scope**, and then select the **Repository** with the Next.js project. 5. **Name the application** In **General**, enter an **Application Name**. The field starts with the repository name. The storage bucket and the function get the same name. 6. **Select the Next.js preset** Set **Preset** to *Next.js*. 7. **Set the root directory** In **Root Directory**, keep `/` if the Next.js project is at the root of the repository. 8. **Enter the install command** In **Install Command**, enter `npm install`. 9. **Select Deploy** The deploy page opens. Its title is `Deploy:` and the application name, and the **Deploy Log** shows the build. A successful deploy shows **Successfully created!** and the URL of the domain. The form also has a **Variables** section. For it and for every other field, refer to [Import a project from GitHub](/en/documentation/guides/application-development/automation/import-an-existing-project-from-github/). **CLI** To create the project, run `azion init` with a name. In the first picker, select *Next*. In the second, select a template: ```bash azion init --name my-app --auto -y ``` 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](/en/documentation/devtools/cli/init/) lists. With the *Next JS Static Boilerplate (14.1.4)* template, the command prints: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: Next ? Choose a template: [Use arrows to move, type to filter] > Cosmic - Agency Website Cosmic - Simple Next.js Blog Next JS Static Boilerplate (14.1.4) Next Node Pages Simple Ecommerce NextJS Space Jelly Shop ? Choose a template: Next JS Static Boilerplate (14.1.4) Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies ... (7 more lines) added 389 packages, and audited 390 packages in 25s 157 packages are looking for funding run `npm fund` for details ... (10 more lines) … [Azion] [Build] › ℹ info Using preset: next [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-app/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your application my-app was initialized successfully ``` 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](/en/documentation/devtools/cli/azion-config-js/). To build the application, change to the project folder and run `azion build`: ```bash cd my-app azion build ``` The command runs the Next.js build through Azion Bundler with the `next` preset, and then adapts its output for Azion: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset next … [Azion] [Build] › ℹ info Using preset: next [Azion] [Pre-Build] › ℹ info Starting pre-build... [Azion] [Pre-Build] › ℹ info Starting Next.js build process ... ... (70 more lines) [Azion] [Pre-Build] › ℹ info Cleaning files ... [Azion] [Pre-Build] › ℹ info Starting Next.js static build process... [Azion] [Pre-Build] › ℹ info Detected Next.js version: 14.2.35 [Azion] [Pre-Build] › ℹ info Adapting Next.js build output... [Azion] [Pre-Build] › ✔ success Next.js build adaptation completed successfully. [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "next" preset. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-app/.edge/manifest.json Your Application was built successfully ``` 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`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset opennextjs … [Azion] [Build] › ℹ info Using preset: opennextjs [Azion] [Pre-Build] › ℹ info Starting pre-build... … ┌────────────────────────┐ │ OpenNext — Azion build │ └────────────────────────┘ ? Missing required `open-next.config.ts` file, do you want to create one? (Y/n) › true✔ Missing required `open-next.config.ts` file, do you want to create one? (Y/n) · true ✅ Created `open-next.config.ts` file successfully. ... (100 more lines) [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using preset default entry: .open-next/worker.js … Reparsing as ES module because module syntax was detected. This incurs a performance overhead. To eliminate this warning, add "type": "module" to /my-app/package.json. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-app/.edge/manifest.json Your Application was built successfully ``` To deploy the application, run `azion deploy` in the project folder: ```bash azion deploy ``` 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](/en/documentation/devtools/cli/deploy/). To run the application on your machine first, refer to [Azion CLI dev](/en/documentation/devtools/cli/dev-command/). For a Next.js project that already exists, run `azion link` in its folder and select the `next` preset, as [Azion CLI link](/en/documentation/devtools/cli/link-command/) 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. --- ## Next steps - [Next.js versions](/en/documentation/devtools/runtime/frameworks/nextjs-compatibility.md): Check the Next.js versions and features Azion supports. - [Azion CLI deploy](/en/documentation/devtools/cli/deploy.md): See the full deploy output and the flags that change a deploy. - [Import a project from GitHub](/en/documentation/guides/application-development/automation/import-an-existing-project-from-github.md): Set every field of the GitHub import, variables included. - [azion.config.js](/en/documentation/devtools/cli/azion-config-js.md): Change the bucket, the function, and the rules the build generates.