Nextjs public folder

Question

Where is the public folder for a nextjs project?

I mean, is there somewhere where I can put favicon.png, google site verification, manifest.json, robots.txt, etc. ?

Answer 1

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

Answer 2

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