使用应用程序路由器翻译整个 URL

Question

Next.js 14 使用新的应用程序路由器涵盖动态路由...

en/[slug]

...以及多种语言的路线：

[lang]/contact-us

任何地方都没有涵盖的一件事是两者的结合。我希望每种语言都有一个带有单独 slug 的路由：

en/contact-us
de/kontakt
fr/contactez-nous

我希望避免为每种语言创建页面 (page.tsx)，而是尽可能通过同一页面路由所有内容：

[en/en/fr]/[contact-us|kontakt|contactez-nous]

结果应该是：

en/contact-us
de/kontakt
fr/contactez-nous

所有这些都应该使用共享页面，这样逻辑就不必为每种语言单独实现。

这可能吗？是否有另一种方法而不必创建三个具有大量冗余的单独的 page.tsx 文件？

Answer 1

方法会有点不同，使用国际化路由支持设置您的项目 - https://nextjs.org/docs/advanced-features/i18n-routing

在名为pages/contact 的目录中创建文件[slug].tsx。这将处理所有联系页面的渲染逻辑，无论语言如何。

根据 [slug].tsx 页面内的语言和 slug 处理获取内容的逻辑。您可以通过 Next.js 的路由器提供的 locale 参数来确定语言。

定义您的 [slug].tsx 页面，例如

import { useRouter } from 'next/router';

const ContactPage = () => {
  const router = useRouter();
  const { locale } = router;

  const getPageContent = (slug: string, locale: string) => {
    // Fetch content from a CMS or JSON file
    const content = {
      en: {
        'contact-us': 'Contact Us',
      },
      de: {
        kontakt: 'Kontakt',
      },
      fr: {
        'contactez-nous': 'Contactez-nous',
      },
    };

    return content[locale][slug];
  };

  const slug = router.query.slug as string;
  const pageTitle = getPageContent(slug, locale);

  return (
    <div>
      <h1>{pageTitle}</h1>
      {/* Render the rest of your contact page */}
    </div>
  );
};

export default ContactPage;