Creating link tags to locales for SEO in NextJS

#i18n #seo #nextjs #javascript

This wasn't hard but I didn't find good search results for it so here's a quick tip.

I'm using next-translate with nextjs for localization but this technique will probably work with other localization frameworks like next-i18next.

in pages/_app.ts

import Head from 'next/head';
import type { AppProps } from 'next/app';
import {useRouter} from 'next/router';

const supportedLocales = ['ar-ye', 'en-us', 'fr'];

export default function MyApp({ Component, pageProps }: AppProps): ReactElement {
  const {asPath} = useRouter();
  return (
    <>
      <Head>
        {supportedLocales.map(loc =>
          <link rel="alternate" hrefLang={loc} href={`/${loc}${asPath}`}/>)}
      </Head>
      <Component {...pageProps} />
    </>
  );

}