Next js 14 image not found until restart production build or reupload production build

[Govtechnologies]

Summary

facing image not found error in next js 14+ if app runing in production and using public directory to upload image image upload success but for retiving image need to restart server to get image else image response get 400

Additional information

Hey every one i am using app using next js and using public directory as image store, in Dev mode every thing works fine i am uploading image and geting image back as normal.

When i build project and host on Ubuntu server using nginx and pm2.
Issue start coming the issue is i can upload image safely to public directory but i can not getting image back in Next image component In console error comming as 400 bad request and when i restart server everything work fine image that not comming before then start comming.

how to slove plese help

Example

No response

[nileshs4s]

Hey did you get any solution for same @Govtechnologies . Thanks

[Govtechnologies]

Next js not support that thing, u need to use a bucket aur seprate node server for image uploading

…

On Fri, 22 Mar, 2024, 14:56 Nilesh Dubey, ***@***.***> wrote: Hey did you get any solution for same @Govtechnologies <https://github.com/Govtechnologies> . Thanks — Reply to this email directly, view it on GitHub <#59765 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARZUKEIJNGLVNDYNT22MVDDYZP2N5AVCNFSM6AAAAABA27NWBKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DQNZVG4ZDQ> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>

[pawelhoros]

There is a solution with rewrite to api call. In my case app is uploading to /public/avatars/ some pics.

next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/avatars/:path*',
        destination: '/api/avatars/:path*',
      },
    ];
  },
};

export default nextConfig;

Api: app/api/avatars/[...path]/route.ts:

import { NextRequest, NextResponse } from 'next/server';
import fs from 'fs';
import path from 'path';

export async function GET(
  request: NextRequest,
  { params }: { params: { path: string[] } }
) {
  const filePath = params.path.join('/');
  const avatarPath = path.join(process.cwd(), 'public', 'avatars', filePath);

  if (fs.existsSync(avatarPath)) {
    const fileContent = fs.readFileSync(avatarPath);
    const contentType =
      path.extname(avatarPath).toLowerCase() === '.png'
        ? 'image/png'
        : 'image/jpeg';

    return new NextResponse(fileContent, {
      headers: { 'Content-Type': contentType },
    });
  } else {
    return NextResponse.json(
      { message: 'Avatar not found' },
      { status: 404 }
    );
  }
}

I guess it can be refactor to be more generic.

[OvaisJetnetix786786]

Thanks this helps me

[d-true]

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

Error on build types check

{ params }: { params: { path: string[] } } => { params }: { params: Promise<{ path: string[] }> }

const filePath = params.path.join('/'); => const filePath = (await params).path.join('/');

[flamas472]

excelent, it worked perfectly, only adapted the path for my imgs, thanks!

[MsM512]

same issue on nginx
after restart PM2 image is displayed