面试题：Next.js Link组件在复杂路由和国际化场景下的深度应用

1. 处理多语言路由

配置i18n：在next.config.js中配置i18n，设置支持的语言列表。

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

动态生成路由：在pages目录下，通过getStaticPaths和getStaticProps函数动态生成不同语言版本的页面路径。

export async function getStaticPaths() {
  const products = await getAllProducts(); // 假设此函数获取所有产品
  const paths = products.flatMap(product => {
    return ['en', 'fr'].map(locale => ({
      params: { productId: product.id.toString() },
      locale
    }));
  });
  return { paths, fallback: false };
}

export async function getStaticProps({ params, locale }) {
  const product = await getProductById(params.productId);
  return {
    props: {
      product,
      locale
    }
  };
}

使用next/link进行页面跳转：在组件中使用Link组件，通过as属性指定实际跳转的路径，href属性保持相对路径。

import Link from 'next/link';

const ProductDetails = ({ product, locale }) => {
  return (
    <Link
      as={`/${locale}/products/${product.id}/details`}
      href={`/products/[productId]/details`}
    >
      <a>Product Details</a>
    </Link>
  );
};

2. 语言切换时的路由更新

创建语言切换函数：在组件中创建一个函数，根据当前语言切换到另一种语言。

import { useRouter } from 'next/router';

const LanguageSwitcher = () => {
  const router = useRouter();
  const { locale } = router;
  const toggleLanguage = () => {
    const newLocale = locale === 'en'? 'fr' : 'en';
    router.push(router.asPath, router.asPath, { locale: newLocale });
  };

  return (
    <button onClick={toggleLanguage}>
      Switch to {locale === 'en'? 'French' : 'English'}
    </button>
  );
};

3. 根据权限动态调整Link的可用性和目标路由

获取用户权限：在页面加载时，通过API或上下文获取用户权限信息。

import { useEffect, useState } from'react';

const ProductDetails = ({ product, locale }) => {
  const [userPermissions, setUserPermissions] = useState(null);

  useEffect(() => {
    const fetchPermissions = async () => {
      const response = await fetch('/api/getPermissions');
      const data = await response.json();
      setUserPermissions(data);
    };
    fetchPermissions();
  }, []);

  let linkProps = {
    as: `/products/${product.id}/details`,
    href: `/products/[productId]/details`,
    disabled: true
  };

  if (userPermissions && userPermissions.canViewProductDetails) {
    linkProps = {
      as: `/products/${product.id}/details`,
      href: `/products/[productId]/details`,
      disabled: false
    };
  }

  return (
    <Link {...linkProps}>
      <a>Product Details</a>
    </Link>
  );
};

动态生成目标路由：根据权限动态修改as和href属性。例如，如果某个用户权限允许访问特定版本的产品详情，修改as属性为对应的路径。

if (userPermissions && userPermissions.canViewSpecialVersion) {
  linkProps = {
    as: `/products/${product.id}/specialDetails`,
    href: `/products/[productId]/specialDetails`,
    disabled: false
  };
}

4. 保证SEO友好性

静态生成：通过getStaticPaths和getStaticProps静态生成不同语言版本的页面，这样搜索引擎爬虫可以直接访问到不同语言的内容。
Meta标签：在每个页面设置正确的title、description等Meta标签，并且根据语言动态调整。

import Head from 'next/head';

const ProductDetails = ({ product, locale }) => {
  const title = locale === 'en'? product.enTitle : product.frTitle;
  const description = locale === 'en'? product.enDescription : product.frDescription;

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
      </Head>
      {/* 页面内容 */}
    </>
  );
};

规范URL结构：确保不同语言版本的URL具有清晰的结构，便于搜索引擎理解和索引。

面试题：Next.js Link组件在复杂路由和国际化场景下的深度应用

知识考点

面试题答案

1. 处理多语言路由

2. 语言切换时的路由更新

3. 根据权限动态调整Link的可用性和目标路由

4. 保证SEO友好性