Reputation: 31948

Nextjs public folder

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

Upvotes: 66

Answers (15)

Aku Sarma

Reputation: 46

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 :)

Upvotes: 0

Lithin Kuriachan

Reputation: 681

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

Upvotes: 0

Boopy

Reputation: 553

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

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

Upvotes: 0

Micheal Palliparambil

Reputation: 23

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.

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!

Upvotes: 0

Đỗ Tuấn

Reputation: 11

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

Upvotes: 1

Malay Solanki

Reputation: 110

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

Upvotes: 1

daliudzius

Reputation: 151

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

Upvotes: 7

Tuan Le Anh

Reputation: 269

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

Upvotes: 2

Praphan Klairith

Reputation: 1052

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

Upvotes: 66

BadPirate

Reputation: 26177

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

Upvotes: 29

Mahdi Afzal

Reputation: 827

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

Upvotes: 23

Prashant Pandey

Reputation: 158

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

Upvotes: 3

Alan

Reputation: 10125

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

Upvotes: 8

rap-2-h

Reputation: 31948

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}`)
  })
})

Upvotes: 2

Enea Dume

Reputation: 3232

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

Upvotes: 11

Nextjs public folder

Answers (15)

Related Questions