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!

[Confuze]

@jasonmcaffee I wouldn't risk it with the Cache-Control: public, max-age=31536000, immutable headers. The behavior differs by browser but in some cases it may lead to stale images. Chrome for example is nice enough to send a request for the image per every refresh but firefox just assumes that the image will never change due to the cache control header and never refetches the image. (even if Last-Modified and eTag were given) Best to reduce it to Cache-Control: public - that way a request is sent on every refresh and if the image hasn't changed the response is 304 so the cache still works.

Here's my version of this in the app router with typescript:

import fs from "fs";
import crypto from "crypto";
import { NextResponse } from "next/server";
import path from "path";

export async function GET(
  req: Request,
  { params }: { params: Promise<{ path: string[] }> },
) {
  const dir = (await params).path.join("/");
  const filePath = path.join(process.cwd(), "public", dir);
  if (!dir) {
    return new NextResponse(null, { status: 500 });
  }

  console.log(dir, filePath);

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

  try {
    const stats = fs.statSync(filePath);

    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.get("if-none-match") === eTag ||
      req.headers.get("if-modified-since") === lastModified
    ) {
      return new NextResponse(null, { status: 304 }); // Not Modified
    }

    const data = fs.readFileSync("public/" + dir, { flag: "r" });

    return new NextResponse(data, {
      status: 200,
      headers: {
        "Cache-Control": "public",
        "Last-Modified": lastModified,
        ETag: eTag,
      },
    });
  } catch (e) {
    if (e instanceof Error) {
      if ("code" in e && e.code === "ENOENT") {
        return NextResponse.json({ error: "File not found" }, { status: 404 });
      }

      return NextResponse.json(
        { error: "Failed to read file", message: e.message },
        { status: 500 },
      );
    } else {
      return NextResponse.json(
        { error: "Failed to read file", message: e },
        { status: 500 },
      );
    }
  }
}