在运行时Next Js上将页面添加到动态路由

Question

所以我正在开发一个简单的下一个js应用程序Blog System。所以就像一个基本的博客，我有一个帖子部分，在那里我可以看到我所有发布过的帖子。

帖子页面是一个名为的动态路线

/posts/title-of-the-post   

因此，我使用了getStaticPaths和getStaticProps来提取标题并从mongodb数据库中获取数据。一切都很顺利。

但我有另一条叫的路线

/posts/add-new

这为我的数据库添加了一个新的帖子，我的读者可以看到这些。所以这个功能是有效的，当我创建一个新的帖子时，它会保存在数据库中，但当我试图用posts/new-post-url的url访问它时，我会得到404 Not Found错误。

我可以很好地理解，动态页面和路径是在运行时构建的，所以当我添加新页面时，它不在构建文件夹中，所以404。

但如何解决它。我想要的是在我的博客中添加新页面的能力，它们应该对SEO友好，对用户可见。就像我在堆栈溢出上发布这个问题一样，它现在可以通过url访问，一段时间后它将占据谷歌搜索的榜首。

请帮忙。提前感谢您：(->：|->：(

Answer 1

Next.JS提供了3个提供内容的选项
SSG静态站点生成器-它只构建一次页面，并提供预先生成的内容。ISG增量静态再生-它允许您在特定条件下再生静态页面
SSR服务器端渲染-服务器将为每个请求生成一个页面。

对于博客来说，SSG将是更好的选择：帖子通常不会更改或很少更改。您应该在getStaticPaths中使用fallback设置。您必须将fallback设置为true或'blocking'。

true-新路径将作为第一个请求的后备路径，而Next.JS将生成页面。然后，它将回退切换到实际内容
'blocking'-在生成页面之前，新路径将被阻止。

对于这两个选项，所有后续请求都将为预先生成的页面提供服务。

保留在我的长时间构建页面中，可能会出现超时错误。默认情况下，它是60秒，但您始终可以通过staticPageGenerationTimeout进行调整。

Answer 2

要获取新数据，请在getStaticProps中设置revalidate:1，在getStaticPaths中设置fallback:true。检查以下示例

export async function getStaticPaths() {
// make a get request to server to see how many blogs are there
const json = await new BlogApi().getAll();
// assuming using axios
const blogs = json.data;
const paths = blogs.map(blog => {
return {
params: {id: blog._id}
}
})
// fallback is used to display some content while your content is beign prepared
return { paths, fallback: true };
}
export async function getStaticProps({params}) {
const json = await new BlogApi().getById(params.id);
const portfolio = json.data;
return { props: {portfolio}, revalidate: 1};
}

在您的组件中，如果fallback:true

const router = useRouter();
if (router.isFallback) {
return <h1>Your page is being preapared</h1>
}