Next.js CDN Support with Asset Prefix

Next.js is a react-based framework that has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and Mac. One of the most powerful features of Next.js is its ability to use layouts to create reusable templates for your application. In this article, we will see what is NextJS CDN support with asset prefixes. 

What is CDN support with asset prefixes in NextJS?

A CDN is a distributed network of servers that help deliver web content quickly and efficiently to users around the world. When we use a CDN, the website’s assets (such as images, JavaScript files, and CSS files) are cached on servers in various locations, reducing the time it takes for users to download them. This can result in faster page load times and a better user experience.

Asset prefixing is the process of adding a prefix to the URLs of your website’s assets, such as images or scripts. This prefix is usually a URL pointing to a CDN server where the assets are hosted. By using asset prefixing, we can ensure that your website’s assets are loaded from a CDN, even if they are referenced with relative URLs.

How to Setup CDN in NextJS?

To set up & use CDN with asset prefixing in Next.js, we have to set the assetPrefix property in our  next.config.js file. For example, if we want to serve our website assets from a CDN with the base URL https://cdn.example.com, we would set the assetPrefix property as follows:

Syntax:

// next.config.js
module.exports = {
      // Set assetPrefix to the base URL of your CDN
      assetPrefix: 'https://cdn.example.com',
}

Once, we have set the assetPrefix property, all asset URLs in your application (such as images, JavaScript files, and CSS files) will be prefixed with the specified URL. 

And let’s say, we have an image file named logo.png in our public directory, its URL would be https://cdn.example.com/_next/static/images/logo.png instead of `/_next/static/images/logo.png.

Steps to create a NextJS project:

Step 1: Installation of next.js require npm and node.js

node -v
npm -v

Step 2: Now create a folder for your project on the desktop navigate to the folder through your code editor and run the following command on the terminal.

npm init -y
npm install --save next react react-dom

After this step, we have all the dependencies installed in our system. Now add the following script in the package.json file:

{
      "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start"
      }
}

Project Structure:

 

Steps to enable CDN support with asset prefix in Next.js:

Step 1: Set up a CDN: First, set up a CDN (such as Cloudflare, etc) to cache and distribute our assets. Each CDN has its own setup process, so follow the instructions provided by the CDN provider.

Step 2: Set the assetPrefix configuration option: Once the CDN is set up, we can set the assetPrefix configuration option in our Next.js configuration file (next.config.js) to point to our CDN. For example:

module.exports = {
     // Set asset prefix to CDN URL
     assetPrefix: 'https://cdn.example.com/myapp/',
};

This will add the specified prefix to all asset URLs in your application. Note that the prefix should end with a trailing slash (/) to ensure that the URLs are constructed correctly.

Step 3: Update the asset URLs: Once the assetPrefix configuration option is set, all asset URLs in your application will automatically include the prefix. However, we may need to update any hard-coded asset URLs in our code to use relative URLs instead. For example, instead of hard-coding an image URL like this:

<img src="https://geeksforgeeks.org/images/myimage.jpg" alt="My Image">

If you’re using a relative URL, then use the following syntax:

<img src="/images/myimage.jpg" alt="sample_mage">

This will ensure that the asset URL is constructed correctly, regardless of the prefix.

By following these steps, we can easily enable CDN support with asset prefixes in your Next.js application, helping to improve the performance and reliability of your asset delivery.

Example: Below example demonstrates setting a CDN with an asset prefix.

Steps to run: Go to localhost:3000 and inspect the page, and in the network, you will notice that now the asset prefix link is started from “cdn.example.com/-_next/static…”.

Output:

 

Reference: https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix