Nextjs公用文件夹

Question

哪里是公众对nextjs项目文件夹？

我的意思是，是否有地方在那里我可以把favicon.png谷歌网站验证manifest.json，robots.txt等等？

Answer 1

Next.js 有一个public/文件夹

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

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

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

文档

Answer 2

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

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

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

export default MyImage

参考：在此处输入链接描述

Answer 3

对于网络进程，/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 4

静态文件投放（例如：图片）

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

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

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

有关更多阅读文档

Answer 5

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

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

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