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;

Emre · Accepted Answer · 2023-05-15 09:57:32Z

2

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?

edited May 15, 2023 at 9:57

answered May 14, 2023 at 12:09

Emre

8608 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yush Over a year ago

Hey thanks for the suggestion, that actually works however i thought i had that covered in asset prefix? I have added my config to the original post

Emre Over a year ago

@yush glad it helps. Unfortunately they still say the same way with the basePath: "When using the next/image component, you will need to add the basePath in front of src." and also assetPrefix configurations are not the correct approaches to solve this issue for now.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related