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

site

doc

blog

success stories

Creating a function on Azion using the Next.js framework

When building a modern application, there are some issues to consider such as interface, infrastructure, performance, and so on. The Next.js1 framework is a flexible structure based on React® 2 JavaScript library that provides tools for building fast web applications.

Visit the React library and Next.js framework sites for more information.

Why use Next.js?

The Next.js framework provides the additional structure, features, and optimizations needed by your application. In addition, it allows you to integrate a wide variety of third-party tools and solutions.

How does Next.js work?

The Next.js framework pre-renders each page by default, which means the HTML is generated in advance on a server. This process frees the user’s device from rendering the entire page using the JavaScript3 programming language.

See how to install, configure, and publish a web application on Azion using the Next.js framework:

  1. Prerequisites
  2. Node.js installation
  3. Compiling a Next.js project
  4. Configuring a Next.js application on Azion
  5. Publishing a Next.js application on Azion

1. Prerequisites

To create a web application on Azion’s platform with the Next.js framework, you need:

  • An Amazon S34 bucket on Amazon Web Services4 (AWS) with write and read permissions.
  • An account on the Azion platform with Edge Functions enabled.
  • The Node.js5 runtime environment, version 16.x or higher, installed in a build environment.
  • Azion CLI installed.
  • A Next.js framework project with Static HTML Export.

To install the Azion CLI, visit its reference documentation page.

Note: only these Next.js framework use cases are currently supported.

2. Node.js installation

You can download Node.js from its official website or with the Node Version Manager tool (NVM). After downloading the file, install the Node.js runtime environment on your computer following the instructions on the website.

Visit the NVM open-source project in the NVM repository for more information.

Note: be sure to use version 16.x or higher of Node.js. You also need permission to install global packages with Node.js npm package manager on your operating system.

3. Compiling a Next.js project

Make sure that all of your Next.js project’s dependencies are installed and that it’s statically compiled.

Visit the reference documentation for more details on creating a new project with the Next.js framework.

To get started, clone your Git®6 or use the Create Next App command to start a project using a template:

npx create-next-app nextjs-azion --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Visit the Git version control system official website and refer to their support documentation for more information.

Enter the application directory and follow the steps in the next topic.

Tip: the folder containing the Next.js project can be located anywhere you prefer, and it will be the folder of your web application using the Next.js framework.

You should always run the next commands in the directory of your web application with the Next.js framework project.

4. Configuring a Next.js application on Azion

To configure and publish a web application with the Next.js framework on Azion’s platform, follow these steps:

  1. Create a Personal Token in the Real-Time Manager (RTM).

    Note: you can use a Personal Token that already exists on the Azion platform. If you need to create a new one, go to Account Menu > Personal Tokens or go to reference documentation for more information.

  2. Configure a Personal Token for use by CLI commands with the command:

    azioncli configure --token azionxxxxxxxxxxx

    This command configures your Personal Token for use with CLI commands. A token is a random string of characters with the form azionxxxxxxxxxxx.

  3. Run the following command inside the application folder:

    azioncli webapp init --name "nextjs-azion" --type nextjs

    This command installs all the libraries and resources needed to run the Next.js framework on the Azion platform. Also, it creates a directory called azion in the web application folder.

    To verify the creation of the azion folder, run the ls command.

  4. Edit the azion/webdev.env file directly from the terminal:

    nano ./azion/webdev.env

    Visit the text editor website nano for more information and access its documentation.

    The nano text editor will open in your terminal with two lines relating to the keys of your Amazon S3 bucket:

      AWS_ACCESS_KEY_ID=
      AWS_SECRET_ACCESS_KEY=
    
  5. Using the arrow keys on your keyboard, type the “AWS_ACCESS_KEY_ID=” and “AWS_SECRET_ACCESS_KEY=” lines in the respective keys for your Amazon S3 bucket in your AWS account.

  6. After entering the keys, press CTRL + o and then ENTER or RETURN to save.

  7. Press the CTRL + x keys to exit the text editor and return to the terminal.

    Warning: make sure you don’t version your credentials directly into your files for security reasons. You can use your software versioner’s VCS SECRETS feature for this purpose.

  8. Open the kv.json file for editing with the following command:

    nano kv.json

    The command response is a JSON file with content similar to the one shown below:

     {
       "kv": {
         "bucket": "azion-nextjs",
         "region": "us-east-1",
         "path": "__static_content"
     }
    

    Visit the JSON format website for more information.

  9. Edit the file by changing the bucket, region, and path keys according to your Amazon S3 bucket settings.

  10. Save the file by pressing CTRL + o and ENTER or RETURN.

  11. Return to the terminal by pressing the CTRL + x keys.

  12. Make sure you have installed all the project’s local dependencies with the npm install or yarn install commands.

  13. Configure your KV Storage.

  14. Run the following command:

    azioncli webapp build

    The CLI will build your application.

Note: currently, only Static HTML Export Next.js use cases are supported.

5. Publishing a Next.js application on Azion

After building your web application using the Next.js framework, the next step is to publish it to RTM.

To publish your web application, follow these steps:

  1. Run the command:

    azioncli webapp publish

    CLI response:

     ...
     ...
     ...
     Your Domain name: <edge_application_id>.map.azionedge.net
    

Note: publishing a web application via RTM or CLI is not an instantaneous process. There is a time to propagate and configure the application in Azion’s edge locations. It may be necessary to wait a few minutes for the URL to be activated and the application to be effectively displayed in the browser.

  1. Access your application through the URL <edge_application_id>.map.azionedge.net

Done! Your web application using the Next.js framework is now available on Azion’s platform!

To verify the address of the newly created domain, access the menu Products Menu > Domains on the Azion website. Other settings created by the publication can also be viewed in Real-Time Manager.


Trademarks

  1. Next.js is a registered trademark of Vercel, Inc. in the USA.
  2. React is a registered trademark of Meta Platforms, Inc. in the USA.
  3. JavaScript is a registered trademark of Oracle America, Inc. in the USA.
  4. Amazon Web Services, AWS, and Amazon Simple Storage Service (Amazon S3) are trademarks of Amazon.com, Inc. or its affiliates.
  5. Node.js is a registered trademark of the OpenJS Foundation® in the US and/or other countries.
  6. Git and the Git logo are either registered trademarks or trademarks of Software Freedom Conservancy, Inc., corporate home of the Git Project, in the United States and/or other countries.

All rights reserved.


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