Next Js Server Side 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({});
      }
      //...
    }