CODEWITHSUNDEEP
javascriptreactjsnext.js
vivek kn
vivek kn

Reputation: 265

getStaticPaths is required for dynamic SSG

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?

Upvotes: 1

Views: 3456

Answers (1)

Someone Special
Someone Special

Reputation: 13588

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.

Upvotes: 1

Related Questions