# Frameworks Compatibility | Next.js

import DocButton from '~/components/webkit/DocButton.vue';

## About Next.js

Next.js is a powerful framework for building fast, scalable, and modern web applications. It supports static site generation, server-side rendering, API routes, and more, making it a popular choice for both static and dynamic sites. Next.js offers a flexible file-based routing system, built-in image optimization, and a rich plugin ecosystem.

**Key features**:

- Hybrid static & server rendering
- File-system based routing
- API routes for backend logic
- Built-in image optimization
- Incremental static regeneration
- TypeScript support
- Rich plugin and middleware ecosystem
- Strong community and enterprise support

Next.js also allows for Server Side Rendering (SSR) on the Azion Web Platform. For more information about Next.js compatibility [visit our documentation](/en/documentation/devtools/azion-edge-runtime/compatibility/nextjs/).

## Available Templates

| Template name | Use case | Details |
|:-------------|:---------|:-----|
| Next.js Static Boilerplate | Static/SPA | <DocButton href="/en/documentation/products/templates/nextjs-static-boilerplate/" label="Learn more" kind="secondary" size="medium" /> |
| Cosmic Next Blog | Blog | <DocButton href="/en/documentation/products/templates/cosmic-nextjs-blog/" label="Learn more" kind="secondary" size="medium" /> |
| Cosmic Agency | Agency/Starter | <DocButton href="/en/documentation/products/templates/cosmic-agency/" label="Learn more" kind="secondary" size="medium" /> |
| Space Jelly Shop | E-commerce | <DocButton href="/en/documentation/products/templates/space-jelly-shop/" label="Learn more" kind="secondary" size="medium" /> |
| Nextal | Starter | <DocButton href="/en/documentation/products/templates/nextal/" label="Learn more" kind="secondary" size="medium" /> |

### Deploying a template using Azion Console

1. Login to [Console](https://console.azion.com).
2. Click the **\+ Create** button.
3. Click the **Templates** section.
4. Choose the desired Next.js template.
5. Connect your GitHub Account.
6. Choose a name for your application.
7. Click **Deploy**.

### Deploying an existing project using Import from GitHub

2. In [Console](https://console.azion.com) Click the **\+ Create** button.
3. Select **Import from Github**.
4. Select your repository.
5. Choose an application name.
6. Select the **Next.js Preset**.
7. Input the install command:

```
npm install
```
8. Click **Deploy**.

### Deploying a template using Azion CLI

You can use the Azion CLI to deploy a template.

:::tip
Visit our [CLI guide](/en/documentation/products/azion-cli/overview/#installing-azion-cli) for detailed installation instructions.
:::

1. Initialize the project:

```sh 
  azion init
```

2. Give your project a name, or press `enter` to accept the given suggestion:

```sh 
? Your application's name:  (black-thor)
```

3. Choose the Next.js preset: 

```sh 
? Choose a preset:  [Use arrows to move, type to filter]
  Angular 
  Astro 
  Docusaurus
  Eleventy
  Emscripten
  Gatsby
  Hexo
  Hono
  Hugo
  Javascript
  Next.js
  Preact
> Next.js
  ...
```

4. Choose one of the available templates.

5. With the template fetched and configured, you can choose to start a local development server.

```sh 
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](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/#answering-yes-to-local-dev).
- [If you chose not to have a local development server running](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/#answering-no-to-local-dev).

### Answering `yes` to local dev

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

```sh 
  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:

```sh
Your Application was built successfully
[Azion] [Server] › ✔  success   Function running on port 0.0.0.0:3000, url: http://localhost:3000
```

2. On the browser, go to `http://localhost:3000/` and you can see your Next.js 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:

```sh
cd [your-project-name] 
```

3. Deploy the project: 

```sh
azion deploy
```

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

:::note 
Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn't open automatically, just click on the provided link.
::: 

After the deployment is complete, you'll receive a domain to access your Next.js 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

After indicating you don't want to have a local server running, deploy the Next.js project to the edge.

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

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

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

```sh 
  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 Web Platform.

:::note 
Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn't open automatically, just click on the provided link.
::: 
After the deployment is complete, you'll receive a domain to access your Next.js project on the Azion 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`.

### Local project deploy with Azion CLI

You can use the Azion CLI to deploy a project compatible with our [available frameworks](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/).

:::tip
Visit our [CLI guide](/en/documentation/products/azion-cli/overview/#installing-azion-cli) for detailed installation instructions.
:::

1. Inside your existing project folder, use the command below to link your project to an application:

```shell
azion link
```

2. Choose the Next.js preset.

3. The CLI will guide you through the rest of the process. In less than five minutes, your application can be up and running on the Azion Web Platform.