Question

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

我的意思是，我可以在哪里放置favicon.png，Google网站验证，manifest.json，robots.txt等？

Answer 1

不推荐使用静态目录，而推荐使用public目录。 https://err.sh/zeit/next.js/static-dir-deprecated

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

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

Answer 2

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

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

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

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

有关更多信息，请阅读Azure file image path using java

Answer 3

对于Web处理，/ public中的任何内容都非常容易。但是，如果您尝试访问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

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

Answer 5

[2019-07-16] Next.js（canary）有一个public/文件夹

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

结帐an example

Answer 6

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

如果图像位于db.getCollection('test').find().forEach(function(res) { print( "Id: " + res._id ); db.getCollection('test').update( { "units.rating.exact_rating" : { $exists: true }}, { $set: { "units.$[].rating.exact_rating": {"rating": res.units.rating.exact_rating.rating}} }, { multi: true }) });文件夹中，并且图像URL为：public，则可以使用projectRoot/public/myImg.jpg

在JSX或TSX文件中访问它。

有关更多信息，请查看文档：{{3}}

Answer 7

对于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

Answer 8

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

答案：请检查项目的根目录并搜索“ public”。如果找不到，请在项目根目录中创建一个名为“ public”的文件夹。文件：

/
  /.next 
  /node_modules
  /out
  /public
  /src
     /pages
          /_app.js
          /_document.js
          /index.js
    /components
  composer.json
  next.config.js

Next.js可以在根目录中名为public的文件夹下提供静态文件（例如图像）。然后，您的代码可以从基本URL（/）开始引用public内部的文件。官方docs

对于图像：是的，您可以将任何图像拖放到/public文件夹中，然后从页面或组件文件访问它。

例如，如果您将图像添加到public/favicon.png，则以下代码将访问该图像：<img src="/favicon.png" alt="my image" />

但是，如果您要像ES6（导入）那样进行访问，则需要使用next-images link，请仔细阅读文档，您可以使用多种方式使用，但这完全取决于您如何使用。您要在组件或页面上使用图像。别困惑。

对于Google网站验证或其他文件：您可以将public中的任何文件拖放并访问它，但是更好的方式是通过_document.js与next/document官方documentation一起使用Head和NextScript

Answer 9

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

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

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

Answer 10

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

Nextjs公用文件夹

10 个答案: