【Vite+Vike】i18nで多言語対応したサイトのSSGが無理だった話

const { locale } = data
console.dir(data)
useEffect(() => {
  const urlLocale = location.pathname.split("/");
  console.info("Current passed locale:")
  console.dir(urlLocale)
  // Force apply language and head.title by path on direct access by URL
  // Vike destroys head elements on locale change, and won't pass me locale from useData ...for some reason... nobody but he knows why
  // Furthermore these bugs won't happen neither on development environment nor production build local serve(vite preview)... this sxxxs
  if (locale === "") {
    // When passed locale is blank, there are two scenarios:
    // 1. The locale is Japanese, so the locale is intentionally ""
    // 2. The locale is not passed by useData(Vike's fault)
    location.pathname[2] ? changeLanguage(location.pathname[2]) : changeLanguage("ja");
  } else {
    // When passed locale is not blank, it is ok to set locale as the data says because the locale has already been filtered
    changeLanguage(locale)
  }
  // The code below was used when language is changed manually
  // locale === "" ? changeLanguage("ja") : changeLanguage(locale)
}, [data])

import { useConfig } from "vike-react/useConfig";
import i18n from "../../i18n/configs";
import ogp from "../../assets/images/ogp.png"
import favicon from "/favicon.ico"
import base from "../../../vite.config"

export interface Data {
  locale: string;
}

export const data = (pageContext: { locale: string }) => {

  const locale = pageContext.locale;

  const baseUrl = "https://aosankaku.github.io"
  const baseName = base.base
  const ogUrl = baseUrl + baseName + locale
  console.dir(baseName)

  const config = useConfig()

  console.log(`locale: ${typeof (locale)}: ${locale}`)
  locale === "" ? i18n.changeLanguage("ja") : i18n.changeLanguage(locale as string)
  config({
    title: i18n.t("meta.title"),
    description: i18n.t("meta.description"),
    lang: i18n.language,
    image: baseUrl + ogp,
    favicon: favicon,
    Head: <>
      <meta name="og:type" content="website" />
      <meta name="og:url" content={ogUrl} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content="@Ao_Sankaku" />
    </>
  })

  const data: Data = {
    locale: locale
  }
  return data;
}

export { onBeforeRoute }

import { modifyUrl } from 'vike/modifyUrl'
import type { Url } from 'vike/types'
import { languages } from '../i18n/configs'

interface PageContext {
  urlParsed: Url;
  response?: {
    statusCode?: number;
    headers?: Record<string, string>;
  };
}

function onBeforeRoute(pageContext: PageContext) {
  const { urlWithoutLocale, locale } = extractLocale(pageContext.urlParsed)

  return {
    pageContext: {
      // Make `locale` available as `pageContext.locale`
      locale,
      // Vike's router will use pageContext.urlLogical instead of pageContext.urlOriginal
      urlLogical: urlWithoutLocale
    }
  }
}

function extractLocale(url: Url) {
  const { pathname } = url
  // On development environment, "pathname[1]" equals to locale but on production, it's "station_name_generator", a base name.
  // This seems COMPLETELY Vike's fault, isn't it?
  const locale = (pathname[1] === "station_sign_generator")
    ? languages.includes(pathname.split("/")[2]) ? pathname.split("/")[2] : ""
    : languages.includes(pathname.split("/")[1]) ? pathname.split("/")[1] : ""

  // Determine the locale, for example:
  //  /en-US/film/42 => en-US
  //  /de-DE/film/42 => de-DE
  // const locale = /* ... */

  // Remove the locale, for example:
  //  /en-US/film/42 => /film/42
  //  /de-DE/film/42 => /film/42
  const pathnameWithoutLocale = "/"

  // Reconstruct full URL
  const urlWithoutLocale = modifyUrl(url.href, { pathname: pathnameWithoutLocale })

  return { locale, urlWithoutLocale }
}