我正在阅读 Nextjs 获取文档的数据部分，我想到了一个问题。
Nextjs 可以使用 getStaticProps、getStaticPaths、getInitialProps 和 getServersideProps 获取数据，对吗？
但正如我引用的那样，有些发生在构建时：
getStaticProps（静态生成）：在构建时获取数据
这个构建时间是什么时候发生的？
是在我们运行 npm run build 时吗？（构建生产版本）
或者当用户访问我们的 Nextjs 应用程序时？（在每个请求上）
希望有人可以帮助我，也许它可以帮助其他人！
reactjs next.js getserversideprops getstaticprops getstaticpaths
我正在尝试使用以下getStaticProps()方法调试我的页面中包含的 React 组件的方法console.log()：
export default class Nav extends React.Component {
render() {
return <nav></nav>;
}
async getStaticProps() {
console.log('i like output, though');
}
}
但是，我既无法在提供应用程序的控制台上看到任何输出，也无法在浏览器的控制台上看到任何输出。我还尝试重新启动yarn dev并运行yarn build以查看它是否会产生输出。唉，没有雪茄。
那么从getStaticProps()and生成和读取调试输出的正确方法是什么 getStaticPaths()？
我正在尝试使用 [slug].js 通过 getStaticProps 和 getStaticPaths 呈现与 index.js 相邻的页面。使用动态路由导航到页面后，出现不匹配错误。即使提供的路径实际上与页面 slug 和页面道具内容匹配，也会发生此错误。
当 index.js 被复制并重命名为 page-name.js（例如“about.js”）时，页面呈现良好，所以我相信问题在于我如何使用 getStaticPaths。实际上，我并没有完全理解 getStaticProps 和 getStaticPaths 之间的关系。是否有一些映射允许引擎根据地图中的任何路径查找适当的道具？
索引.js
import Link from 'next/link';
import { getPageDataBySlug } from '../lib/api';
export default function Page(pageData) {
const page = pageData;
return (
<>
<h1>document title is: {page.documentTitle}</h1>
<Link href="/[slug]" as="/about">
<a>
<h5>Link to About</h5>
</a>
</Link>
</>
);
}
export async function getStaticProps() {
const props = await getPageDataBySlug('home');
return {
props
};
}
[slug].js
import Link from 'next/link';
import …我正在尝试 Next.js 并构建一个小应用程序，该应用程序从安装了 GraphQL 的无头 WordPress 应用程序中获取帖子。然后我使用 Apollo/Client 来获取 GraphQL 内容：
apollo-client.js
import { ApolloClient, InMemoryCache } from "@apollo/client";
const client = new ApolloClient({
uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT,
cache: new InMemoryCache(),
});
export default client;
在索引中，我抓住了帖子：
索引.js
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { gql } from "@apollo/client";
import Link from "next/link";
import client from "../apollo-client";
function Home(props) {
const { posts } = props;
return (
<div className={styles.container}>
<Head>
<title>Wordpress blog posts</title>
<meta
name="description"
content="Wordpress blog posts with …我面临的问题是，在使用getStaticPaths和getStaticProps
export async function getStaticPaths() {
const url =
process.env.NODE_ENV === "development"
? "http://localhost:3000"
: "https://websitename.vercel.app";
const res = await fetch(`${url}/api/posts`);
const posts = await res.json();
console.log("posts: ", posts);
const paths = posts.map(({ slug }) => ({
params: { slug },
}));
console.log("Paths: ", paths);
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
console.log("params: ", params);
const url =
process.env.NODE_ENV === "development"
? "http://localhost:3000"
: "https://websitename.vercel.app";
const res = await fetch(`${url}/api/post`, …Next.js 初学者，希望获得有关使用getStaticPaths和getStaticProps包罗万象的路线的指导。大多数 Next.js 9.3+ 博客入门者似乎仅基于一个级别的博客文章（例如，/posts/post-1.md，/posts/post-2.md等），但我徒劳地尝试找到的是入门者 \xe2\x80\x94 或只是一个一组指令 \xe2\x80\x94 ，用于解决处理问题，例如/posts/yyyy/mm/postname.md通过/pages/posts/[...post].js.
当然，我确实阅读了有关这些项目的 Next.js 文档，但我发现它们至少在这种特殊情况下缺乏帮助。我确实意识到它们是为更有经验的 Next.js 开发人员编写的。这一项来自https://nextjs.org/docs/routing/dynamic-routes，让我尽可能接近目前的情况，但还不够远：
\n\n\n如果页面名称使用 catch-all 路由，例如
\npages/[...slug]，params则应包含slugwhich 是一个数组。例如，如果该数组为[\'foo\', \'bar\']，则 Next.js 将静态生成位于 的页面/foo/bar。
我尝试使用fs-readdir-recursive读取/posts/目录的各个级别并且可以工作，但是它给我的并没有产生getStaticPaths想要的数组。我确定我只需要调整结果，但找不到任何示例来帮助我弄清楚。（大多数比一级场景更进一步的例子似乎都是处理从数据库中获取数据，也许是因为我试图找到的场景被认为太简单了。对于非初学者来说，可能是这样，但是......）