Мультимовність в SPA: розмітка hreflang та генерація статичних Sitemap.xml

+-------------------------------------------------------------------------+
|                  Схема двонапрямленого зв'язку hreflang                 |
+-------------------------------------------------------------------------+

  Українська версія:                  Англійська версія:
  https://agenticlab.dev/uk/item      https://agenticlab.dev/en/item
  +--------------------------+        +--------------------------+
  | hreflang="uk" (self)     |        | hreflang="en" (self)     |
  | hreflang="en" ----------->=======>| hreflang="uk" ----------->=======+
  | hreflang="x-default" ----+        | hreflang="x-default" ----+       |
  +--------------------------+        +--------------------------+       |
               |                                   |                     |
               +-----------------+   +-------------+                     |
                                 v   v                                   |
                     Глобальний шлюз (x-default):                        |
                     https://agenticlab.dev/item                         |
                     +--------------------------+                        |
                     | hreflang="x-default"     |                        |
                     | hreflang="uk" <----------+========================+
                     | hreflang="en"            |
                     +--------------------------+

import React from 'react';

interface LocaleMapping {
  locale: string; // 'en', 'uk', 'es', 'x-default'
  path: string;   // '/en/catalog/shoes', '/uk/catalog/shoes'
}

interface I18nHeadLinksProps {
  currentLocale: string;
  baseUrl: string;
  alternates: readonly LocaleMapping[];
}

export function I18nHeadLinks({ baseUrl, alternates }: I18nHeadLinksProps) {
  return (
    <>
      {/* Автоматичний підйом у <head> засобами React 19 */}
      {alternates.map(({ locale, path }) => (
        <link
          key={`hreflang-${locale}`}
          rel="alternate"
          hrefLang={locale}
          href={`${baseUrl}${path}`}
        />
      ))}
    </>
  );
}

import fs from 'node:fs/promises';
import path from 'node:path';

interface RouteEntry {
  slug: string;
  updatedAt: string;
  alternates: Record<string, string>; // locale -> localizedSlug
}

const BASE_URL = 'https://agenticlab.dev';
const MAX_URLS_PER_SITEMAP = 45000; // Безпечний поріг нижче за ліміт у 50 000
const OUTPUT_DIR = path.resolve(process.cwd(), 'dist');

function formatXmlDate(dateStr: string): string {
  return new Date(dateStr).toISOString().split('T')[0];
}

function escapeXml(unsafe: string): string {
  return unsafe.replace(/[<>&'"]/g, (c) => {
    switch (c) {
      case '<': return '&lt;';
      case '>': return '&gt;';
      case '&': return '&amp;';
      case '\'': return '&apos;';
      case '"': return '&quot;';
      default: return c;
    }
  });
}

function buildUrlNode(entry: RouteEntry, locale: string): string {
  const currentUrl = `${BASE_URL}/${locale}/${entry.slug}`;
  let xml = '  <url>\n';
  xml += `    <loc>${escapeXml(currentUrl)}</loc>\n`;
  xml += `    <lastmod>${formatXmlDate(entry.updatedAt)}</lastmod>\n`;
  xml += '    <changefreq>weekly</changefreq>\n';
  xml += '    <priority>0.8</priority>\n';

  // Двонапрямлені зв'язки hreflang всередині XML Sitemap
  for (const [altLocale, altSlug] of Object.entries(entry.alternates)) {
    const altUrl = `${BASE_URL}/${altLocale}/${altSlug}`;
    xml += `    <xhtml:link rel="alternate" hreflang="${escapeXml(altLocale)}" href="${escapeXml(altUrl)}" />\n`;
  }

  // x-default вказує на базову дефолтну мову (наприклад, англійську)
  const defaultUrl = `${BASE_URL}/en/${entry.alternates['en'] || entry.slug}`;
  xml += `    <xhtml:link rel="alternate" hreflang="x-default" href="${escapeXml(defaultUrl)}" />\n`;

  xml += '  </url>\n';
  return xml;
}

export async function generateAllSitemaps(routes: readonly RouteEntry[]): Promise<void> {
  const supportedLocales = ['en', 'uk', 'es'];
  const totalUrls: string[] = [];

  // Генерація повного пулу URL для всіх підтримуваних локалей
  for (const route of routes) {
    for (const locale of supportedLocales) {
      totalUrls.push(buildUrlNode(route, locale));
    }
  }

  const sitemapFiles: string[] = [];
  let chunkIndex = 1;

  for (let i = 0; i < totalUrls.length; i += MAX_URLS_PER_SITEMAP) {
    const chunk = totalUrls.slice(i, i + MAX_URLS_PER_SITEMAP);
    const fileName = `sitemap-content-${chunkIndex}.xml`;

    const xmlContent = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
${chunk.join('')}
</urlset>`;

    await fs.writeFile(path.join(OUTPUT_DIR, fileName), xmlContent, 'utf-8');
    sitemapFiles.push(fileName);
    chunkIndex++;
  }

  // Створення Sitemap Index
  const today = new Date().toISOString().split('T')[0];
  const indexXml = `<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${sitemapFiles
  .map(
    (file) => `  <sitemap>
    <loc>${BASE_URL}/${file}</loc>
    <lastmod>${today}</lastmod>
  </sitemap>`
  )
  .join('\n')}
</sitemapindex>`;

  await fs.writeFile(path.join(OUTPUT_DIR, 'sitemap.xml'), indexXml, 'utf-8');
  console.log(`[Sitemap] Згенеровано sitemap.xml та ${sitemapFiles.length} підфайлів.`);
}

interface IndexNowPayload {
  host: string;
  key: string;
  keyLocation: string;
  urlList: string[];
}

export async function submitToIndexNow(
  host: string,
  apiKey: string,
  updatedUrls: readonly string[]
): Promise<void> {
  if (updatedUrls.length === 0) {
    console.log('[IndexNow] Немає оновлених URL для відправлення.');
    return;
  }

  const payload: IndexNowPayload = {
    host,
    key: apiKey,
    keyLocation: `https://${host}/${apiKey}.txt`,
    urlList: [...updatedUrls],
  };

  try {
    const response = await fetch('https://api.indexnow.org/indexnow', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json; charset=utf-8',
      },
      body: JSON.stringify(payload),
    });

    if (response.ok || response.status === 202) {
      console.log(`[IndexNow] Успішно відправлено ${updatedUrls.length} URL.`);
    } else {
      const errorText = await response.text();
      console.error(`[IndexNow] Помилка API (${response.status}): ${errorText}`);
    }
  } catch (error: unknown) {
    const message = error instanceof Error ? error.message : 'Unknown network error';
    console.error(`[IndexNow] Мережевий збій: ${message}`);
  }
}