使用 next.js 在前端进行 API 调用

Question

next.js 的新手，并试图连接从我的组件进行 Prisma 调用。 按照文档和示例执行此操作：

try {
  await fetch('/api/postQuestion', {
    method: 'POST',
    headers: {"Content-Type": "application/json"}
  });
} catch (error) {
  console.error(error);
}

然而，它什么也没做。

这里是 postQuestion.js：

import prisma from "../../lib/prisma.js";

export default async function handler(req, res) {
    if (req.method === 'POST') {
        return await createQuestion(req, res);
    }
    else {
        return res.status(405).json({ message: 'Method not allowed', success: false });
    }
}

async function createQuestion(req, res) {
    try {
        const newQuestion = await prisma.question.create({
            data: {
                question: 'wow?',
                option1: 'blue',
                option2: 'red'
            }
        });
        return res.status(200).json(newQuestion, {success: true});
    } catch (error) {
        console.error("Request error", error);
        res.status(500).json({ error: "Error creating question", success:false });
    }
}

Answer 1

获取本地 API 数据的正确方法是使用 getStaticProps 函数并返回数据

https://nextjs.org/docs/basic-features/data-fetching/get-static-props

export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}