• CLI
• Next

Before getting started, you must have:

• An Azion platform account with Edge Functions enabled.
• The latest version of Azion CLI installed.
• Code editor.
• Access to the terminal.
• Node.js ≥ 18.

1. Initialize the project:

  azion init

2. Accept the suggested name to your project, or enter the name you choose:

(Hit enter to accept the suggested name in parentheses) Your project's name:  (dynamic_caligari)

Output:

Getting templates available

3. Choose the Next template:

Getting templates available? Choose a template for your project: (Use arrow keys)
  Angular
  Astro
  Hexo
 ❯Next
  React
  Vue
  Vite

4. Choose the latest version:

? Choose the version: (Use arrow keys)
  12.3.1 (SSR supported)
❯ latest (static supported)

Now, Next’s CLI will follow the process and initialize your Next project.

5. After the initialization is complete, choose the mode deliver:

? Choose the deliver mode:  [Use arrows to move, type to filter]
   Compute
>  Deliver

6. With the template fetched and configured, you can now start a local development server.

Do you want to start a local development server? (y/N)

The following steps are based on the answer you gave.

• If you chose to have a local development server running.
• If you chose not to have a local development server running.

1. Install the project dependencies. Input y when the interaction prompts:

  Do you want to install project dependencies? This may be required to start local development server (y/N)

Add the output inside your next.config.js file:

output: "export"

Your next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: "export"
}

module.exports = nextConfig

Wait until the installation is complete.

Output:

Your Edge Application was built successfully
[Vulcan] [Server] › ✔  success   Function running on port http://localhost:3000/

2. On the browser, go to http://localhost:3000/, and you can now see your Next project running.

When your project is running locally, you’re still able to deploy it to the edge. To do so:

1. Stop the terminal execution with control + c.
2. Access the project folder:

cd [your-project-name]

3. Deploy the project:

azion deploy

4. Wait while the project is built and deployed to the Azion Edge Platform.

After the deployment is complete, you’ll receive a domain to access your Next project on the Azion’s platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided domain, which should be similar to https://xxxxxxx.map.azionedge.net.

Now, after indicating you don’t want to have a local server running, deploy your Next project to the edge.

1. Enter y to the following interaction, indicating you want to deploy the project:

   Do you want to deploy your project? (y/N)

2. Install the project dependencies. Input y when the interaction prompts:

  Do you want to install project dependencies? This may be required to deploy your project (y/N)

3. Wait while the project is built and deployed to the Azion edge platform.

After the deployment is complete, you’ll receive a domain to access your Next project on the Azion’s platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided domain, which should be similar to https://xxxxxxx.map.azionedge.net.

Watch how to build with Next.js on Azion’s YouTube channel:

Contributors