Build with Nextal

Create a Nextal application from an Azion template or with the Azion CLI, and deploy it to an Azion domain.

Last updated

View as Markdown Agent setup

You can deploy a Nextal application on Azion from a template in Azion Console or with the Azion 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. The application 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.

Choose how you will deploy. The prerequisites and the deploy steps below change with that choice.

Prerequisites

  • 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.
  • The Azion CLI installed and logged in. To set it up, refer to Azion 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.

The Console route deploys this template:

TemplateUse
NextalStarter project

For more information on other templates, refer to Azion 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:

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):

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 lists. The two pickers show these entries:

Text
01? Choose a preset: [Use arrows to move, type to filter]
02> AI Studio
03 Angular
04 Astro
05 Docusaurus
06 Eleventy
07 Emscripten
08 Gatsby
09 Hexo
10 Hono
11 Hugo
12 Javascript
13 Jekyll
14 Next
15 Nuxt
16 OpenNextJS
17 Preact
18 Qwik
19 React
20 Rustwasm
21 Stencil
22 Svelte
23 Typescript
24 Vitepress
25 Vue
26 Vuepress
27? Choose a preset: OpenNextJS
28? Choose a template: [Use arrows to move, type to filter]
29> Next.js Multi-tenant Starter Template
30 Nextal - (NextJS, Typescript, Tailwind)
31 Next.js AI Chatbot
32 Next.js Boilerplate
33 Next.js Commerce with Shopify
34 Next.js Live Transcription
35 Next.js Multi-Tenant
36 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.

To build the application, go to the project folder and run azion build:

Shell
01cd my-app
02azion 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:

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.

To run the application on your machine before you deploy it, refer to Azion CLI dev. To deploy a Nextal project that already exists, run azion link in its folder and select the OpenNextJS preset, as Azion CLI link describes.

To deploy the Nextal template from Azion Console:

Open the templates

Access Azion Console > Create > Templates.

Search for Nextal

In Search by name, framework, or keyword, enter Nextal.

Select the Nextal template
Connect your GitHub account

If the form shows GitHub Connection, select Connect with GitHub and install the Azion GitHub App.

Select a Git Scope

In Git Scope, select the scope where the template repository goes.

Fill in the settings the template asks for
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.

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 versionsCheck which Next.js versions and features run on Azion.Build with Next.jsDeploy a Next.js project that does not start from Nextal.Azion CLI deployRead the deploy output and the flags that change a deploy.azion.config.jsChange the bucket, cache, and rules the OpenNextJS preset generates.