我应该在哪里存储 JSON 文件并在需要时在 Next.JS 中获取数据？

Question

项目：

我正在开发一个电子商务应用程序，它有超过 1,600 种产品和 156 个类别 .

问题：

最初，在第一个产品页面上，将提取 30 个产品（由于页面限制），但在左侧边栏上，我需要根据 标签 决定的过滤器所有 1,600 种产品。所以这就是为什么我需要在第一次获取所有产品，然后我将通过循环所有产品来提取常见的标签，并立即将它们显示在侧边栏上。

我想要什么？

我不确定，但我认为如果我生成一个包含所有产品的 JSON 文件 并将其存储在某个地方，我可以使用 REST API 获取只需点击 URL Next JS（在 getServerSideProps 或 getStaticProps 中）。

警告：

我尝试将 JSON 文件存储在下一个 js 应用程序的 ./public 目录中，它在 localhost 中有效，但在 vercel 中无效。

这是我为在 ./public 目录中存储 JSON 文件而编写的代码：

fs.writeFileSync("./public/products.json", JSON.stringify(products, null, 2));  //all 1,600 products

Answer 1

一种解决方案是直接从前端获取它（如果文件不是太大），否则，要读取getServerSideProps 中的文件，您将需要自定义 webpack 配置。

//next.config.js
const path = require("path")
const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
    target: "serverless",
    future: {
        webpack5: true,
    },
    webpack: function (config, { dev, isServer }) {
        // Fixes npm packages that depend on `fs` module
        if (!isServer) {
            config.resolve.fallback.fs = false
        }
        // copy files you're interested in
        if (!dev) {
            config.plugins.push(
                new CopyPlugin({
                    patterns: [{ from: "content", to: "content" }],
                })
            )
        }

        return config
    },
}

然后你可以创建一个实用函数来获取文件：

export async function getStaticFile(file) {
    let basePath = process.cwd()
    if (process.env.NODE_ENV === "production") {
        basePath = path.join(process.cwd(), ".next/server/chunks")
    }

    const filePath = path.join(basePath, `file`)
    const fileContent = await fs.readFile(filePath, "utf8")
    return fileContent
}

关于此有一个未解决的问题： Next.js API routes (and pages) should support reading files