Next Js 服务端 Api 读写 JSON

Posted 2023-03-07

【中文标题】Next Js 服务端 Api 读写 JSON

【英文标题】：Next Js Server Side Api Read and Write JSON

【发布时间】：2021-05-27 22:07:29

【问题描述】：

我正在尝试使用 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 文件？

【问题讨论】：

您的意思可能是使用readFileSync，因为readFile 需要回调函数。

您应该直接从getStaticProps 致电fs.readFile('list.json')。 getStaticProps 只在服务器上运行，你应该直接从它调用任何服务器特定的代码。

谢谢！有效！但是现在我该如何处理要在该文件上写入的表单提交？每次按表单提交时，一旦构建完成，我就无法使用 getStaticProps 运行服务器端代码，那么我应该使用什么其他机制？

我不知道如何在 Next 中执行此操作而无需使用自定义快递服务器，所以现在我根本不使用 next。

【参考方案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
    

在api文件夹[https://nextjs.org/docs/api-routes/introduction]中导入或读取handler函数：

    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();
      
      //...