Get page link to other languages

Developing with Prismic
1

Hello,

I need to get URL's to the current page but alternative languages in a <link /> tag.

<link rel="alternate" hreflang="[lang_code]" href="[url_of_page]" />

For example the master language is en-us and I'm on www.website.com/current-page, I'd like to add this in my <head>.

<link rel="alternate" hreflang="fr-fr" href="http://www.website.com/fr-fr/page-courante" />

I'm using Next.js and @prismicio/react v2.

I can't use PrismicLink because it is not a link (<a>) and I can't simply add fr-fr in URL because UID's aren't the same. Maybe prismicH.asLink but not sure we can give the lang parameter.

Do you have an idea?

Thanks!

2

I finally found a way using doc.alternate_languages (altLangs) and my linkResolver! :slight_smile:

{altLangs.map((altLang) => {
  return (
    <link rel="alternate" hrefLang={altLang.lang} href={linkResolver(altLang)} key={altLang.lang} />
  )
})}
4

Hello @clementine1

I am glad that you found a way. Please let me know if you have any other questions.

Thanks,
Priyanka

6

For the Prismic Gatsby folks out there that like me used te multi-lang starter theme:

{activeDocMeta.alternateLanguages.map((altLang) => {
  return (
  <link rel="alternate" hrefLang={altLang.lang} href={linkResolver(altLang)} key={altLang.lang} />
  )
})}