Nextjs 公用文件夹

Posted 2023-02-22

【中文标题】Nextjs 公用文件夹

【英文标题】：Nextjs public folder

【发布时间】：2019-06-23 11:08:35

【问题描述】：

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

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

【参考方案1】：

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

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

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

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

更多阅读Docs

【讨论】：

自 2019 年 5 月 1 日起，除了静态文件夹外，还添加了公用文件夹支持。请参阅此 PR github.com/zeit/next.js/pull/7213

【参考方案2】：

根据this issue，您可以在服务器端提供静态文件，就像这样 (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`)
  )
)

【参考方案3】：

Next.js 有一个public/ 文件夹

创建public/favicon.png、public/robots.txt 之类的东西，这就是你所需要的。

并将您的 static 文件夹放在 public 中，以将您的资产保存在其中，并具有所有资产捆绑和压缩优势。

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

Documentation

【参考方案4】：

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

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

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

【讨论】：

这仅在运行下一个开发时对我有效。当我进行下一次构建和部署时，我得到一个 404

【参考方案5】：

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

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

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

【参考方案6】：

对于 Next.js 9： Next.js 可以在根目录中名为 public 的文件夹下提供静态文件，例如图像。然后，您的代码可以从基本 URL (/) 开始引用 public 中的文件。

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

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


export default MyImage

参考：enter link description here

【参考方案7】：

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

下一个.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

【讨论】：

嘿，我试过你的解决方案。在 localhost 上，当我启动服务器时它会引发此错误。错误：ENOENT：没有这样的文件或目录，打开 '/Roboto-Regular.ttf' 在随后的 API 调用中，它按预期工作并且我的字体正确加载。当我部署到生产环境时，它每次都会崩溃 ENOENT: no such file or directory, open '/vercel/path0/public/Roboto-Regular.ttf 你有什么建议吗？

@user3884753 - 嗯，看起来你在 vercel 上托管，我对他们个人如何作为主机工作不是很熟悉。我会仔细检查路径，并可能联系您的服务器主机支持，因为这似乎是路径和本机操作系统行为的问题（他们可能会提供帮助）

【参考方案8】：

nextjs 项目的公用文件夹在哪里？

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

您可以在https://github.com/dotuan9x/nextjs-boilerplate 参考该示例。我已经将它用于我的网站https://meovathay.vn 和现实https://meovathay.vn/favicon.ico

【参考方案9】：

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

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

【参考方案10】：

Next 可以使用 /public 文件夹。如果你没有它，只需创建一个。我的小项目设置为：

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