动态 SSG 需要 getStaticPaths答案

【问题标题】：getStaticPaths is required for dynamic SSG动态 SSG 需要 getStaticPaths
【发布时间】：2022-02-08 15:57:26
【问题描述】：

我是 Next.js 的新手，并且我一直在尝试在我的 Next.js 应用程序的动态页面中使用 getStaticProps 我得到这个错误：

错误：动态 SSG 页面需要 getStaticPaths 并且缺少 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;

为什么会出现这个错误？

【问题讨论】：

在使用带有getStaticProps 的动态页面时，您必须导出getStaticPaths 函数。但是，如果您不想在构建时预生成页面，您可以从 getStaticPaths 返回一个空的 paths 数组并使用 fallback: 'blocking'。
我想要预生成页面
然后在paths 中指定需要预先生成的路径，如以下答案中的建议：stackoverflow.com/a/71029865/1870780。确保params 也与动态页面名称匹配，在您的情况下为itmid。
@juliomalves 你能告诉我如何将它转换成 getServerSideProps
为什么需要将其转换为getServerSideProps？这是一个完全不同的问题。

标签： javascript reactjs next.js

【解决方案1】：

getStaticProps做的是生成静态页面，但是需要告诉下一个js，生成的路径是什么？

export async function getStaticPaths() {

    return {
      paths: [
          { params: { query: 'slug-1' }}, 
          { params: { query: 'slug-2' }}
      ],
      fallback: true // false or 'blocking'
    };
  }

然后在你的 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,
    },
  };
}

如果您将文件命名为[query].js，则需要使用params.query。

以上代码会生成静态路径/slug-1和/slug-1。

如果您不尝试生成静态页面（看起来像这样），那么您可能应该使用getServerSideProps 来生成页面。

【讨论】：

或 - 错误：在 getStaticPaths 中没有为 /query/[itmid] 提供所需的参数 (itmid) 作为字符串
我得到这个错误
喜欢错误状态，因为您的 itemid 不是字符串。它必须是一个字符串。
codesandbox.io/s/laughing-dew-u1jtt?file=/src/App.js 我已经在这里添加了整个代码你能告诉我我需要改变什么
您的https://ask-over.herokuapp.com/question/ 没有返回任何内容。 gotid 是什么？