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

Leveraging SCSS Mixins in Next.js

How can I update an image source using JavaScript in a Django project?

Adding a Sequence of Class Names to <li> Elements with JavaScript

Unable to locate component property

Experiencing difficulties loading webpages while attempting to execute Routes sample code using NodeJS

Remove all stored data from localStorage and update the view in Backbone framework

Is it possible for issues to arise when serving a web app using the "Globals" module in the Mean Stack?

What is the best way to iterate through two arrays without disrupting the sequence of displayed elements?

Analyzing XBRL documents using JavaScript

What is the best way to utilize Link for navigation in React with Material UI?

Dynamically access nested objects by utilizing an array of strings as a pathway

Encountering issues with verifying login credentials in Angular 2

Retain values of JavaScript variables acquired by their IDs even after a page refresh

Unexpected fragments returned by Woocommerce during woocommerce_add_to_cart_fragments hook

Jquery form submission is failing, and a JavaScript warning appears in the console stating that 'body.scrollLeft is deprecated in strict mode' instead

Transmitting a variable string from JavaScript to PHP through AJAX

Activate the 'li' element within the 'ul' whenever a 'ui-sref' link on the

Encountered an error while trying to set up the route due to Router.use() needing

`returning a functional component directly from a component's event listener`

jQuery dynamically updating calculations on a single row consecutively