Serving next.js static assets from public folder after build time problems

[jochri3]

I'm working on a nextjs application that should be deployed in a LAN, and the server is not connected to the internet. So the problem that I have is that in the backoffice I've got some forms to add/update/delete employees informations. There are also images profiles and QRCode that are generated for some reasons. I store those images inside users_images folder inside the next.js public folder. In development everything works just fine I can server those static files(images). But when I execute next build and run the application for production,only images in the users_images are build time are serverd but the news assets that are being created in the backoffice are not served and the server returns 404.I've read in the nextjs docs and that is the expected behavior : Static File Serving.

As the application will be deployed in an offline server, I cannot use services like AWS s3 or services such as cloudinary for storing and retrieving images. Do you have any ideas about how to solve this problem to help me serve those files even after build?

I've also tried serving them with nginx and images are accessible but I get 505 while accessing pages. Here is my nginx configuration.

Next application listen on port 3000

server{
   listen 3000;
   root /path_to_apps_public_folder;
   location /{
       try_files $uri $uri/ =404;
    } 
} 

@Timer @timneutkens @ijjk @lfades

[c0b41]

Try Minio for local Aws S3

[jochri3]

What i need is a way to make it using only with nginx configuration

[jamesmosier]

The public folder is not meant to dynamically set objects in it. After build it should not be altered.

Therefore you'd need to setup another endpoint using Node or similar server technology to be able to get/set objects on the servers filesystem outside of Next.

[sujon-co]

@jamesmosier can you give an example of another endpoint using Node (code example)

[RMahammad]

If we have to use node, then why next.js has server actions ? :). It's a little bit funny, that next.js doesn't support static folder configuration

[orteliusorthon]

Hi,

To anyone who is reading this thread looking for a solution to access files in the public folder at runtime but would prefer a simple solution that works with next you can do the following:

Create a new folder: "./pages/api/public"
Add a new file to the folder: "[[...slug]].js"
Add the following code to the file:

import fs from "fs"

export default function handler(req, res) {
		if (req.query.slug && req.query.slug.length) {
			const publicDir = __dirname.split(".next")[0] + "public/"
			const fileUrl = req.query.slug.join("/")
			fs.readFile(publicDir + fileUrl, (error, data) => {
				if(error) {
					return res.status(404).send(null)
				}
				return res.status(200).send(data)
			})
		} else {
			res.status(404).send(null)
		}
}

Now you can access the files in your public folder using "yourapplication:3000/api/public/*"
Example: <img src="/api/public/upload/images/myimage.jpg">

You may need to slightly customize the code to your needs.

Hope this helps anyone in need! :)

[ajdev0]

@orteliusorthon Thank u, it did help me a lot.

[kabilashgit]

@orteliusorthon Thank you so much, it saved me. I'm wondering this issue was there for a very long time and still not fixed.

[wlisesrivas]

Thank you very much. worked for prod 🔥

[SmirnoffStudio]

Cool. thx friend :3

[desta]

thank you @orteliusorthon base your code, now i can access my image file uploaded in public folder, im using Next,js 15 with app routes, this what im doing:

in api/public/[...slug]/route.js

import fs from "fs"

export async function GET(request, { params }) {
    const slug = (await params).slug;
    const fileUrl = slug.join("/")
    const publicDir = __dirname.split(".next")[0] + "public/"
    return new Response(fs.createReadStream(`${publicDir + fileUrl}`));
}

it run both build and dev without turbopack

[Kuzmich100kM]

Next 14/15. Uploading and dynamically retrieving files in a folder /app/public.
Works both locally and on the server (tried it in Docker)

// Server action to Upload avatar to a folder:  /public/images/avatar
// It is assumed to use upload image by input form with formData. I'm not considering it here.
// imgAPI.tsx

'use server'
import fs from 'node:fs/promises'
import path from 'path'

const publicFolder = path.resolve('public')  //   /app/public (on docker)  and  ./public (on local)

// newPath = '/images/avatar/1234567.jpg'
export async function uploadFile(newPath: string, formData: FormData) {
  try {
    if (!newPath) throw new Error('Download directory not specified')

    const file = formData.get('file') as File
    if (!file) throw new Error('Specify the correct file')

    const arrayBuffer = await file.arrayBuffer()
    const uint8Array = new Uint8Array(arrayBuffer)

    await fs.writeFile(publicFolder + newPath, uint8Array)
  } catch (err) {
    console.error(' uploadFile: ', err)
    if (err instanceof Error && err.message) return { msg: err.message }
    return { msg: 'Error updating avatar' }
  }
}

// Create a route to dynamically getting a file from folder /public/images/avatar
//  app/api/public/[[...slug]]/route.ts

import { promises as fs } from 'fs'
import { NextResponse } from 'next/server'
import path from 'path'

const publicFolder = path.resolve('public')  //   /app/public (on docker)  and  ./public (on local)

export async function GET(req: Request, { params }: { params: { slug?: string[] } }) {
  try {
    const slug = params.slug || []  // ["images", "avatar", "1234567.jpg"]
    const filePath = slug ? path.join(publicFolder, ...slug) : null  //  /public/images/avatar/1234567.jpg
    if (!filePath) throw new Error()

    const fileContent = await fs.readFile(filePath)
    if (!fileContent) throw new Error()

    return new NextResponse(fileContent)
  } catch (err) {
    console.error(' GET Avatar | err: ', err)
    return new NextResponse(null)
  }
}

//  From the component we send a GET request ( '/api/public/images/1234567.jpg') to receive an avatar and display it
//  app/components/Avatar.tsx

'use client'
import Image from 'next/image'
import { useState } from 'react'

type Props = {
  avatar: string  //  from user session or DB   '/images/avatar/1234567.jpg'
}

export function Avatar({avatar}: Props) {
  if (!avatar) return null

  const [err, setErr] = useState<string>('')

  return (
    <Image
      src={err || `/api/public${avatar}`}
      width={36}
      height={36}
      style={{ objectFit: 'cover' }}
      alt='avatar'
      className='avatar'
      quality={100}
      onError={() => setErr('/api/public/assets/no-image.png')}
    />
  )
}

[arekouzounian]

This worked perfectly. You're a godsend. Thank you.

[Fikhas]

I have been searching for the right solution for a long time, and God has led me to this solution. This is the best solution I have ever found. Thank you, may God bless you.

[nimblemo]

best solution!

[sovetski]

An official solution would be great for that, NextJs says itself "full stack" but this kind of classical things are not supported...