Greetings! I am currently coding in NextJS and working on a user page that fetches user-specific information from an API. My goal is to extract the ID query from the URL and use it to make an API request.
The API endpoint follows this structure: /Users/{id}
Additionally, I require assistance in displaying this data on the rendered page.
In the address bar, the link format is as follows: http://localhost:3000/userPage?id=2
Below is how my code looks on the userPage:
import { useRouter } from "next/router";
function GetQuery(){
const router = useRouter();
const id = router.query.id;
return id;
}
export const getServerSidePros = async (id) => {
const res = await fetch(`${process.env.BACKEND_URL}/User/${id}`);
const data = await res.json();
return {
props: { users: data },
};
};
const UserPage = (users) => {
return (
<div>
<h1>Hello</h1>
<h1>{users.name}</h1>
</div>
);
}
I seem to be facing trouble extracting the ID from the URL. Only 'Hello' renders without any additional information.
Furthermore, it appears that the GetQuery function remains unused.