how do i get data from url params in Nextjs?

[rd554]

I am defining _id: questionId in my backend and I want to fetch my questionId dynamically in my frontend

my route: router.post("/community/postAnswer", postAnswer)

my controller method in node

exports.postAnswer = (req, res) => {
  const answer = req.body.answer || "";
  const userId = req.user._id || "";
  const questionId = req.body.questionId || "";
  Question.findOne({ _id: questionId }, (err, question) => {
    if (err) {
      res.status(400).json({
        error: errorHandler(err),
      });
      return;
    }
    if (!question) {
      res.status(400).json({
        error: "question not found",
      });
      return;
    }
    let newAnswers = [...question.answers, { answer, userId }];
    return question.updateOne({ answers: newAnswers }, (err, success) => {
      if (err) {
        res.status(400).json({
          error: errorHandler(err),
        });
        return;
      }
      if (success) {
        res.json({
          msg: "Answer posted successfully",
        });
      } else {
        res.json({
          error: "Something went wrong. Please try again.",
        });
      }
    });
  });

fetch method in frontend

export const createAnswer = async (answer, token, questionId) => {
  try {
    console.log(answer, questionId);
    const response = await fetch(`${API}/api/community/postAnswer`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({ answer, questionId }),
    });
    let data = await response.json();

    console.log(data);
    return data;
  } catch (err) {
    console.log(err);
    return err;
  }
};

In my component I created AnswerComp and defined questionId. On clickSubmit i want to get answer, token and questionId. I get the first two but questionId comes undefined

const AnswerComp = ({ questionId }) => {
  const [values, setValues] = useState({
    answer: "",
    error: false,
    success: false,
    posted: false,
    postButton: "Post answer",
  });
  const { answer, error, success, postButton } = values;
  const token = getCookie("token");
  const clickSubmit = (e) => {
    e.preventDefault();
    setValues({ ...values, postButton: "posting..." });
    createAnswer(answer, token, questionId).then((res) => {
      if (res.error) {
        setValues({ ...values, error: res.error });
      } else {
        setValues({
          ...values,
          posted: true,
          postButton: "posted",
          success: res.success,
        });
      }
    });
  };

And i created a page of my AnswerComp component

import Head from "next/head";
import Link from "next/link";
import { withRouter } from "next/router";
import { createAnswer } from "../../actions/community";
import AnswerComp from "../../components/community/AnswerComp";
import { API, DOMAIN, APP_NAME, FB_APP_ID } from "../../config";

const Answer = ({ answer, questionId, community, query }) => {
  return (
    <React.Fragment>
      <AnswerComp />
    </React.Fragment>
  );
};

Answer.getInitialProps = async ({ query }) => {
  const res = await createAnswer(query.questionId);
  if (res.error) {
    console.log(res.error);
  } else {
    return { answer: res.answer, query };
  }
};

export default withRouter(Answer);

And here's the error I get POST http://192.168.0.102:8000/api/community/postAnswer 400 (Bad Request)

I feel I have to pass dynamic route in my route.post. Kind of how we present "/:slug". I am confused here on one point that whether if I am answering on a particular question with a specific _id, it should print my answer and questionId both. But how to pass my data from url params?

coz currently it prints only answer. questionId comes undefined. And that's what I want to print.