add basic internationalization support

2025-07-23 04:36:49 +00:00 · 2023-08-13 17:14:30 +09:00
parent b786cc2228
commit 2cb348259a
32 changed files with 198 additions and 61 deletions
--- a/app/[lang]/[page]/layout.tsx
+++ b/app/[lang]/[page]/layout.tsx
--- a/app/[lang]/[page]/opengraph-image.tsx
+++ b/app/[lang]/[page]/opengraph-image.tsx
--- a/app/[lang]/[page]/page.tsx
+++ b/app/[lang]/[page]/page.tsx
--- a/app/[lang]/error.tsx
+++ b/app/[lang]/error.tsx
--- a/app/[lang]/favicon.ico
+++ b/app/[lang]/favicon.ico
--- a/app/[lang]/globals.css
+++ b/app/[lang]/globals.css
--- a/app/[lang]/layout.tsx
+++ b/app/[lang]/layout.tsx
@@ -1,4 +1,5 @@
 import Navbar from 'components/layout/navbar';
+import { i18n } from 'i18n-config';
 import { Inter } from 'next/font/google';
 import { ReactNode, Suspense } from 'react';
 import './globals.css';
@@ -34,12 +35,22 @@ const inter = Inter({
  variable: '--font-inter'
 });

-export default async function RootLayout({ children }: { children: ReactNode }) {
+export async function generateStaticParams() {
+  return i18n.locales.map((locale) => ({ lang: locale }));
+}
+
+export default async function RootLayout({
+  children,
+  params
+}: {
+  children: ReactNode;
+  params: { lang: string };
+}) {
  return (
-    <html lang="en" className={inter.variable}>
+    <html lang={params.lang} className={inter.variable}>
      <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
        <div className="mx-auto max-w-screen-2xl">
-          <Navbar />
+          <Navbar lang={params.lang} />
          <Suspense>
            <main>{children}</main>
          </Suspense>
--- a/app/[lang]/opengraph-image.tsx
+++ b/app/[lang]/opengraph-image.tsx
--- a/app/[lang]/page.tsx
+++ b/app/[lang]/page.tsx
@@ -2,6 +2,8 @@ import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
 import { LanguageControl } from 'components/layout/navbar/language-control';
+import type { Locale } from '../../i18n-config';
+
 import Image from 'next/image';
 import Namemark from 'public/assets/images/namemark.png';
 import { Suspense } from 'react';
@@ -15,11 +17,13 @@ export const metadata = {
  }
 };

-export default async function HomePage() {
+export default async function HomePage({ params: { lang } }: { params: { lang: Locale } }) {
+  // const dictionary = await getDictionary(lang);
+
  return (
    <>
      <div className="invisible absolute right-40 top-12 md:visible">
-        <LanguageControl />
+        <LanguageControl lang={lang} />
      </div>
      <div className="px-6 pb-12 pt-6 md:py-12 md:pl-6">
        <Image
--- a/app/[lang]/product/[handle]/page.tsx
+++ b/app/[lang]/product/[handle]/page.tsx
--- a/app/[lang]/robots.ts
+++ b/app/[lang]/robots.ts
--- a/app/[lang]/search/[collection]/opengraph-image.tsx
+++ b/app/[lang]/search/[collection]/opengraph-image.tsx
--- a/app/[lang]/search/[collection]/page.tsx
+++ b/app/[lang]/search/[collection]/page.tsx
--- a/app/[lang]/search/layout.tsx
+++ b/app/[lang]/search/layout.tsx
--- a/app/[lang]/search/loading.tsx
+++ b/app/[lang]/search/loading.tsx
--- a/app/[lang]/search/page.tsx
+++ b/app/[lang]/search/page.tsx
--- a/app/[lang]/sitemap.ts
+++ b/app/[lang]/sitemap.ts