If one uses Vercel to deploy a Next.js application, Vercel automatically configures a global CDN. However, NeetoCourse is hosted at NeetoDeploy, our own app deployment platform. This meant we had to figure out how to serve assets and images from a CDN. We like using Cloudflare for various things, and we decided to use Cloudflare as the CDN for this case.

There are two kinds of files in a server-side rendered Next.js app that can be served from a CDN.

• Assets like server-rendered HTML, CSS, JS, and fonts.
• Public media like images and videos. These typically reside in the public folder.

Server rendered assets

When Next.js is deployed in production, then during the next build step all server rendered assets are put in .next/static/ folder. Next.js provides an option to set a CDN to serve these assets. This can be done by setting the assetPrefix property in next.config.js, where ASSET_HOST is an environment variable that contains the CDN url.

/* next.config.js */
...

const assetHost = process.env.ASSET_HOST;

const nextConfig = {
  ...
  assetPrefix: isPresent(assetHost) ? assetHost : undefined,
  ...
};

module.exports = nextConfig;

The official doc has more details about it.

Result

As shown in the pic below, we had a cache hit. It means the assets are being served from the configured CDN.

Public media

Next.js has <Image> component that comes with out-of-the-box necessary optimizations. If we could use <Image> tag then our CDN problem would also be solved. However the <Image> component does not work well with Tailwind CSS, and we rely heavily on Tailwind CSS.

Therefore, we loaded images from the public folder using the traditional <img> tag.

import React from "react";
import dottedBackground from "public/index-dotted-bg";

const HeaderImage = () => (
  <img
    alt="dotted background"
    className="m-0 w-20 md:w-40 lg:w-auto"
    src={dottedBackground}
  />
);

However now images are not optimized by Next.js and are served from the server directly. This is because Next.js does not consider media in public folder as static assets to be sent to CDN.

Configuring CDN

Since we had already set up and configured a CDN using Cloudflare, we set up a util to prefix the source with our asset host if it is present in the app environment.

import { isNotNil } from "ramda";

export const prefixed = src =>
  src.startsWith("/") && isNotNil(process.env.ASSET_HOST)
    ? `${process.env.ASSET_HOST}${src}`
    : src;

Now we can use prefixed in the <img> tag.

import React from "react";
import { prefixed } from "utils/media";

const HeaderImage = () => (
  <img
    alt="dotted background"
    className="m-0 w-20 md:w-40 lg:w-auto"
    src={prefixed("/index-dotted-bg.svg")}
  />
);

We expected that with this configuration, if ASSET_HOST value was set up then the images would be served from the CDN. Otherwise, they would be served from the server.

The images did load correctly, but the CDN was not able to cache them. All of the requests resulted in cache misses.

Solution

The CDN was not able to cache the images because the Cache-Control header was not set on the images. This header is set by Next.js when the assets are served from the .next/static/ folder, but not when they are served from the public folder. In such cases, we have to explicitly configure the header to be sent when a request is made from the CDN.

So, we ended up adding a custom headers block to the next.config.js.

/* next.config.js */
...
const nextConfig = {
  ...
  headers: async () => [
    {
      source: "/:all*(.png|.jpg|.jpeg|.gif|.svg)",
      headers: [
        {
          key: "Cache-Control",
          value: "public, max-age=31536000, must-revalidate",
        },
      ],
    },
  ],
  ...
};

module.exports = nextConfig;

This worked. All subsequent requests from the CDN for public images turned into cache hits.

Result

Conclusion

• Use assetPrefix option in next.config.js to serve server-rendered assets from a CDN.
• Explicitly set Cache-Control header in next.config.js and ensure image src URLs contain the CDN asset host to serve public images from a CDN.

In the process of migration we knew we might have missed handling a few urls. We wanted to know all the urls which are resulting in 404 now.

Traditionally, a static site is not able to catch all the 404s. However with next.js we can capture the urls resulting in 404 and we can write those urls to firebase.

Setting up Firebase

Get Started with Firebase and create an account. Add a project there and then add a "Web app" inside that project. After that, you will find web app’s Firebase configuration something like this.

var firebaseConfig = {
apiKey: “XXXXXXXXXXXXXXXXXXXXXXXX”,
authDomain: “test-XXXX.firebaseapp.com”,
databaseURL: “https://test-XXXX-default-rtdb.firebaseio.com",
projectId: “test-XXXX”,
storageBucket: “test-XXX.appspot.com”,
messagingSenderId: “00000000000”,
appId: “1:00000000:web:XXXXX00000XXXXXXX”
};

Edit rules in Rules section like this.

{
  "rules": {
    ".read": false,
    ".write": true
  }
}

Creating custom 404

To create a custom 404 page create a pages/404.js file. At build time this file is statically generated and would serve as the 404 page for the application. This page would look like this.

import { useEffect } from "react";
import firebase from "firebase";

export default function Custom404() {
  useEffect(() => {
    const firebaseConfig = {
    apiKey: “XXXXXXXXXXXXXXXXXXXXXXXX”,
    authDomain: “test-XXXX.firebaseapp.com”,
    databaseURL: “https://test-XXXX-default-rtdb.firebaseio.com",
    projectId: “test-XXXX”,
    storageBucket: “test-XXX.appspot.com”,
    messagingSenderId: “00000000000”,
    appId: “1:00000000:web:XXXXX00000XXXXXXX”
    }

    firebase.initializeApp(firebaseConfig).database().ref().child("404s").push(window.location.href);
  }, []);

  return <h1>404 - Page Not Found</h1>;
}

Now all the 404s will be caught and would be written to the firebase.