Next.js 13 App目录下如何在服务器内存存储数据？

1. 修改客户端表单提交逻辑 #

在你的handleSubmit函数中，添加POST请求将JSON数据发送到API路由，替换原有的console.log(jsonToSend)后的TODO注释：

const handleSubmit = async (event) => {
  event.preventDefault(); // 阻止表单默认提交行为

  if (formIsValid) {
    // ... 原有的jsonToSend生成逻辑保持不变 ...

    console.log(jsonToSend);

    // 新增：发送POST请求到API路由
    try {
      const response = await fetch('/api/addComunidad', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(jsonToSend),
      });

      if (response.ok) {
        const result = await response.json();
        console.log('数据已存储到服务器:', result);
        // 可选：提交成功后重置表单
      } else {
        console.error('存储失败:', response.statusText);
      }
    } catch (error) {
      console.error('请求出错:', error);
    }
  }
}

2. 完善API路由的内存存储逻辑 #

修改/app/api/addComunidad/route.js，替换原有的GET函数，实现POST接收数据、内存存储的逻辑：

import { NextResponse } from 'next/server';

// 服务器内存存储容器，仅用于演示，服务器重启后数据会丢失
let storedComunidades = [];

// 处理POST请求，接收并存储表单数据
export async function POST(request) {
  try {
    // 1. 解析请求体中的JSON数据
    const formData = await request.json();

    // 2. 将数据存入服务器内存数组
    storedComunidades.push(formData);

    // 3. 返回成功响应
    return NextResponse.json(
      { message: '数据存储成功', data: formData },
      { status: 201 }
    );
  } catch (error) {
    return NextResponse.json(
      { message: '数据解析失败', error: error.message },
      { status: 400 }
    );
  }
}

// 可选：添加GET接口，用于查看所有已存储的数据
export async function GET() {
  return NextResponse.json({ storedComunidades });
}

关键说明 #

• HTTP方法选择：必须用POST请求发送表单数据，GET请求不适合携带请求体，不符合REST规范。
• 内存存储特性：全局变量storedComunidades会在服务器运行期间保持数据，但服务器重启、代码热重载后数据会被清空，仅适合演示场景。
• App Router API规则：路由文件中需通过导出对应HTTP方法的函数（如POST、GET）来处理请求，请求体通过request.json()解析，而非旧版的req.body。

内容的提问来源于stack exchange，提问作者Alex