如何在NextJS中使用不同的url为相同的静态页面每个区域设置?

pinkon5k  于 2023-01-02  发布在  其他
关注(0)|答案(4)|浏览(182)

我正在使用next-i18 next构建一个具有国际化功能的Next.js应用程序。

// next-i18next.config.js
module.exports = {
  i18n: {
    locales: ['lv', 'en', 'ua'],
    defaultLocale: 'lv',
    localeDetection: false,
  },
}

为了更好的搜索引擎优化,我喜欢使用不同的URL参数相同的翻译页面。默认的NextJS页面/区域设置Map看起来像这样:

lv: /about-us
en: /en/about-us
ua: /ua/about-us

我想这样Map此页面:

lv: /par-mums
en: /en/about-us
ua: /ua/про-нас

有可能吗?谢谢!

5lhxktic

5lhxktic1#

如果你想用Next.js创建一个国际化的静态网站,请注意Next.js的导出功能有限:
错误:i18n支持与下次导出不兼容。有关部署的详细信息,请参阅此处:https://nextjs.org/docs/deployment
有一个很好的解决方法:https://locize.com/blog/next-i18n-static/
顺便说一句:这里还有另一个很好的教程:https://locize.com/blog/next-i18next/

u91tlkcl

u91tlkcl2#

首先,我很抱歉,我不知道如何获得的语言代码
但是我想让你试试这个

if (local == 'en') {
    return NextResponse.redirect('/en/about-us')
 }

像这样

xu3bshqb

xu3bshqb3#

也许我不必担心URL。在_app. js中,我已经Map了同一页面的本地化版本。所以,SERP应该知道其他版本。
......一个一个
https://developers.google.com/search/docs/advanced/crawling/localized-versions

mbskvtky

mbskvtky4#

你可以使用exportPathMap。用这个方法你可以生成不同语言的静态html。你的静态页面大小将增长两倍,但它是工作,没有任何影响页面加载速度。
您的自定义链接组件:

import i18n from 'i18next'
import Link from 'next/link'

interface IProps {
  fr: string
  en: string
  children: React.ReactNode
}

export default function TranslatedLink({ fr, en, children }: IProps) {
  let link = fr

  if (i18n.language === 'en') {
    link = en
  }

  return <Link href={link}>{children}</Link>
}

您的链接:

<TranslatedLink fr="/contactez" en="contact>Contact</TranslatedLink>

在下一个配置中

exportPathMap: async function () {
  return {
    '/contact': { page: '/contact' },
    '/contactez': { page: '/contact/ }
  }
}

要在本地环境下运行,请将此添加到next.config.js中:

async rewrites() {
  return [
    {
      source: '/contactez',
      destination: '/contact',
    },
}

相关问题