如何在页面的所有语言和地区变体的 header 中动态创建 HTML 标签？

Question

我想向我的页面添加 <link rel="alternate" hreflang="lang_code"... > 元素 headers 以告知页面的所有语言和区域变体。

示例 homepage header:

<link rel="alternate" hrefLang="en" href="https://WEBSITE_URL/" />
<link rel="alternate" hrefLang="de" href="https://WEBSITE_URL/de" />
<link rel="alternate" hrefLang="nl" href="https://WEBSITE_URL/nl" />

示例 about-us header:

<link rel="alternate" hrefLang="en" href="https://WEBSITE_URL/about-us" />
<link rel="alternate" hrefLang="de" href="https://WEBSITE_URL/de/über-uns" />
<link rel="alternate" hrefLang="nl" href="https://WEBSITE_URL/nl/over-ons" />

并在每个页面中使用该语言的相应路径重复此操作。是否可以使用 Next.js 动态创建它？

Answer 1

您可以覆盖 ./pages/_document.js 并将其放在头部。

The component used here is not the same one from next/head. The component used here should only be used for any code that is common for all pages.

https://nextjs.org/docs/advanced-features/custom-document

查看文档有一个很好的例子。

Answer 2

您可以根据自定义 _app 中的语言环境动态生成 <link>。这样逻辑适用于应用程序的所有页面，并更新客户端导航。

// pages/_app.js
import { useRouter } from 'next/router'
import Head from 'next/head'

const App = ({ Component, pageProps }) => {
    const router = useRouter()

    return (
        <>
            <Head>
                {router.locales.map((locale) => {
                    return (
                        <link
                            key={locale}
                            rel="alternate"
                            hrefLang={locale}
                            href={`https://WEBSITE_URL/${locale}${router.asPath}`}
                        />
                    )
                })}
            </Head>
            <Component {...pageProps} />
        </>
    )
}

export default App

如何在页面的所有语言和地区变体的 header 中动态创建 HTML 标签？

How to dynamically create HTML tags in header of all the languages and regions variants of a page?

html

internationalization

reactjs

next.js