Next.js中API提交数据后无法获取数据问题求助

• 无数据持久化逻辑：当前/api/uploadNftData接口仅接收POST请求的payload并直接返回，未将数据写入任何持久化存储（如文件、数据库），请求结束后数据直接丢失。
• 数据获取方式错误：页面获取数据时使用POST请求且传递空body，接口仅处理POST请求的接收逻辑，未实现返回存储数据的分支；同时，获取数据的标准HTTP方法应为GET，而非POST。
• API无状态特性限制：Next.js的API路由是无状态的，每次请求都会创建新的函数实例，即使在API内用变量临时存储数据，下一次请求也会重置丢失。

1. 修改API接口，实现数据持久化与GET查询逻辑 #

以下以本地JSON文件作为简易持久化存储（生产环境建议使用MongoDB、PostgreSQL等数据库）：

const { log } = console;
const fs = require('fs');
const path = require('path');

// 定义数据存储文件路径
const dataFilePath = path.join(process.cwd(), 'data', 'nftData.json');

// 确保存储目录存在
const ensureDir = () => {
  const dir = path.dirname(dataFilePath);
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir, { recursive: true });
  }
};

// 读取存储的数据
const readData = () => {
  ensureDir();
  if (!fs.existsSync(dataFilePath)) {
    return {};
  }
  const rawData = fs.readFileSync(dataFilePath);
  return JSON.parse(rawData);
};

// 写入数据到文件
const writeData = (data) => {
  ensureDir();
  fs.writeFileSync(dataFilePath, JSON.stringify(data, null, 2));
};

export default function uploadNftData(req, res) {
  if (req.method === "POST") {
    const nftData = req.body;
    log("Req payload", nftData);
    // 将数据写入持久化存储
    writeData(nftData);
    res.status(200).json({ success: true, data: nftData });
  } else if (req.method === "GET") {
    // 读取存储的数据并返回
    const storedData = readData();
    res.status(200).json(storedData);
  } else {
    res.status(405).json({ msg: "Method not allowed" });
  }
}

2. 修改数据获取页面，使用GET请求获取数据 #

import { useState, useEffect } from 'react';
import Main from '../components/Main';
import Templatepage from '../components/Templatepage';
import TemplateHeader from '../components/TemplateHeader';
import Herosec from '../components/Herosec';
import Box from '@mui/material/Box';

function page() {
  const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch("/api/uploadNftData", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => res.json())
      .then((storedData) => {
        setData(storedData);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Fetch error:", error);
        setLoading(false);
      });
  }, []);

  if (isLoading) return <p>Loading...</p>;
  if (!data || Object.keys(data).length === 0) return <p>No profile data</p>;

  return (
    <>
      <Main>
        <Templatepage>
          <TemplateHeader />
          <Herosec>
            marketplace
            <Box
              sx={{
                background: "#000",
                height: "200px",
                width: "200px",
                margin: "80px",
              }}
            >
              <h1 style={{ color: "#fff" }}>{data.addStory}</h1>
              <p style={{ color: "#fff" }}>{data.selectedVideoUrl}</p>
            </Box>
          </Herosec>
        </Templatepage>
      </Main>
    </>
  );
}

export default page;

3. 注意事项 #

• 本地JSON文件存储仅适合开发测试，生产环境需改用数据库，避免并发写入冲突。
• 若需存储多条NFT数据，可将存储结构改为数组，POST时追加数据，GET时返回整个数组。
• 部署到Vercel等平台时，本地文件存储不可用，需改用云数据库或云存储服务。

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