Блог

У меня есть проект, сделанный с React/Next.js.

Это каталоги файлов.

То, что я пытаюсь сделать, это заставить пользователя GET — /api/grademate/pay и вернуть 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 (  lt;div className={styles.container}gt;  lt;Headgt;  lt;titlegt;Payment Successlt;/titlegt;  lt;meta name="description" content="Your payment was successful!" /gt;  lt;link rel="icon" href="/favicon.ico" /gt;  lt;/Headgt;   lt;main className={styles.main}gt;  lt;h1 className={styles.title}gt;  Payment Successful!  lt;/h1gt;  lt;/maingt;   lt;/divgt;  ) }  

Когда я пытаюсь зайти /api/grademate/pay/success , ничего не происходит, страница просто загружается и выводится эта ошибка:

API разрешен без отправки ответа для /api/grademate/success, это может привести к остановке запросов.

Имейте в виду, что я новичок в мире React и Next.js

В Next.js, api папка используется только для маршрутов API.

Ваши обычные компоненты страницы не должны находиться внутри api папки, они должны находиться pages непосредственно под папкой.

Например, pages структура ваших папок может выглядеть следующим образом.

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

Success Затем доступ к вашей странице можно получить по адресу /grademate/pay/success .