Next.js API route resolved without sending a response

Question

I have a project made with React/Next.js.

This is the file directories.

What I am trying to do is have the user GET - /api/grademate/pay and return the success page. Fetching /api/grademate/pay works without a problem. The problem is, while testing, the success page does not load when I try to visit it manually.

This is what my index.js file looks like inside the success folder:

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>
    )
}

When I try to visit /api/grademate/pay/success, nothing happens and the page just loads and this error is printed:

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

Keep in mind I am new to the world of React and Next.js

juliomalves · Accepted Answer · 2021-10-17 14:12:55Z

1

In Next.js, the api folder is used for API routes only.

Your normal page components should not be inside the api folder, they should live under the pages folder directly.

For instance, your pages folder structure could look like the following.

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

Your Success page can then be accessed at /grademate/pay/success.

answered Oct 17, 2021 at 14:12

juliomalves

51.1k23 gold badges181 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Helix Over a year ago

Thank you! This worked :)

Collectives™ on Stack Overflow

Next.js API route resolved without sending a response

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related