Next js中嵌套动态路由的页面模板如何命名？

Question

我正在尝试实现动态路由结构，在我的 Next.js 应用程序中使用 Prismic。本质上，我有一个页面，例如 mysite.com/landing-page，我可以在我的 [uid] 模板中路由到该页面，在我的 getServerSideProps 函数中使用 { uid } = params。但是，我想允许用户通过子目录访问同一页面，例如 mysite.com/sacramento-ca/landing-page。我所做的研究似乎表明我可以在我的 Prismic 存储库中创建一个内容关系，该存储库指定还可以引用该页面的位置（sacramento-ca 是此处的示例），然后在我的查询，并将其传递给页面模板。但是，我不知道如何做到这一点。

我的 pages 目录结构如下：

├── [uid]
│   └── index.tsx
├── index.tsx
├── products
│   └── [uid].tsx
├── projects
│   └── index.tsx
├── promos
│   ├── [id].tsx
│   └── index.tsx
└── sitemap
    └── index.tsx

..总的来说，这对顶级页面来说效果很好。但是 1. 如何查询 getServerSideProps 中的 category 以及如何命名和嵌套页面模板？我也读了这个，这似乎是在正确的轨道上，但我不确定如何实现它。这也是我的 [uid] 模板的代码，希望对您有所帮助。

import React from 'react';

import { SEO } from 'components/seo/SEO';
import { SliceZone } from 'components/slice-zone/SliceZone';

import { client, queryWithProducts } from '../../lib/prismic';

export const Page = ({ document }: any) => {
  const slices = document;
  if (!slices) return null;

  const { meta_title, meta_description, meta_keywords, social_image } = document;

  return (
    <>
      <SEO
        title={meta_title}
        description={meta_description}
        keywords={meta_keywords}
        banner={social_image.url}
      />
      <SliceZone slices={slices} />
    </>
  );
};

export default Page;

export const getServerSideProps = async ({ params, query }: any) => {
  console.log(query)
  const { uid } = params;
  const { data: document } = await client.getByUID('landing', uid, queryWithProducts);

  return {
    props: {
      document,
    },
  };
};

Answer 1

你走对了，你可以使用 dynamic catch-all route。

您需要将文件夹重命名为 [...uid]，这将使 params.uid return 和数组而不是字符串。

// [...uid]/index.tsx

export const getServerSideProps = async ({ params, query }: any) => {
    const { uid } = params; 
    // When navigating to /sacramento-ca/landing-page `uid` will 
    // be an array containing ['sacramento-ca', 'landing-page']

    // Add logic to retrieve data based on array values

    return {
        props: {
            document,
        },
    };
};

Next js中嵌套动态路由的页面模板如何命名？

How do I name page templates for nested dynamic routing in Next js?

reactjs

next.js

server-side-rendering

dynamic-routing