'next build' not showing uploaded file : Next.js Image

tushar gajwani — Thu, 19 Sep 2024 19:42:17 +0000

Rendering Newly Uploaded Files in Next.js on 'next build'
In a typical Next.js application, one of the common issues developers face is rendering newly uploaded files after running next build. The default behavior of Next.js during build time is that it bundles static assets and expects them to be available at that point. However, newly uploaded files post-build, such as user-uploaded images, are not automatically detected or rendered.

This blog will walk you through a solution using a custom Node.js server to dynamically serve newly uploaded files without having to rebuild the Next.js app every time a new file is added.

The Problem
When you build a Next.js app using next build, it generates a static version of the app. While this is great for performance, it becomes a challenge when your app allows users to upload new files, such as images. Since the newly uploaded files don’t exist at the time of the build, the application doesn’t serve them.

Here's a typical scenario:

You run next build and deploy the application.
A user uploads a file, say an image, to the server in /assets/images/newImage.png.
When you try to access this image in the browser, it won’t load because it wasn't part of the build process.
The Solution: A Custom Node.js Server
The goal is to dynamically serve these newly uploaded files without rebuilding the Next.js app. We will achieve this by setting up a custom Node.js server to handle these files and configuring the Next.js app to proxy requests for uploaded files to this server.

Set Up a Custom Node.js Server:
Create a new file server.js in the root of your project directory. This will serve as our custom Node.js server to handle static file requests dynamically.

const express = require('express');
const path = require('path');

const app = express();
const port = 4000; // You can choose any port you like

// Expose the /assets folder so that it can serve new files
app.use('/assets', express.static(path.join(__dirname, 'assets')));

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

This server is configured to serve the /assets folder, which is where we assume all uploaded files are stored. In this case, images would be stored in /assets/images.

Update next.config.js to Redirect Requests
Next, we need to update next.config.js so that requests for assets are redirected to our custom Node.js server. The idea is to proxy all requests starting with /assets to the custom server.

Here’s the code for next.config.js:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/assets/:path*',
        destination: `http://localhost:4000/assets/:path*`, // Proxy to the custom server
      },
    ];
  },
};

In this configuration:

source matches all requests that begin with /assets/.
destination redirects those requests to our custom server, running on http://localhost:4000/assets/.
This way, whenever a request is made for an uploaded file (like /assets/images/newImage.png), Next.js will proxy that request to the Node.js server, which can serve the file from the file system in real time.

Start your custom Node.js server by running:
node server.js
Then, run your Next.js app as usual with next build.

Upload a new image to the /assets/images folder through your application or manually.

Access the new image via a URL like http://localhost:3000/assets/images/newImage.png. The request will be proxied to the custom server, and the image should load correctly.

Why This Works
The custom Node.js server can access the file system in real time, so when new files are uploaded, they are immediately available. The Next.js configuration ensures that requests for those files are redirected to the Node.js server, bypassing the limitations of static builds.

Conclusion
By setting up a custom Node.js server and proxying asset requests, we can handle user-uploaded files in real time without having to rebuild the Next.js application every time a file is added. This solution is both efficient and scalable, making it ideal for applications with dynamic content uploads.

In this blog, we discussed how to solve the issue of rendering newly uploaded files in a Next.js application after running next build. However, if you want to see this solution in action or need further clarity on any part, I’ve created a detailed YouTube video where I walk through the entire process:

Watch the video tutorial on YouTube

Additionally, if you'd like to explore the complete codebase and try it out yourself, the project is available on GitHub:

Check out the GitHub repository

Both resources provide a hands-on approach and complete code, so feel free to dive deeper into the implementation!

DEV Community: tushar gajwani

'next build' not showing uploaded file : Next.js Image