javascript - Next Js 服务端 Api 读写 JSON

Question

我正在尝试使用 Next.js 为自己编写一个基本的本地 api，它是一个时间线生成器，我一直坚持从 api 文件夹中读取文件。
我在本地应用程序中想要什么:
1.一个简单的页面，我可以在其中输入事件，带有日期和描述
2.在某处打开 list.json 文件并将新事件推送到该 json 文件，并在其上写入。
我目前在做什么以及我被困在哪里:
我知道我们不能在客户端写入文件，所以我开始查看下一个 js 中的 api 路由以访问 JSON 文件，但我什至无法读取它!
我在 pages 文件夹中有一个 api 文件夹，在这个 api 文件夹中我有两个文件:一个是 list.json 文件，我之前在其中手动编写了一些具有相应日期的事件；另一个是 getlist.js，代码如下:

var fs = require('fs');

export default function getList(req, res) {
    const rawList = fs.readFile('list.json');
    var list = JSON.parse(rawList);
    res.json(list);
}
  

现在在 pages 文件夹上我有一个 index.js 文件，我尝试使用 getStaticProps() 访问这个 getlist.js api，如下所示:

import getlist from './api/getlist'

export async function getStaticProps(){

    var list = getlist();

    return {
        props: {
            list
        }
    }
}

我已经尝试使用其他东西，比如 fecth 函数，来访问 getlist.js，但我所做的似乎没有任何效果。
谁能帮我？
而且由于我已经在这里，我将如何设法从客户端页面中已有的表单中获取输入并将其写入我的 api 文件夹中的 list.json 文件？

Answer 1

有两种方法可以在 next.js 中读取 json:

内部导入getStaticProps [https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation]

    export async function getStaticProps(context){
      const example = await import('./api/example.json');
      return {props: {example: example.default}}
    }

导入或读入handler内部函数 api文件夹 [https://nextjs.org/docs/api-routes/introduction]:

    const fs = require('fs');
    
    export default async function handler (req, res) {
      const example = await fs.readFile('./example.json');
      return res.status(200).json({example});
    }

为了编写 *.json 文件，您需要向服务器 api 发送带有值的请求( handler 来自前面提到的 api 文件夹)。
这就是编写 json 的部分的样子:

    const fs = require('fs');
    
    export default async function handler(req, res) {
      //...
      if (req.method === 'POST'){
        fs.writeFileSync('./example.json', JSON.stringify(req.body))
        return res.status(200).json({});
      }
      //...
    }