I have a problem with the 'getStaticPaths' function. A required parameter (id) was not provided as a string in getStaticPaths
I have a problem with the 'getStaticPaths' function. A required parameter (id) was not provided as a string in getStaticPaths. Even I Have used id: users.id.toString()
export default function usersID({ users }) {
return (
<div>
<h1> {mobile.name} </h1>
</div>
);
}
export const getStaticPaths = async () => {
const res = await fetch(`http://jsonplaceholder.typicode.com/users`);
const data = await res.json();
const paths = data.map((users) => {
return {
params: {
id: users.id.toString()
},
};
});
return {
paths,
fallback: false,
};
};
export const getStaticProps = async (context) => {
const id = context.params.id;
const res = await fetch(`http://jsonplaceholder.typicode.com/users/${params.id}` );
const data = await res.json();
return {
props: { users: data },
};
};
I have no error on my side, just in getStaticProps it is not params.id but id
the folder structure is
---user -----> [id].js
using id 2 is accessible from my_url.example/user/2
//[id].js
import React from "react";
const User = ({ users }) => {
console.log(users);
return <div>user</div>;
};
export const getStaticPaths = async () => {
const res = await fetch(`http://jsonplaceholder.typicode.com/users`);
const data = await res.json();
const paths = data.map((users) => {
return {
params: {
id: users.id.toString(),
},
};
});
return {
paths,
fallback: false,
};
};
export const getStaticProps = async (context) => {
const id = context.params.id;
const res = await fetch(`http://jsonplaceholder.typicode.com/users/${id}`);
const data = await res.json();
return {
props: { users: data },
};
};
export default User;