Issues with displaying public images in Next.js production build are being reported

Question

Issues with displaying public images in Next.js production build are being reported

My Next.js app is deployed on Heroku. Images show up when I develop locally, but once pushed to Heroku and checked on the live site, the images return a 404 error. The images (.png) are stored in a public folder within my project, and I reference them in the code like this:

<Image
    src="/wb_blue_white.png"
    alt="WB Concept"
    width="70"
    height="70"
    className={navStyles.logo}
/>

Despite the image sources being the same

src="/_next/image?url=%2Fwb_blue_white.png&w=256&q=75"

both locally and in production, I am only able to view them when running the project localhost. What could be causing this discrepancy between localhost and the Heroku build?

Here is an excerpt from my package.json file:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT"
},

File structure of the project:

components
pages
public

javascript heroku next.js nextjs-image

Answer 1

Answer №1

Take a look at the custom server documentation for Next.js and the corresponding example repository.

In the code snippet that resembles Express, the use of app.render() appears to map routes in Next.js from /a to pages/a. It's unclear if this mapping is necessary for each path or merely for demonstration purposes. Feel free to experiment.

If it functions similar to a basic Express server, as I assume, calling the use() method on the express instance will add middleware that 1. processes incoming requests and 2. forwards them to the next middleware or sends a response to the client.

By using

server.use(express.static(path.join(__dirname, 'public')));

, where server represents the express instance (following convention in the example repository), you can include middleware to serve static files.

I can't quite remember the exact process of configuring Express, but it should be either:

right after instantiating express(), or
right before calling listen()

Simply inserting

server.use(express.static(path.join(__dirname, 'public')))

at one of these points should work.

Answer 2

Take a look at the custom server documentation for Next.js and the corresponding example repository.

In the code snippet that resembles Express, the use of app.render() appears to map routes in Next.js from /a to pages/a. It's unclear if this mapping is necessary for each path or merely for demonstration purposes. Feel free to experiment.

If it functions similar to a basic Express server, as I assume, calling the use() method on the express instance will add middleware that 1. processes incoming requests and 2. forwards them to the next middleware or sends a response to the client.

By using

server.use(express.static(path.join(__dirname, 'public')));

, where server represents the express instance (following convention in the example repository), you can include middleware to serve static files.

I can't quite remember the exact process of configuring Express, but it should be either:

right after instantiating express(), or
right before calling listen()

Simply inserting

server.use(express.static(path.join(__dirname, 'public')))

at one of these points should work.

Answer 3

Answer №2

I encountered a similar issue recently. The problem, as it turned out, wasn't with the components themselves. I was actually hosting my site on Netlify and didn't realize that it automatically builds devDependencies by default. This led to node packages meant for development and testing being compiled for production, causing errors.

To fix this, I adjusted the NODE_ENV setting in Netlify to production and rearranged the packages between dependencies and devDependencies. After making these changes, the error disappeared.

I suspect that the components were triggering the issue because they required initial requests that generated or optimized them server-side. This ultimately caused dev packages to run in the wrong context due to remote image requests.

I share this experience in the hopes that it may assist someone else facing a similar situation in the future.

Answer 4

I encountered a similar issue recently. The problem, as it turned out, wasn't with the components themselves. I was actually hosting my site on Netlify and didn't realize that it automatically builds devDependencies by default. This led to node packages meant for development and testing being compiled for production, causing errors.

To fix this, I adjusted the NODE_ENV setting in Netlify to production and rearranged the packages between dependencies and devDependencies. After making these changes, the error disappeared.

I suspect that the components were triggering the issue because they required initial requests that generated or optimized them server-side. This ultimately caused dev packages to run in the wrong context due to remote image requests.

I share this experience in the hopes that it may assist someone else facing a similar situation in the future.

Answer 5

Answer №3

Ensure that your images are stored in the public folder, for example, public/pictures.

Next, insert the following code snippet into your next.config.js file:

images: {
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '3000',
        pathname: '/pictures/**',
      }, 
      {
        protocol: 'https',
        hostname: '<YOUR WEBSITE URL>.com',
        port: '',
        pathname: '/pictures/**',
      },
    ],
  },

After making these changes, upload your project again and restart all dynos to see the updated images.

Answer 6

Ensure that your images are stored in the public folder, for example, public/pictures.

Next, insert the following code snippet into your next.config.js file:

images: {
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '3000',
        pathname: '/pictures/**',
      }, 
      {
        protocol: 'https',
        hostname: '<YOUR WEBSITE URL>.com',
        port: '',
        pathname: '/pictures/**',
      },
    ],
  },

After making these changes, upload your project again and restart all dynos to see the updated images.

Answer 7

Answer №4

To achieve the desired outcome, establish a new folder for images within the main directory and import them from there using relative paths.

Answer 8

To achieve the desired outcome, establish a new folder for images within the main directory and import them from there using relative paths.

Answer 9

Answer №5

If you're wondering about why Sharpe is missing in production, there are numerous articles discussing this topic. Essentially, Sharp must be installed as it is a requirement. The NextJS documentation may make it seem optional, but in reality, with the default loader, Sharp is essential for proper functioning.

Answer 10

If you're wondering about why Sharpe is missing in production, there are numerous articles discussing this topic. Essentially, Sharp must be installed as it is a requirement. The NextJS documentation may make it seem optional, but in reality, with the default loader, Sharp is essential for proper functioning.

Answer 11

Answer №6

After realizing I had included the public folder in my .dockerignore file, I discovered that all of my static assets were being ignored. Hopefully this information can assist someone else facing a similar issue.

Answer 12

After realizing I had included the public folder in my .dockerignore file, I discovered that all of my static assets were being ignored. Hopefully this information can assist someone else facing a similar issue.

Issues with displaying public images in Next.js production build are being reported

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Accessing Google Analytics with a single OAuth token using the JavaScript API: A step-by-step guide

Increasing values in Mongoose using $inc can be done by following these steps

"Transferring an array of data to a Laravel controller via AJAX: A step-by-step guide

Place a new button at the bottom of the react-bootstrap-typeahead dropdown menu for additional functionality

Tips for avoiding the automatic transition to the next slide in SwiperJS

sending information back to the controller with get method (ajax, javascript)

Tips for handling useEffect alert while working with Recoil

Gather every hyperlink and input fields without utilizing jQuery

Having trouble generating a dynamic ref in Vue.js

Managing the invocation of a promise multiple times in AngularJS, and handling some specific exceptions

Directive for integrating Amcharts with Angular JS

Ajax: Why am I receiving an error response instead of a successful one?

Is it possible to retrieve the vertices array from a QuickHull instance in three.js?

Switch the checked status of an input dynamically using jQuery function

Updating a string in JavaScript by dynamically adding values from a JSON object

Sharing data with child components in Next.js through getStatisticProps

The attribute selector specifically targets the number 3, excluding numbers such as 13 or 23 from being selected

Iterating variables in Vue.js is reminiscent of the process in AngularJS

Catalog of items in Mustache

The API response indicates that the service is currently not accessible