时间戳

首页 > 解决方案 > 在 NextJs 中动态创建主页

javascript - 在 NextJs 中动态创建主页

问题描述

我正在尝试使用 NextJs 和获取数据时获得的 slugs/uri 创建我的所有页面，但是在尝试创建它说的主页时。

Error: The provided path `/` does not match the page: `/[slug]`.

[slug].tsx 位于页面文件夹中。我删除了 index.js，因为我希望主页与其他页面具有相同的页面布局。

目前正在获取这样的静态路径：

export async function getStaticPaths() {
  const allPages = await getAllPostsWithSlug();

  return {
    paths: allPages.edges.map(({ node }) => `${node.uri}`) || [],
    fallback: true,
  };
}

我得到的错误是有道理的，但我真的找不到在同一页面模板中创建主页的解决方案。

标签： javascriptreactjsnext.js

解决方案

根据文档，您可以使用可选的包罗万象的路线。

命名您的页面文件[[...slug]].js，然后使用类似这样的内容作为paths道具getStaticPaths：

paths: [
  { params: { slug: [] } },
  { params: { slug: ['foo'] } },
  { params: { slug: ['bar'] } },
]

FWIW - 如果您想共享主模板中的组件（即页眉、导航、页脚等），我建议使用自定义_app.js页面。如果您的主页确实与您的其他页面相同，则可能值得重新访问该设计！

祝你好运！

推荐阅读