Preview Checking the environment

If you use the Headless SXA starter kit to deploy a preview environment, but have set a domain, the display will look like the following.

When accessing the site on the .vercel domain that was built in this environment, it is displayed correctly as shown below.

However, if you access the domain for the preview you set up, the display will break as shown below, because you want to access the same URL each time you preview.

This is because the page is generated by storing the URL of the site obtained when the build was performed, so it is not possible to load the stylesheet from the URL of your own domain.

This is because the Preview environment has Deployment Protection enabled by default, and it is not possible to load stylesheets from a different domain.

Changing the settings for Next.js

The above behavior uses a feature provided by Next.js, and uses the assetPrefix item. The official documentation introduces it as follows.

• https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix

If you actually refer to the Starter Kit code, it looks like this.

const jssConfig = require('./src/temp/config');
const plugins = require('./src/temp/next-config-plugins') || {};

const publicUrl = jssConfig.publicUrl;

/**
 * @type {import('next').NextConfig}
 */

const nextConfig = {
  // Set assetPrefix to our public URL
  assetPrefix: publicUrl,

  // Allow specifying a distinct distDir when concurrently running app in a container
  distDir: process.env.NEXTJS_DIST_DIR || '.next',

  // Make the same PUBLIC_URL available as an environment variable on the client bundle
  env: {
    PUBLIC_URL: publicUrl,
  },

So what happens if we comment out the assetPrefix item?

With regard to style sheets, relative paths are now used, and pages are displayed correctly.

Summary

In this article, we introduced a method for avoiding a case where the stylesheet does not load properly in the Preview environment deployed on Vercel by changing the Next.js settings.

Tags

• Vercel