Nextjs public folder
Asked Answered
I

11

62

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. ?

Inn answered 30/1, 2019 at 8:19 Comment(0)
V
64

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

Veradia answered 16/7, 2019 at 16:28 Comment(3)
It is important to note that the public directory should be in the root directory even if you are using the src directory.Quintessa
I can't able to access my image :- <img src="/assets/images/my-image.png" alt="my image" /> how to access public folder inside folder image in next js ?Braille
Note that for generated text files, you can use a Route Handler: 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-filesMen
E
27

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
Epineurium answered 30/8, 2020 at 15:33 Comment(4)
Hey, I tried your solution. On localhost, it throws this error when I start the server. Error: ENOENT: no such file or directory, open '/Roboto-Regular.ttf' On subsequent API calls, it works as expected and my font loads correctly. When I deploy to production then it crashes every time ENOENT: no such file or directory, open '/vercel/path0/public/Roboto-Regular.ttf Do you have any suggestion here?Idio
@Idio - Hmm, looks like you are hosting on vercel, I'm not super familiar with how they work as a host personally. I'd double check the path, and maybe contact your server host support as that seems like an issue with pathing and the native os behavior (which they may be able to help with)Epineurium
@Idio did you ever find a solution?Bur
@Bur Instead of serverRuntimeConfig, place PROJECT_ROOT inside env in the next config, and default it to empty string when using it in the codeAntiquity
C
22

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

Catcall answered 12/7, 2020 at 13:4 Comment(0)
N
10

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

Noisy answered 30/1, 2019 at 8:22 Comment(1)
As of May 1, 2019, public folder support has been added in addition to the static folder. See this PR github.com/zeit/next.js/pull/7213Clubhouse
M
7

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" />
Maleeny answered 11/3, 2020 at 1:21 Comment(2)
This only works for me when running next dev. When I do next build and deploy, I get a 404Orogeny
In my situation, when using the 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
C
5

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
Cockscomb answered 14/9, 2021 at 22:8 Comment(0)
L
2

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

Licence answered 1/7, 2020 at 13:37 Comment(0)
I
1

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}`)
  })
})
Inn answered 30/1, 2019 at 8:50 Comment(0)
S
1

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

Siusan answered 16/6, 2021 at 3:25 Comment(0)
G
0

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

Gaby answered 25/2, 2021 at 8:46 Comment(0)
S
0

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"/>

Senate answered 21/11, 2022 at 6:24 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.