How to send json data created by nextjs api to a new route?

I am a complete web development noob and I am also a bit new to Javascript.
I am trying to make a quizlet style website where users can input the subjects and specific topic they're not very good at and then they get practice questions back rendered in a flashcard.js file I have.

For this I wrote an api in nextjs that generates these practise questions, I know the api works because I see it print out these questions, however I can't figure out how to parse the data into the flashcard.js file.

This is what my handler in my api looks like:

import { Configuration, OpenAIApi } from 'openai';
import { NextApiRequest, NextApiResponse } from 'next';
import { NextResponse } from 'next/server';
import { useRouter } from 'next/router';
export default async function handler(req, res) {
    const { subject, topic, exam_board, qualification } = req.body;
    const questions = await generateQuestions(subject, exam_board, qualification, topic);
    console.log(questions);
    console.log()
  
    res.status(200).json({ questions });
     }
}

I would like to try using useRouter but I can't use it within the handler so sort of open to any ideas.

I have been stuck on this for months so any help would be greatly appreciated.

I think what you can do is store the results in a state.

You will need to import useState from React.

import { useState } from 'React';

And declare your state like this.

const [questions, setQuestions] = useState(<default-state-value>);

Then pass it as a prop to the flashcard.js component.
You will need to import the component.

import FlashCard from '<path-to-flashcard.js>'

Then call that component and pass questions state as a prop

<FlashCard questionsProp={questions} />

And inside that component you can use conditional rendering so that when your state is loaded with the data, then it will get updated in the UI.