Nextjs 公用文件夹答案

【问题标题】：Nextjs public folderNextjs 公用文件夹
【发布时间】：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" alt="my image" />

注意：不要将静态目录命名为其他任何名称。该名称是必需的，并且是 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" alt="my image" />

【讨论】：

这仅在运行下一个开发时对我有效。当我进行下一次构建和部署时，我得到一个 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" alt="my image" />
}

export default MyImage

参考：enter link description here

【讨论】：

【解决方案7】：

对于 web 进程，/public 中的任何内容都在 url 中非常容易。但是，如果您尝试访问 nextjs 服务器端的文件（在静态异步 SSR 之一中，或作为 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

【讨论】：