How to build with Next.js

Requirements

Before getting started, you must have:


Initializing a Next project on the edge

  1. Initialize the project:
Terminal window
azion init
  1. Accept the suggested name to your project, or enter the name you choose:
Terminal window
(Hit enter to accept the suggested name in parentheses) Your project's name: (dynamic_caligari)

Output:

Terminal window
Getting templates available
  1. Choose the Next template:
Terminal window
Getting templates available? Choose a template for your project: (Use arrow keys)
Angular
Astro
Hexo
❯Next
React
Vue
Vite
  1. Choose the template:
Terminal window
? Choose the template: (Use arrow keys)
Next 13 - Static (export)
Next 13 - Azion Runtime (App Router)
Next 13 - Azion Runtime (Pages Router)
Next 12 - Node Runtime (Edge compatible with polyfills)

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

  1. A series of interactions will be prompted, answer them as you prefer.

The following steps are based on the answer you gave when asked about local development.

Answering yes to local dev

  1. Install the project dependencies. Input y when the interaction prompts:
Terminal window
Do you want to install project dependencies? This may be required to start local development server (y/N)

Wait until the installation is complete.

Output:

Terminal window
Your Edge Application was built successfully
[Azion Bundler] [Server] › ✔ success Function running on port http://localhost:3000/
  1. On the browser, go to http://localhost:3000/, and you can now see your Next project running.

Deploying the project

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:
Terminal window
cd [your-project-name]
  1. Deploy the project:
Terminal window
azion deploy
  1. 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.

Answering no to local dev

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:
Terminal window
Do you want to deploy your project? (y/N)
  1. Install the project dependencies. Input y when the interaction prompts:
Terminal window
Do you want to install project dependencies? This may be required to deploy your project (y/N)
  1. 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.


Compatibility

Go to supported Web Frameworks Go to supported Web APIs Go to node.js support reference

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


Contributors