Nextjs public folder

Static file serving (e.g.: images)

create a folder called static in your project root directory. From your code you can then reference those files with /static/ URLs:

export default () => <img src="/static/my-image.png" alt="my image" />

Note: Don't name the static directory anything else. The name is required and is the only directory that Next.js uses for serving static assets.

for more read Docs

for Next.js 9: Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

For example, if you add an image to public/my-image.png, the following code will access the image:

function MyImage() {
  return <img src="/my-image.png" alt="my image" />
}

export default MyImage

refrence: enter link description here

For web process anything in /public is at the url so easy. However, if you are trying to access the files on the server side of nextjs (either in one of the static async SSR, or as an API call) - as the paths there seem to need to be absolute paths. To access that you need to capture the running directory at build time, and then access it.

next.config.js:

module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

And a helper for getting server side paths:

import path from 'path'
import getConfig from 'next/config'

const serverPath = (staticFilePath: string) => {
  return path.join(getConfig().serverRuntimeConfig.PROJECT_ROOT, staticFilePath)
}

export default serverPath

Next.js has a public/ folder

Create stuff like public/favicon.png, public/robots.txt and that's all you need.

And put your static folder inside public to keep your assets in it with all assets bundling and compressing benefits.

/public
    /static
        /images
        /css
        /fonts
    robots.txt
    manifest.json

Documentation