Nextjs公用文件夹

下一页.js有一个 public/ 文件夹

public/favicon.png , public/robots.txt

把你的 static 文件夹内 public

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

Documentation

静态文件服务(例如:图像)

创建一个名为 static /static/

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

注意

Docs

对于web进程来说,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

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

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

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

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

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

如果图像在 public 文件夹,以便图像URL为: projectRoot/public/myImg.jpg 然后您可以在JSX或TSX文件中使用 /myImg.jpg

https://nextjs.org/docs/basic-features/static-file-serving

为了下一页.js9: public 在根目录中。里面的文件 然后可以由从基URL开始的代码引用( /

例如,如果将图像添加到 public/my-image.png ,以下代码将访问图像:

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

export default MyImage

参考文献: enter link description here

回答: 文件:

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

下一页.js可以在根目录中名为public的文件夹下提供静态文件(如图像)。然后,您的代码可以从基URL(/)开始引用public中的文件。 官方 docs

/public 文件夹并从页面或组件文件访问它。

public/favicon.png ,以下代码将访问图像: <img src="/favicon.png" alt="my image" />

但是如果您想像ES6(Import)那样访问,那么您需要使用 next-images link 请仔细阅读文档,您可以使用多种方法来使用,但这完全取决于您希望如何在组件或页面上使用图像。别迷惑了。

对于谷歌网站验证或其他文件:你可以把任何文件放在里面 public 但通过 _document.js 具有 next/document documentation 特别地 Head 北美 NextScript

public 文件夹和放置 favicon.png 把它放进去。

https://github.com/dotuan9x/nextjs-boilerplate . 我已经把这个用在我的网站上了 https://meovathay.vn 和现实 https://meovathay.vn/favicon.ico