Public folder doesn't update in production.

[mlbonniec]

Hi, I noticed that when my next project is started and in production, if I add images to the public folder, I have to restart the next server so that the image paths are not 404 errors.
How do I fix this problem?
Thanks!

[laugharn]

The public directory isn't a real directory, it's a collection of routes created at build time here:

next.js/packages/next/next-server/server/next-server.ts

Line 775 in ec70096

protected generatePublicRoutes(): Route[] {

it isn't really supposed to be used for persisted file storage, so the fix would be to use S3/DigitalOcean Spaces/the third party storage solution of your choice.

[mlbonniec]

All right, so that's why. I thank you for your help, and I will do whatever is necessary to solve my problem!

[returnednull]

we must be able to refresh public routes, its so annoying. i cant be able to do basic file upload in next production

[codergautam]

I made an api route for this purpose. Make a file on api/public/[dir].js and put the below code

Now instead of src for /file.png call /api/public/file.png

Note: it will not work in subdirs inside of public. If you want that then make new api routes or modify the directory specified

import fs from 'fs';
import path from 'path';

export default function handler(req, res) {
  const { dir } = req.query;

  try {
    const filePath = path.join(process.cwd(), 'public', dir);

    fs.readFile(filePath, (err, data) => {
      if (err) {
        if(err.code === 'ENOENT') {
          res.status(404).json({ error: 'File not found' });
          return;
        } else {
        res.status(500).json({ error: 'Failed to read file' });
        return;
        }
      } else {
        res.status(200).send(data);
      }
    });
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch file' });
  }
}

[jasonmcaffee]

I created a new route in /api/assets/[...path].ts, which allows any directory depth, and one that also uses caching to reduce traffic and load.

Now I can use urls like /api/assets/images/yogis/yogi_one.png, which points to /public/images/yogis/yogi_one.png, and allows me to serve up all assets in the public directory without needing to restart the service.

import fs from 'fs';
import path from 'path';
import crypto from 'crypto';  // For generating ETag

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    if(!req?.url) { return res.status(500); }
    // console.log('assets api called for: ', req.url);
    if(req.url.indexOf('..') >= 0) { return res.status(400); }

    try {
        // const filePath = path.join(process.cwd(), 'public', dir);
        const partialPath = req.url.replace('/assets', '');
        const filePath = path.join(process.cwd(), 'public', ...partialPath.split('/').slice(2));
        // console.log(`filepath is: ${filePath}`);

        // Read file stats to get last modification time
        fs.stat(filePath, (err, stats) => {
            if (err) {
                if (err.code === 'ENOENT') {
                    return res.status(404).json({ error: 'File not found' });
                }
                return res.status(500).json({ error: 'Failed to read file stats' });
            }

            const lastModified = stats.mtime.toUTCString();
            const fileSize = stats.size;

            // Generate ETag based on file size and modification time
            const eTag = crypto.createHash('md5').update(`${fileSize}-${lastModified}`).digest('hex');

            // Check if the client has a cached version
            if (req.headers['if-none-match'] === eTag || req.headers['if-modified-since'] === lastModified) {
                return res.status(304).end();  // Not Modified
            }

            // Read and serve the file
            fs.readFile(filePath, (err, data) => {
                if (err) {
                    return res.status(500).json({ error: 'Failed to read file' });
                }

                res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
                res.setHeader('Last-Modified', lastModified);
                res.setHeader('ETag', eTag);

                res.status(200).send(data);
            });
        });
    } catch (error) {
        res.status(500).json({ error: 'Failed to fetch file' });
    }
}

[noahjames404]

For app routers try this, a simplified version of @jasonmcaffee

your api file structure should look like this /api/assets/[...dir]/route.jsx

import fs from 'fs'; 
import { NextResponse } from 'next/server';


export async function GET(req, { params }) {
   const dir = params.dir.join("/"); 
   if (!dir) {
       return new NextResponse(null, { status: 500 });
   }

   // Prevent path traversal attacks
   if (dir.indexOf('..') >= 0) {
       return new NextResponse(null, { status: 400 });
   }

   try { 
       // Read and serve the file
       const data = fs.readFileSync('public/' + dir,
           {flag:'r'}
       ); 


       return new NextResponse(data,{status:200}); 

   } catch (error) { 
       return new NextResponse(null, { status: 500 });
   }
}

Tags: NextJS App Router, JSX

[rioredwards]

This worked for me, thank you!