NextJS 13 App Images Not Loading On Route Hosted with GitHub Pages

Question

I am trying to host a very simple NextJS 13 site using GitHub pages, however i noticed that weird behaviour that only seems to be affecting Safari (iOS + MacOS).

On initial load, images are displayed correctly, however on route i get a 404 with images.

Safari (Broken):

Chrome (working as expected):

This is my Github repo: https://github.com/ayush-lal/boilerplate-nextjs

TIA

EDIT:

// next.config.js

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

const repo = "boilerplate-nextjs";
const assetPrefix = `/${repo}/`;
const basePath = `/${repo}`;

const nextConfig = {
  trailingSlash: true,

  output: "export",
  basePath: basePath,
  assetPrefix: assetPrefix,
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

Answer 1

It's because you use two-dots in your the image src attribute. You don't need this. If you serve static files in your public folder, you can just use slash mark (/). E.g. /my-img.png

In your project, you need to specify the directory where the project is located. Because when you use (/), it will redirect to the root directory, like this: "http://yourdomain.com/". But your project is not located there, it is located here: "http://yourdomain.com/project-name/".

Replace this code:

<Image
  className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
  src="../next.svg"
  alt="Next.js Logo"
  width={180}
  height={37}
  priority
/>

With this one:

<Image
  className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
  src="/boilerplate-nextjs/next.svg"
  alt="Next.js Logo"
  width={180}
  height={37}
  priority
/>

In addition:

• You do not need to import files in the public folder.
• Do not use another name in /publics, or /public etc.
• Do not use ./img.png, or ../img.png to access the file.

Further readings:

Static Assets

How to create a public folder?