Hreflang i link kanoniczny w Next.js — SEO wielojęzycznych stron bez duplikacji

// app/[locale]/page.tsx
import type { Metadata } from 'next'
 
const locales = ['pl', 'en', 'de']
const baseUrl = 'https://example.com'
 
// Polska wersja na rootu domeny, pozostałe języki z prefiksem
const getLocaleUrl = (locale: string, path = '') =>
  locale === 'pl' ? `${baseUrl}${path}` : `${baseUrl}/${locale}${path}`
 
export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>
}): Promise<Metadata> {
  const { locale } = await params
 
  return {
    alternates: {
      canonical: getLocaleUrl(locale),
      languages: {
        pl: baseUrl,
        en: `${baseUrl}/en`,
        de: `${baseUrl}/de`,
        'x-default': baseUrl,
      },
    },
  }
}

<link rel="canonical" href="https://example.com/" />
<link rel="alternate" hreflang="pl" href="https://example.com/" />
<link rel="alternate" hreflang="en" href="https://example.com/en" />
<link rel="alternate" hreflang="de" href="https://example.com/de" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

// app/[locale]/blog/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>
}): Promise<Metadata> {
  const { locale, slug } = await params
  const post = await getPost(slug, locale)
 
  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: getLocaleUrl(locale, `/blog/${slug}`),
      languages: Object.fromEntries(
        locales.map((l) => [
          l,
          getLocaleUrl(l, `/blog/${post.slugs[l] || slug}`),
        ]),
      ),
    },
  }
}

// next.config.ts
const nextConfig = {
  trailingSlash: false, // Wymuś brak trailing slash
}

if (pathname.length > 1 && pathname.endsWith('/')) {
  return NextResponse.redirect(new URL(pathname.slice(0, -1), request.url), 308)
}

export const metadata: Metadata = {
  alternates: {
    canonical: '/products', // Bez ?sort=, ?page=, ?filter=
  },
}

server {
    server_name www.strivelab.pl;
    return 301 https://example.com$request_uri;
}

// lib/seo.ts
const baseUrl = 'https://example.com'
const locales = ['pl', 'en'] as const
 
const getLocaleUrl = (locale: (typeof locales)[number], path: string) =>
  locale === 'pl' ? `${baseUrl}${path}` : `${baseUrl}/${locale}${path}`
 
export function generateAlternates(
  locale: (typeof locales)[number],
  localizedPaths: Record<(typeof locales)[number], string>,
) {
  const languages = Object.fromEntries(
    locales.map((l) => [l, getLocaleUrl(l, localizedPaths[l])]),
  )
 
  return {
    canonical: getLocaleUrl(locale, localizedPaths[locale]),
    languages: {
      ...languages,
      'x-default': `${baseUrl}${localizedPaths.pl}`,
    },
  }
}

// Użycie
export async function generateMetadata(): Promise<Metadata> {
  return {
    alternates: generateAlternates('pl', {
      pl: '/uslugi',
      en: '/services',
    }),
  }
}

// app/sitemap.ts
import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://example.com'
  const locales = ['pl', 'en'] as const
 
  const getLocaleUrl = (locale: string, path: string) =>
    locale === 'pl' ? `${baseUrl}${path}` : `${baseUrl}/${locale}${path}`
 
  const pages = [
    { plPath: '', enPath: '' },
    { plPath: '/uslugi', enPath: '/services' },
    { plPath: '/kontakt', enPath: '/contact' },
    { plPath: '/blog', enPath: '/blog' },
  ]
 
  return pages.flatMap((page) =>
    locales.map((locale) => ({
      url: getLocaleUrl(locale, locale === 'pl' ? page.plPath : page.enPath),
      lastModified: new Date(),
      alternates: {
        languages: Object.fromEntries(
          locales.map((l) => [
            l,
            getLocaleUrl(l, l === 'pl' ? page.plPath : page.enPath),
          ]),
        ),
      },
    })),
  )
}