CODEWITHSUNDEEP
reactjsroutesnext.js
Helix
Helix

Reputation: 172

Next.js API route resolved without sending a response

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

This is the file directories.

enter image description here

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

Upvotes: 1

Views: 515

Answers (1)

juliomalves
juliomalves

Reputation: 50418

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.

Upvotes: 1

Related Questions