I am new to Next.js and
I've been trying to to use getStaticProps in my dynamic pages in my Next.js app
and I get this error:
Error: getStaticPaths is required for dynamic SSG pages and is missing for '/query/[itmid]'
[itmid].jsx
function Query({ posts }) {
return (
{posts.map((itm, k) => {
return (
<>
<Head>
<title> {itm.Name} - wixten </title>
</Head>
<div key={itm._id} className="Question-one">
<h1> {itm.Name}</h1>
<h2>{itm.Summary}</h2>
</div>
<div className="username">
<span className="username2">--{itm.username}</span>
</div>
</>
);
})}
</>
<div className="multi-container">
<Answershooks id={gotid} />
<RealtedPost />
</div>
</>
);
}
export async function getStaticProps() {
const res = await fetch("https://ask-over.herokuapp.com/questone/" + gotid);
console.log("check");
console.log("dada");
const posts = await res.json();
return {
props: {
posts,
},
};
}
export default Query;
Why am I getting this error?
What getStaticProps does is to generate the static page, but you need to tell next js, what are the paths to generate?
export async function getStaticPaths() {
return {
paths: [
{ params: { query: 'slug-1' }},
{ params: { query: 'slug-2' }}
],
fallback: true // false or 'blocking'
};
}
Then in your getStaticProp
export async function getStaticProps({ params }) {
//params.query will return slug-1 and slug-2
const res = await fetch("https://ask-over.herokuapp.com/questone/" + params.query);
console.log("check");
console.log("dada");
const posts = await res.json();
return {
props: {
posts,
},
};
}
You need to use params.query if you name your file [query].js.
The above codes will generate static paths /slug-1 and /slug-1.
If you are not trying to generate static pages (which seems like it), then you should probably use getServerSideProps which generates page on the go.