如何在NextJS中将本地文件存储到公共文件夹中？

Question

我有一个NextJs项目，今天尝试部署它，发现了很多错误。

我有很多图像和 pdf/doc 文件，我需要显示 img 并使用按钮下载文件。

公共文件夹中存储的所有文件在此处输入图像描述

但是我在本地使用文件（pdf/doc）时遇到此错误

Module not found: Can't resolve '/catalogs/...

。并在部署图像时遇到相同的错误。

我尝试将所有文件移至公用文件夹，但没有帮助。

Answer 1

公共文件夹是放置静态 pdf/图像的“正确”方式。

想象一下，您已将所有 PDF 放入

/public/pdf

文件夹中，并且您的项目托管在

http://localhost:3000

您可以通过键入

从浏览器访问您的图像/pdf

http://localhost:3000/pdf/{file_name}.pdf

对于组件端，不需要输入basePath（例如localhost），直接这样就可以了。

import Link from 'next/link'


...

<Link href="/pdf/file_name.pdf" locale={false}>...</Link>

Answer 2

它是如何运作的 输入字段：用户输入品牌、型号、处理器、RAM、存储和价格等详细信息。 提交按钮：单击“提交”按钮后，详细信息将被保存并以视觉风格的卡片格式显示。 卡片设计：提交的详细信息显示在整洁、用户友好的卡片中。 这个 React 应用程序干净、直观且易于扩展！！