Image Errors in My Next.js Portfolio Project

I recently checked whether the portfolio project I built and deployed was still working, and it was showing errors like the one below.

To fix this, I looked at the network tab. The images came from Notion and were hosted on AWS, and it looked like their domain had changed.

So I added the domain shown in the network tab to next.config.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: [
      "prod-files-secure.s3.us-west-2.amazonaws.com", // Added domain
      "s3.us-west-2.amazonaws.com",
      "images.unsplash.com",
      "www.notion.so",
    ],
    format: ["image/png", "image/webp", "image/jpeg"],
  },
};

module.exports = nextConfig;

They seem to show up correctly now.

This site has since been taken down. My later Next.js portfolio is at next-umsungjun.vercel.app.