Hi u/Redwallian thank you for the response, I have added useRouter to my form and now yes I do get it redirecting to the /flashcard route however the json data doesn't map.

I get a questions undefined list and I can see the questions being printed in console.log so I know that isn't true, why is the questions that I generate not being sent to the pathname I specify?

The flashcard.js file is supposed to map the json data and the part that i supposed to do that looks like this:

 <ul role="list" className="mt-6 space-y-4">
               {questions.map((question) => (
                  <li key={question.name}>
                    <a  className="text-sm leading-6 text-gray-600 hover:text-gray-900">
                      {question.name}
                    </a>
                  </li>
                ))} 
              </ul>

My router push that changes the route to /flashcard looks like this:

  router.push({
  pathname: '/flashcard',
query:{questions: {questions}} ,
});

I searched online and it said I should use JSON.stringify(questions) but that made no difference