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. ?
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. ?
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
<img src="/assets/images/my-image.png" alt="my image" />
how to access public folder inside folder image in next js ? –
Braille app/rss.xml/route.ts
where "rss.xml" is a folder name. For the end user, it will look like a file. For private files, you can also use a Route Handler, I've documented how to stream files from there: ericburel.tech/blog/nextjs-stream-files –
Men 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
serverRuntimeConfig
, place PROJECT_ROOT
inside env
in the next config, and default it to empty string when using it in the code –
Antiquity 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 build
command, the public
folder is not included. Therefore, if you plan on deploying the .next
folder, make sure to also copy the public
folder to the deployment machine/docker. –
Winy 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
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
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"/>
© 2022 - 2024 — McMap. All rights reserved.
public
directory should be in the root directory even if you are using thesrc
directory. – Quintessa