Nextjs public folder

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

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

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

The static directory has been deprecated in favor of the public directory. https://err.sh/zeit/next.js/static-dir-deprecated

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

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

Next can use a /public folder. Just create one if you don't have it. I have my small project set up as:

project-root
    /public
        /blog-images
        /fonts
        favicon.ico
        etc.png
    /src
        /pages
        /components
        /styles
            globals.css
        /utils

You can create a public folder in the root of your project. NextJS would automatically grab the website's static content from the folder.

If an image is in public folder such that Image URL is: projectRoot/public/myImg.jpg then you can access it inside your JSX or TSX files by using /myImg.jpg

For more information check out the documentation: https://nextjs.org/docs/basic-features/static-file-serving

According to this issue you could serve static files server side, just like this (source):

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const { join } = require('path')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true)
    const rootStaticFiles = ['/robots.txt', '/sitemap.xml', '/favicon.ico']
    if (rootStaticFiles.indexOf(parsedUrl.pathname) > -1) {
      const path = join(__dirname, 'static', parsedUrl.pathname)
      app.serveStatic(req, res, path)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

the /public folder. You need to restart the website after adding files to this folder

You can place image inside public folder.

after that using import Head from "next/head" you can place <link rel="icon" type="image/png" href="relative path in public folder"/>

Where is the public folder for a nextjs project?

Answer: into the root directory of the project, you create public folder and put favicon.png into this.

You can reference the sample at https://github.com/dotuan9x/nextjs-boilerplate. I already use this for my website https://nghesachnoi.com and reality https://nghesachnoi.com/favicon.ico

I understand that you need to find the public folder, but if you want to put robots.txt, favicon, etc. you can add them in the app/ if you are using the nextjs app router.

Here are the docs.

• robots.txt

• app-icons

• manifest

All three things you mentioned(robots, favicon, manifest.json) are all placed in the app router and would work according to the docs and I have used this easily in my work projects as well!

You can put them in the root of app (When you use the App router structure):

• Metadata Files API Reference
• favicon, icon, and apple-icon
• manifest.json
• robots.txt

If you use the Pages Router structure you can use the public folder Static Assets - Robots, Favicons, and others

In the root of your project, there's a public folder where you can add assets like favicon.png, robots.txt, and other static files. Any files placed here will be directly accessible from the root URL,

Nextjs Docs

If anyone like me here coming from react and trying to do this

import img from "img/image.jpg";

and facing the issue just import it directly in the img src tag like this

<img src="img/image.jpg" alt="img" />

assuming you have saved the image inside the public/img/ folder

and don't waste your time trying to figure out why is it not working even though the image is in the public folder and you are importing it like the other answer.

If you find out any alternative, let me know :)