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

Next.js

  1. About Next.js
  2. Pre-rendering
  3. Azion and Next.js
  4. See also

About Next.js

Next.js is a flexible React framework that helps you to build fast and modern applications. It can be used to solve some application requirements such as:

  • Routing
  • Data Fetching
  • Integrations

Next.js allows you to use static-generation on a per-page basis, through Incremental Static Regeneration (ISR), without having to rebuild the entire application. That means you can enjoy the benefits of static and still be able to scale.

A page, in Next.js, is a React Component inside a file. This file can be in any of the following extensions:

  • .js
  • .jsx
  • .ts
  • .tsx

Every page has an associated route based on its file name.

Example:

Let’s say you create pages/azion.js exporting a React component.

  export default function Azion() {
    return <div>The easiest way to build, deliver, observe and secure modern applications.</div>
  }

The page will be accessible at /azion:

pages/
    azion.js

Pre-rendering

Next.js generates HTML for each page in advance, relieving client-side Javascript of this burden. As a consequence, this pre-rendering can help your application have a better performance and Search Engine Optimization (SEO).

Pre-rendering forms

  • Static Generation: during build time, the HTML is generated and reused on each request.
  • Server-side Rendering: the HTML is generated on each request.

Static HTML Export

You can export your Next.js application to static HTML, which doesn’t need a Node.js server for rendering.

To use next export, you have to update your build script in your package.json file:

  "scripts": {
    "build": "next build && next export"
  }

To dive deeper into the Next.js world, read the Next.js documentation

Azion and Next.js

To create a Next.js application on the Azion Platform you need:

  • An Amazon S3 bucket on Amazon Web Services (AWS) with write and read permissions.
  • An account on the Azion platform with Edge Functions enabled.
  • The Node.js runtime environment, version 16.x or higher, installed in a build environment.
  • The latest Azion CLI version installed.

See how to have a Next.js project up and running on the Azion platform on Creating a function on Azion using the Next.js framework.

Note: currently, only Static HTML Export Next.js use cases are supported by the Azion Platform.

See also