Hi everyone, I'm currently learning next.js and I'm facing an issue while trying to set up a route like **pages/perfil/[name]**
The problem I'm encountering is that the data fetched from an API call for this page is based on an id, but I want the name to appear in the route instead.
Let me walk you through how I approached this
Here are the interfaces representing the data structure
export type userFriends = {
_id?: string;
name?: string;
perfil?: string;
identifier?: string;
notification?: boolean;
friend?: boolean;
createdAt?: string;
};
export type user = {
_id?: string;
name?: string;
email?: string;
password?: string;
friends?: userFriends[];
banner?: string;
perfil?: string;
};
export interface IuserData {
data: user;
}
export type multipleUsers = { data: user[] };
Now, let's take a look at the logic implemented
export const getStaticPaths: GetStaticPaths = async () => {
const { data }: multipleUsers = await axios.get(
"http://localhost:5000/api/user"
);
const paths = data.map(path => {
return { params: { name: path.name, id: path._id } };
});
return { paths, fallback: true };
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const { data }: IuserData = await axios.get(
`http://localhost:5000/api/user/singleU/${params.id}`
);
return {
props: { data }
};
};
The route only works when using [id] instead of [name], even though both parameters are included in the params object.
This consistently triggers an error in next.js
Error: Request failed with status code 500
...
Error details here...
...
Any suggestions on what I can do to resolve this issue?
Appreciate your assistance!