面试题：Next.js动态路由参数默认值在复杂嵌套路由及国际化场景下的应用

Question

在一个具有复杂嵌套路由结构且支持多语言国际化（i18n）的Next.js项目中，有这样的路由结构：`pages/[locale]/category/[categoryId]/product/[productId].js`。需要为`categoryId`和`productId`设置默认值，并且要考虑不同语言环境下默认值的动态切换。另外，这些默认值还需要与国际化配置（如next - i18next）相协调，保证在切换语言时，默认值对应的内容能正确展示。请详细说明整个实现思路、涉及到的技术点以及关键代码片段。

Answer 1

实现思路

1. 设置默认值：在Next.js的路由参数处理中，可以通过getStaticProps或getServerSideProps函数获取路由参数，并设置默认值。
2. 多语言支持：利用next - i18next库来处理多语言国际化。该库提供了获取当前语言环境的方法，可根据不同语言环境动态切换默认值。
3. 协调默认值与国际化配置：确保默认值对应的内容在不同语言环境下能够正确展示，需要在国际化配置文件中维护这些默认值对应的翻译。

涉及技术点

1. Next.js路由参数处理：getStaticProps和getServerSideProps用于获取路由参数并传递给页面组件。
2. next - i18next库：用于实现多语言国际化，提供获取当前语言环境及翻译功能。
3. 国际化配置文件：管理不同语言环境下的文本翻译，包括默认值对应的内容。

关键代码片段

1. 页面文件（[locale]/category/[categoryId]/product/[productId].js）

import { useTranslation } from 'next - i18next';

export async function getStaticProps({ params }) {
    const { locale } = params;
    let categoryId = params.categoryId;
    let productId = params.productId;

    // 设置默认值
    if (!categoryId) {
        categoryId = 'defaultCategoryId';
    }
    if (!productId) {
        productId = 'defaultProductId';
    }

    return {
        props: {
            categoryId,
            productId,
            locale
        },
        revalidate: 60 // 可选，用于增量静态再生
    };
}

const ProductPage = ({ categoryId, productId, locale }) => {
    const { t } = useTranslation();
    // 根据当前语言环境展示默认值对应的内容
    const categoryName = t(`categories.${categoryId}`);
    const productName = t(`products.${productId}`);

    return (
        <div>
            <h1>{categoryName}</h1>
            <p>{productName}</p>
        </div>
    );
};

export default ProductPage;

2. 国际化配置文件（例如：public/locales/en/translations.json）

{
    "categories": {
        "defaultCategoryId": "Default Category Name"
    },
    "products": {
        "defaultProductId": "Default Product Name"
    }
}

3. next - i18next配置文件（next - i18next.config.js）

module.exports = {
    i18n: {
        locales: ['en', 'zh'],
        defaultLocale: 'en'
    }
};