Next.js API 路由已解决但未发送响应

Question

我有一个用 React/Next.js.

制作的项目

这是文件目录。

我想做的是让用户 GET - /api/grademate/pay 和 return 进入 success 页面。获取 /api/grademate/pay 没有问题。问题是，在测试时，success 页面在我尝试手动访问时无法加载。

这是我的 index.js 文件在 success 文件夹中的样子：

import Head from 'next/head'
import Image from 'next/image'
import styles from '../../../../styles/Home.module.css'

export default function Success() {
    return (
        <div className={styles.container}>
            <Head>
                <title>Payment Success</title>
                <meta name="description" content="Your payment was successful!" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main className={styles.main}>
                <h1 className={styles.title}>
                    Payment Successful!
                </h1>
            </main>

        </div>
    )
}

当我尝试访问 /api/grademate/pay/success 时，没有任何反应，只是加载了页面并打印了此错误：

API resolved without sending a response for /api/grademate/success, this may result in stalled requests.

请记住，我是 React 世界的新手，Next.js

Answer 1

在 Next.js 中，api 文件夹用于 API 路由仅。

您的普通页面组件应该不在api文件夹内，它们应该直接位于pages文件夹下。

例如，您的 pages 文件夹结构可能如下所示。

pages/
  api/
    grademate/
      pay.js
  grademate/
    pay/
      success/
        index.js
  _app.js
  index.js

然后可以在 /grademate/pay/success 访问您的 Success 页面。

Next.js API 路由已解决但未发送响应

Next.js API route resolved without sending a response

routes

reactjs

next.js