Next.js 中的默认动态路由

Question

Next.js 使我们能够使用括号[param]在我们的应用程序中定义动态路由。 它允许我们以例如语言作为参数传递的方式设计 URL。 当没有路由匹配时，用户被重定向到错误页面。

这个想法很简单，而且 Next.js 中与动态路由相关的文档相当有限。 有人知道是否可以为动态路由参数分配默认值？

Answer 1

有关于 i18n路由和重定向的文档页面以及对locale参数的特殊支持（我个人没有使用过）。

从更一般的意义上讲，听起来您想要的是optional catch all routes 。

您可以在foo目录中定义一个名为[[...slug]].js 。 与/foo/us/en等路径对应的params是{ slug: ["us", "en"] } ，其中路径的每一段都成为slug数组的一个元素。

您可以使用getStaticPaths生成所有已知的国家/地区/语言对。 设置fallback: true允许用户输入另一个组合而不是 404。

export const getStaticPaths = async () => {
  return {
    paths: [
      { params: { slug: ["us", "en"] } },
      { params: { slug: ["us", "es"] } },
      { params: { slug: ["ca", "en"] } },
      { params: { slug: ["ca", "fr"] } },
      /*...*/
    ],
    fallback: true, // allows unknown
  };
};

至于重定向，这取决于您是否想要实际的重定向，这样输入/foo会导致/foo/us/en或者这两个单独的页面显示相同的内容。 我将假设我们想要一个实际的重定向。

您将在getStaticProps函数中从slug转换为props 。 这也是您实现重定向的地方。 我将假设您拥有（或可以创建）一些实用函数，例如isValidCountry(country)和getDefaultLanguage(country)

export const getStaticProps = async ( context ) => {
  const [country, language] = context.params?.slug ?? [];

  // if there is no country, go to us/en
  if (!country || !isValidCountry(country)) {
    return {
      redirect: {
        statusCode: 301, // permanent redirect
        destination: "/foo/us/en",
      },
    };
  }

  // if there is no language, go to the default for that country
  if (!language || !isValidLanguage(language, country)) {
    return {
      redirect: {
        statusCode: 301, // permanent redirect
        destination: `/foo/${country}/${getDefaultLanguage(country)}`,
      },
    };
  }

  // typical case, return country and language as props
  return {
    props: {
      country,
      language,
    },
  };
};

您可以使用useRouter和isFallback在组件本身中做一些事情，但我不确定是否需要它。 在开发模式下，至少我得到了正确的重定向。

• /foo/ca/en - 好的
• /foo/ca/fr - 好的
• /foo/ca/xx - 重定向到/foo/ca/en
• /foo/ca - 重定向到/foo/ca/en
• /foo - 重定向到/foo/us/en

带有 TypeScript 类型的完整代码：

import { GetStaticPaths, GetStaticProps } from "next";

export interface Props {
  country: string;
  language: string;
}

export default function Page({ country, language }: Props) {
  return (
    <div>
      <h1>
        {country} - {language}
      </h1>
    </div>
  );
}

const pairs = [
  ["us", "en"],
  ["us", "es"],
  ["ca", "en"],
  ["ca", "fr"],
];

const isValidCountry = (c: string) => pairs.some(([cc]) => cc === c);
const isValidLanguage = (l: string, c: string) =>
  pairs.some(([cc, ll]) => cc === c && ll === l);
const getDefaultLanguage = (c: string) =>
  pairs.find(([cc]) => cc === c)?.[1] ?? "en";

export const getStaticProps: GetStaticProps<Props, { slug: string[] }> = async (
  context
) => {
  const [country, language] = context.params?.slug ?? [];

  // if there is no country, go to us/en
  if (!country || !isValidCountry(country)) {
    return {
      redirect: {
        statusCode: 301, // permanent redirect
        destination: "/foo/us/en",
      },
    };
  }

  // if there is no language, go to the default for that country
  if (!language || !isValidLanguage(language, country)) {
    return {
      redirect: {
        statusCode: 301, // permanent redirect
        destination: `/foo/${country}/${getDefaultLanguage(country)}`,
      },
    };
  }

  // typical case, return country and language as props
  return {
    props: {
      country,
      language,
    },
  };
};

export const getStaticPaths: GetStaticPaths<{ slug: string[] }> = async () => {
  return {
    paths: pairs.map((slug) => ({
      params: { slug },
    })),
    fallback: true, // allows unknown
  };
};