--- name: azion-build-with-nextal description: >- Create a Nextal application from an Azion template or with the Azion CLI, and deploy it to an Azion domain. --- # Build with Nextal You can deploy a Nextal application on Azion from a template in Azion Console or with the [Azion CLI](/en/documentation/devtools/cli/). With either route, the application ends up running on Azion and answering on an Azion domain. Azion runs Nextal as a server-rendered application through the OpenNextJS preset, `opennextjs`. The build writes the static assets to `.edge/assets` and a worker to `.edge/functions/worker.js`. The deploy uploads the assets to a storage bucket and runs the worker as a [function](/en/documentation/platform/functions/). The [application](/en/documentation/platform/applications/) serves `/_next/static/` and static files from the bucket, and runs the function for every other request. For the other frameworks Azion builds, refer to [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility/). --- Choose how you will deploy. The prerequisites and the deploy steps below change with that choice. ## 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. **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, and npm. - A terminal and a code editor. --- ## Nextal templates Nextal is a Next.js starter template that includes TypeScript, Tailwind CSS, and Hero Icons. It organizes its folders by Atomic Design, and it supports dark mode and absolute imports. Its source is in the [azion-samples repository](https://github.com/aziontech/azion-samples/tree/dev/templates/opennextjs/nextal-next-typescript-tailwind). The Console route deploys this template: | Template | Use | | -------- | --------------- | | Nextal | Starter project | For more information on other templates, refer to [Azion Marketplace](/en/documentation/platform/marketplace/). In the CLI route, `azion init` lists Nextal among the templates of the OpenNextJS preset. --- ## Deploy the application Every route builds the Nextal project and creates the resources that run it on Azion. Follow the panel of the route you chose: **Console** To deploy the Nextal template from Azion Console: 1. **Open the templates** Access [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Search for Nextal** In **Search by name, framework, or keyword**, enter `Nextal`. 3. **Select the Nextal template** 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 where the template repository goes. 6. **Fill in the settings the template asks for** 7. **Select Deploy** The deploy page opens, and the **Deploy Log** follows the build. After a successful deploy, **Successfully created!** appears. The page then shows the domain URL and a **Manage** button that opens the application. **CLI** To create the project, run `azion init` with a name. In the first picker, select *OpenNextJS*. In the second picker, select *Nextal - (NextJS, Typescript, Tailwind)*: ```bash azion init --name my-app --auto -y ``` The `-y` option installs the dependencies. The `--auto` option skips the questions about a local development server and a deploy. Without these options, the command asks the questions that [Azion CLI init](/en/documentation/devtools/cli/init/) lists. The two pickers show these entries: ```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: OpenNextJS ? Choose a template: [Use arrows to move, type to filter] > Next.js Multi-tenant Starter Template Nextal - (NextJS, Typescript, Tailwind) Next.js AI Chatbot Next.js Boilerplate Next.js Commerce with Shopify Next.js Live Transcription Next.js Multi-Tenant Paint by Text ``` After the selection, the command fetches the template and installs its dependencies. It ends with `Your application my-app was initialized successfully`. The project is in a `my-app` folder, and its `azion.config` file sets the `opennextjs` preset. For every setting in that file, refer to [azion.config.js](/en/documentation/devtools/cli/azion-config-js/). To build the application, go 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 `opennextjs` preset, and ends with `Your Application was built successfully`. The build needs the dependencies that `azion init` installs; without them, it stops with `Please install dependencies using pnpm`. If the project has no `open-next.config.ts` file, the build asks ``Missing required `open-next.config.ts` file, do you want to create one? (Y/n)``. Run the build in an interactive terminal and answer `y`. The build creates the file and continues. 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. It also prints the URL of that page if the browser does not open. At the end, it 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 before you deploy it, refer to [Azion CLI dev](/en/documentation/devtools/cli/dev-command/). To deploy a Nextal project that already exists, run `azion link` in its folder and select the OpenNextJS preset, as [Azion CLI link](/en/documentation/devtools/cli/link-command/) describes. --- ## Check the site The deploy returns the URL of the application's Azion domain, in the form `https://xxxxxxxxxx.map.azionedge.net`. Azion Console shows it on the deploy page, and `azion deploy` prints it at the end. Open the URL in a browser to see the Nextal application. The first deploy can take several minutes to answer from every location; later deploys take about two minutes. A location that has not received the application yet answers with a `404` page that reads `There's nothing here yet`. If you get that page, wait and request the URL again. --- ## Next steps - [Next.js versions](/en/documentation/devtools/runtime/frameworks/nextjs-compatibility.md): Check which Next.js versions and features run on Azion. - [Build with Next.js](/en/documentation/guides/application-development/frameworks/next.md): Deploy a Next.js project that does not start from Nextal. - [Azion CLI deploy](/en/documentation/devtools/cli/deploy.md): Read the deploy output and the flags that change a deploy. - [azion.config.js](/en/documentation/devtools/cli/azion-config-js.md): Change the bucket, cache, and rules the OpenNextJS preset generates.