Next动态路由详解

Next 动态路由详解

将 Next 的动态路由，不得不提的就是 getStaticPaths 和 getStaticProps

getStaticPaths 详解

为什么 params 中必须要包含 starter 和 docs

因为该文件位于 \src\pages\starter[starter]\docs[[...slug]].tsx

有两个动态路由 [starter] 和 [docs]，所以 params 中必须要包含 starter 和 docs

export const getStaticPaths: GetStaticPaths<{
  starter: string;
  docs: string;
}> = async () => {
  const starters = await getAllStarter();
  const paths: any[] = [];
  starters.forEach((starter: Article) => {
    const docs = getAllDocsBySlug(starter.slug);
    docs.forEach((doc: any) => {
      paths.push({
        params: {
          starter: starter.slug,
          docs: doc.slug,
        },
      });
    });
  });
  return { paths, fallback: true };
};

getStaticProps 详解

注意该方法中的 starter 和 docs 就是从 getStaticPaths 获取到的

export const getStaticProps: GetStaticProps<{
  frontMatter: StarterDocs;
  mdxSource: any;
  toc: any;
  menu: RouteItem;
}> = async ({ params }) => {
  const { starter, docs }: any = params;
  const menu: RouteItem = readJsonFileBySlug(SECTION, starter);
  const docsFile = readMarkdownFileBySlug<StarterDocs>(
    SECTION,
    starter,
    docs + '.md'
  );
  const post: any = await compileMDX(docsFile.content);
  const { mdxSource, toc } = post;
  return { props: { frontMatter: docsFile.data, mdxSource, toc, menu } };
};

该方法最终返回读取到的数据。

总结：getStaticPaths 和 getStaticProps 一般配对使用，getStaticPaths 负责获取 slug

getStaticProps 负责根据 getStaticPaths 获取到的动态路由读取文件数据给组件使用

getServerSideProps

另外再讲讲 getServerSideProps 服务端渲染，这又是个啥

先留疑问，下回再说