1 of 20
2 of 20
3 of 20
4 of 20
5 of 20
6 of 20
7 of 20
8 of 20
9 of 20
10 of 20
11 of 20
12 of 20
13 of 20
14 of 20
15 of 20
16 of 20
17 of 20
18 of 20
19 of 20
20 of 20

doc

How to Build and Publish a Next.js Project with Server-side Rendering (SSR) on the Azion Platform

Next.js and Server-side Rendering (SSR)

Next.js, a flexible framework based on the React library, provides powerful tools for building fast applications.

SSR generates HTML for each request, offering several benefits, including:

  • Improved initial loading performance.
  • Search engine optimization (SEO).
  • Social media sharing.
  • Enhanced user experience.
  • Accessibility and compatibility.
  • Code sharing and performance optimizations.

Next.js SSR Project on the Azion Platform

Requirements

Before getting started, make sure you have:

  • An Azion platform account with Edge Functions enabled.
  • Node.js runtime environment (version 16.x or 18.x) installed in your build environment.
  • The latest version of Azion CLI installed.
  • Next.js installed.

To install Azion CLI, visit the Installing Azion CLI manually page.

Note: currently, the supported Next.js version is 12.

Setting up the Project

  1. Create a new folder for your project:
  mkdir next-js-azion
  1. Access the project folder:
  cd next-js-azion
  1. Inside the project folder, use the following command to create a Next.js project:
  npx create-next-app@12 azion-next-ssr && cd azion-next-ssr && npm i next@12
  1. Open the project directory in your preferred code editor, such as VSCode:
  code .

Configuring Next.js for Azion

  1. Open the next.config.js file in your project’s root directory.
  2. Add the experimental object inside the nextConfig constant:
  const nextConfig = {
    experimental: {
      runtime: 'experimental-edge',
    },
    reactStrictMode: true,
    swcMinify: true,
  }
  module.exports = nextConfig

Building and Publishing the application on the Azion Platform

  1. In the terminal, in your project’s root directory, initialize the Azion Edge Application:
  azioncli edge_applications init
  1. Run the build command:
  azioncli edge_applications build
  1. Publish the application:
  azioncli edge_applications publish

After running the publish command, you’ll receive a domain for accessing your SSR 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, that should be similar to:

https://ala5yasjasdsa0pnm.map.azionedge.net

Didn’t find what you were looking for? Open a ticket.