Nextjs public 文件夹

Question

nextjs 项目的 public 文件夹在哪里？

我的意思是，有什么地方可以放置 favicon.png、google 站点验证、manifest.json、robots.txt 等吗？

Answer 1

静态文件服务（例如：图像）

在您的项目根目录中创建一个名为 static 的文件夹。从您的代码中，您可以使用 /static/ URL 引用这些文件：

export default () => <img src="/static/my-image.png" alt="my image" />

注意：不要给静态目录命名。该名称是必需的，并且是 Next.js 用于提供静态资产的唯一目录。

阅读更多Docs

Answer 2

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

Answer 3

Next.js 有一个 public/ 文件夹

创建诸如 public/favicon.png、public/robots.txt 之类的内容，这就是您所需要的。

并将您的 static 文件夹放在 public 中，以将您的资产保存在其中，并获得所有资产捆绑和压缩的好处。

/public
    /static
        /images
        /css
        /fonts
    robots.txt
    manifest.json

Documentation

Answer 4

静态目录已被弃用，取而代之的是 public 目录。 https://err.sh/zeit/next.js/static-dir-deprecated

在您的项目根目录中创建一个名为 public 的文件夹。从您的代码中，您可以使用 URL 引用这些文件：

export default () => <img src="/my-image.png" alt="my image" />

Answer 5

您可以在项目的根目录中创建一个 public 文件夹。 NextJS 会自动从文件夹中抓取网站的静态内容。

如果图像在 public 文件夹中，图像 URL 是：projectRoot/public/myImg.jpg 那么您可以在 JSX 或 TSX 文件中使用 /myImg.jpg

有关详细信息，请查看文档：https://nextjs.org/docs/basic-features/static-file-serving

Answer 6

对于 Next.js 9: Next.js 可以在根目录中名为 public 的文件夹下提供静态文件，例如图像。 public 中的文件可以被您的代码从 URL (/).

开始引用

例如，如果您向 public/my-image.png 添加图像，则以下代码将访问该图像：

function MyImage() {
  return <img src="/my-image.png" alt="my image" />
}

export default MyImage

参考：enter link description here

Answer 7

对于 Web 进程，/public 中的任何内容在 url 中都非常容易。但是，如果您尝试访问 nextjs 服务器端的文件（在静态异步 SSR 之一中，或者作为 API 调用）——因为那里的路径似乎需要是绝对路径。要访问它，您需要在构建时捕获运行目录，然后访问它。

next.config.js:

module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    }
}

以及获取服务器端路径的助手：

import path from 'path'
import getConfig from 'next/config'

const serverPath = (staticFilePath: string) => {
  return path.join(getConfig().serverRuntimeConfig.PROJECT_ROOT, staticFilePath)
}

export default serverPath

Answer 8

nextjs 项目的 public 文件夹在哪里？

答：进入项目根目录，创建public文件夹，将favicon.png放入其中。

您可以在 https://github.com/dotuan9x/nextjs-boilerplate. I already use this for my website https://meovathay.vn and reality https://meovathay.vn/favicon.ico

参考示例

Answer 9

/public 文件夹。你添加文件到此文件夹后需要重启网站

Answer 10

接下来可以使用/public文件夹。如果你没有，就创建一个。我将我的小项目设置为：

project-root
    /public
        /blog-images
        /fonts
        favicon.ico
        etc.png
    /src
        /pages
        /components
        /styles
            globals.css
        /utils

Nextjs public 文件夹

Nextjs public folder

reactjs

next.js