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/fontsfavicon.icoetc.png/src/pages/components/stylesglobals.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) || 3000const 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 errconsole.log(`> Ready on http://localhost:${port}`)})})

the /public folder. Youneed 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