From 1e01535134c275da2c0fe2bd3ba52cfcc8949c65 Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Fri, 3 May 2024 11:44:02 +0900
Subject: [PATCH] i18n by next-intl

---
 frontend/app/docs/layout.tsx                  |  13 ---
 frontend/app/docs/page.tsx                    |   9 --
 frontend/components/navbar.tsx                |  74 +++----------
 frontend/messages/en.json                     |   9 ++
 frontend/messages/ja.json                     |   9 ++
 frontend/next.config.js                       |   7 +-
 frontend/package-lock.json                    | 104 ++++++++++++++++++
 frontend/package.json                         |   1 +
 .../app/[locale]}/about/layout.tsx            |   0
 .../{app => src/app/[locale]}/about/page.tsx  |   0
 frontend/{app => src/app/[locale]}/error.tsx  |   0
 frontend/{app => src/app/[locale]}/layout.tsx |   4 +-
 frontend/{app => src/app/[locale]}/page.tsx   |   8 +-
 .../app/[locale]}/projects/ProjectDialog.tsx  |   0
 .../app/[locale]}/projects/ProjectsPage.tsx   |   8 +-
 .../app/[locale]}/projects/ProjectsTable.tsx  |   0
 .../[projectId]/folders/FolderDialog.tsx      |   0
 .../[projectId]/folders/FolderEditMenu.tsx    |   0
 .../[projectId]/folders/FoldersPane.tsx       |   0
 .../folders/[folderId]/cases/CasesPane.tsx    |   0
 .../[folderId]/cases/TestCaseTable.tsx        |   0
 .../cases/[caseId]/CaseAttachmentsEditor.tsx  |   2 +-
 .../[folderId]/cases/[caseId]/CaseEditor.tsx  |   0
 .../cases/[caseId]/CaseStepsEditor.tsx        |   2 +-
 .../cases/[caseId]/attachmentControl.ts       |   0
 .../[folderId]/cases/[caseId]/page.tsx        |   0
 .../[folderId]/cases/[caseId]/stepControl.ts  |   0
 .../folders/[folderId]/cases/caseControl.ts   |   0
 .../folders/[folderId]/cases/page.tsx         |   0
 .../[projectId]/folders/foldersControl.ts     |   0
 .../projects/[projectId]/folders/layout.tsx   |   0
 .../projects/[projectId]/folders/page.tsx     |   0
 .../projects/[projectId]/home/home.tsx        |   0
 .../projects/[projectId]/home/page.tsx        |   0
 .../[locale]}/projects/[projectId]/layout.tsx |   0
 .../projects/[projectId]/runs/RunsPage.tsx    |   0
 .../projects/[projectId]/runs/RunsTable.tsx   |   0
 .../[projectId]/runs/[runId]/RunEditor.tsx    |   0
 .../runs/[runId]/RunPregressDonutChart.tsx    |   0
 .../runs/[runId]/TestCaseSelector.tsx         |   0
 .../[projectId]/runs/[runId]/page.tsx         |   0
 .../projects/[projectId]/runs/page.tsx        |   0
 .../projects/[projectId]/runs/runsControl.ts  |   0
 .../projects/[projectId]/sidebar.tsx          |   0
 .../app/[locale]}/projects/layout.tsx         |   0
 .../app/[locale]}/projects/page.tsx           |   0
 .../app/[locale]}/projects/projectsControl.ts |   0
 .../{app => src/app/[locale]}/providers.tsx   |   0
 frontend/src/i18n.ts                          |  12 ++
 frontend/src/middleware.ts                    |  12 ++
 frontend/src/navigation.ts                    |   7 ++
 51 files changed, 194 insertions(+), 87 deletions(-)
 delete mode 100644 frontend/app/docs/layout.tsx
 delete mode 100644 frontend/app/docs/page.tsx
 create mode 100644 frontend/messages/en.json
 create mode 100644 frontend/messages/ja.json
 rename frontend/{app => src/app/[locale]}/about/layout.tsx (100%)
 rename frontend/{app => src/app/[locale]}/about/page.tsx (100%)
 rename frontend/{app => src/app/[locale]}/error.tsx (100%)
 rename frontend/{app => src/app/[locale]}/layout.tsx (94%)
 rename frontend/{app => src/app/[locale]}/page.tsx (80%)
 rename frontend/{app => src/app/[locale]}/projects/ProjectDialog.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/ProjectsPage.tsx (93%)
 rename frontend/{app => src/app/[locale]}/projects/ProjectsTable.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/FolderDialog.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/FolderEditMenu.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/FoldersPane.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx (97%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx (97%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachmentControl.ts (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/[folderId]/cases/[caseId]/stepControl.ts (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/[folderId]/cases/caseControl.ts (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/[folderId]/cases/page.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/foldersControl.ts (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/layout.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/folders/page.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/home/home.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/home/page.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/layout.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/runs/RunsPage.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/runs/RunsTable.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/runs/[runId]/RunEditor.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/runs/[runId]/page.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/runs/page.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/runs/runsControl.ts (100%)
 rename frontend/{app => src/app/[locale]}/projects/[projectId]/sidebar.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/layout.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/page.tsx (100%)
 rename frontend/{app => src/app/[locale]}/projects/projectsControl.ts (100%)
 rename frontend/{app => src/app/[locale]}/providers.tsx (100%)
 create mode 100644 frontend/src/i18n.ts
 create mode 100644 frontend/src/middleware.ts
 create mode 100644 frontend/src/navigation.ts

diff --git a/frontend/app/docs/layout.tsx b/frontend/app/docs/layout.tsx
deleted file mode 100644
index eaf63f3..0000000
--- a/frontend/app/docs/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export default function DocsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">
-        {children}
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/app/docs/page.tsx b/frontend/app/docs/page.tsx
deleted file mode 100644
index 4a2f19b..0000000
--- a/frontend/app/docs/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { title } from "@/components/primitives";
-
-export default function DocsPage() {
-  return (
-    <div>
-      <h1 className={title()}>Docs</h1>
-    </div>
-  );
-}
diff --git a/frontend/components/navbar.tsx b/frontend/components/navbar.tsx
index 358d203..00281f4 100644
--- a/frontend/components/navbar.tsx
+++ b/frontend/components/navbar.tsx
@@ -1,20 +1,15 @@
 import {
   Navbar as NextUINavbar,
   NavbarContent,
-  NavbarMenu,
   NavbarMenuToggle,
   NavbarBrand,
   NavbarItem,
-  NavbarMenuItem,
   Kbd,
-  Link,
+  Link as NextUiLink,
   Input,
-  link as linkStyles,
 } from "@nextui-org/react";
-
+import { Link } from "@/src/navigation";
 import { siteConfig } from "@/config/site";
-import NextLink from "next/link";
-
 import { ThemeSwitch } from "@/components/theme-switch";
 import { GithubIcon, SearchIcon } from "@/components/icons";
 
@@ -46,7 +41,7 @@ export const Navbar = () => {
     <NextUINavbar maxWidth="xl" position="sticky" className="bg-inherit">
       <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
         <NavbarBrand as="li" className="gap-3 max-w-fit">
-          <NextLink className="flex justify-start items-center gap-1" href="/">
+          <Link className="flex justify-start items-center gap-1" href="/">
             <Image
               src="/favicon/android-chrome-192x192.png"
               width={32}
@@ -54,17 +49,17 @@ export const Navbar = () => {
               alt="Logo"
             />
             <p className="font-bold text-inherit">Test Case Manager</p>
-          </NextLink>
+          </Link>
         </NavbarBrand>
         <ul className="hidden lg:flex gap-4 justify-start ml-2">
           {siteConfig.navItems.map((item) => (
             <NavbarItem key={item.href}>
-              <NextLink
+              <Link
                 className="data-[active=true]:text-primary data-[active=true]:font-medium"
                 href={item.href}
               >
                 {item.label}
-              </NextLink>
+              </Link>
             </NavbarItem>
           ))}
         </ul>
@@ -75,62 +70,29 @@ export const Navbar = () => {
         justify="end"
       >
         <NavbarItem className="hidden sm:flex gap-2">
-          {/* <Link isExternal href={siteConfig.links.twitter} aria-label="Twitter">
-            <TwitterIcon className="text-default-500" />
-          </Link> */}
-          {/* <Link isExternal href={siteConfig.links.discord} aria-label="Discord">
-            <DiscordIcon className="text-default-500" />
-          </Link> */}
-          <Link isExternal href={siteConfig.links.github} aria-label="Github">
+          <NextUiLink
+            isExternal
+            href={siteConfig.links.github}
+            aria-label="Github"
+          >
             <GithubIcon className="text-default-500" />
-          </Link>
+          </NextUiLink>
           <ThemeSwitch />
         </NavbarItem>
         <NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem>
-        {/* <NavbarItem className="hidden md:flex">
-          <Button
-            isExternal
-            as={Link}
-            className="text-sm font-normal text-default-600 bg-default-100"
-            href={siteConfig.links.sponsor}
-            startContent={<HeartFilledIcon className="text-danger" />}
-            variant="flat"
-          >
-            Sponsor
-          </Button>
-        </NavbarItem> */}
       </NavbarContent>
 
       <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
-        <Link isExternal href={siteConfig.links.github} aria-label="Github">
+        <NextUiLink
+          isExternal
+          href={siteConfig.links.github}
+          aria-label="Github"
+        >
           <GithubIcon className="text-default-500" />
-        </Link>
+        </NextUiLink>
         <ThemeSwitch />
         <NavbarMenuToggle />
       </NavbarContent>
-
-      <NavbarMenu>
-        {searchInput}
-        <div className="mx-4 mt-2 flex flex-col gap-2">
-          {siteConfig.navMenuItems.map((item, index) => (
-            <NavbarMenuItem key={`${item}-${index}`}>
-              <Link
-                color={
-                  index === 2
-                    ? "primary"
-                    : index === siteConfig.navMenuItems.length - 1
-                    ? "danger"
-                    : "foreground"
-                }
-                href="#"
-                size="lg"
-              >
-                {item.label}
-              </Link>
-            </NavbarMenuItem>
-          ))}
-        </div>
-      </NavbarMenu>
     </NextUINavbar>
   );
 };
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
new file mode 100644
index 0000000..92147ed
--- /dev/null
+++ b/frontend/messages/en.json
@@ -0,0 +1,9 @@
+{
+  "Index": {
+    "title": "Hello world!"
+  },
+  "ProjectPage": {
+    "projects": "Projects",
+    "newProject": "New Project"
+  }
+}
\ No newline at end of file
diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json
new file mode 100644
index 0000000..8349a16
--- /dev/null
+++ b/frontend/messages/ja.json
@@ -0,0 +1,9 @@
+{
+  "Index": {
+    "title": "はろー"
+  },
+  "ProjectPage": {
+    "projects": "プロジェクト",
+    "newProject": "プロジェクトの作成"
+  }
+}
diff --git a/frontend/next.config.js b/frontend/next.config.js
index 55507ea..7bbc185 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -1,3 +1,6 @@
+const createNextIntlPlugin = require("next-intl/plugin");
+const withNextIntl = createNextIntlPlugin();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   typescript: {
@@ -7,6 +10,6 @@ const nextConfig = {
     // !! WARN !!
     ignoreBuildErrors: true,
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = withNextIntl(nextConfig);
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3da012c..63901eb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,6 +24,7 @@
         "intl-messageformat": "^10.5.0",
         "lucide-react": "^0.372.0",
         "next": "14.0.2",
+        "next-intl": "^3.12.0",
         "next-themes": "^0.2.1",
         "postcss": "8.4.31",
         "react": "18.2.0",
@@ -5204,6 +5205,14 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/next": {
       "version": "14.0.2",
       "resolved": "https://registry.npmjs.org/next/-/next-14.0.2.tgz",
@@ -5249,6 +5258,34 @@
         }
       }
     },
+    "node_modules/next-intl": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-3.12.0.tgz",
+      "integrity": "sha512-N3DHT6ce6K4VHVA3y2p3U7wfBx4c31qEgQSTFCFJuNnE7XYzy49O576ewEz7/k2YaB/U5bfxaWWaMMkskofwoQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/amannn"
+        }
+      ],
+      "dependencies": {
+        "@formatjs/intl-localematcher": "^0.2.32",
+        "negotiator": "^0.6.3",
+        "use-intl": "^3.12.0"
+      },
+      "peerDependencies": {
+        "next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/next-intl/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.2.32",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.32.tgz",
+      "integrity": "sha512-k/MEBstff4sttohyEpXxCmC3MqbUn9VvHGlZ8fauLzkbwXmVrEeyzS+4uhrvAk9DWU9/7otYWxyDox4nT/KVLQ==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/next-themes": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
@@ -6683,6 +6720,73 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/use-intl": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-3.12.0.tgz",
+      "integrity": "sha512-tTJBSaxpVF1ZHqJ5+1JOaBsPmvBPscXHR0soMNQFWIURZspOueLaMXx1XHNdBv9KZGwepBju5aWXkJ0PM6ztXg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "^1.11.4",
+        "intl-messageformat": "^9.3.18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-intl/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
+      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/use-intl/node_modules/@formatjs/fast-memoize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/use-intl/node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
+      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/icu-skeleton-parser": "1.3.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/use-intl/node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
+      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/use-intl/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
+      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/use-intl/node_modules/intl-messageformat": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
+      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.1.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index bd631c9..62847f9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
     "intl-messageformat": "^10.5.0",
     "lucide-react": "^0.372.0",
     "next": "14.0.2",
+    "next-intl": "^3.12.0",
     "next-themes": "^0.2.1",
     "postcss": "8.4.31",
     "react": "18.2.0",
diff --git a/frontend/app/about/layout.tsx b/frontend/src/app/[locale]/about/layout.tsx
similarity index 100%
rename from frontend/app/about/layout.tsx
rename to frontend/src/app/[locale]/about/layout.tsx
diff --git a/frontend/app/about/page.tsx b/frontend/src/app/[locale]/about/page.tsx
similarity index 100%
rename from frontend/app/about/page.tsx
rename to frontend/src/app/[locale]/about/page.tsx
diff --git a/frontend/app/error.tsx b/frontend/src/app/[locale]/error.tsx
similarity index 100%
rename from frontend/app/error.tsx
rename to frontend/src/app/[locale]/error.tsx
diff --git a/frontend/app/layout.tsx b/frontend/src/app/[locale]/layout.tsx
similarity index 94%
rename from frontend/app/layout.tsx
rename to frontend/src/app/[locale]/layout.tsx
index 6bcd441..28b3d87 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/src/app/[locale]/layout.tsx
@@ -25,11 +25,13 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
+  params: {locale}
 }: {
   children: React.ReactNode;
+  params: {locale: string};
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={locale} suppressHydrationWarning>
       <head />
       <body
         className={clsx(
diff --git a/frontend/app/page.tsx b/frontend/src/app/[locale]/page.tsx
similarity index 80%
rename from frontend/app/page.tsx
rename to frontend/src/app/[locale]/page.tsx
index bce66a7..e2423f8 100644
--- a/frontend/app/page.tsx
+++ b/frontend/src/app/[locale]/page.tsx
@@ -1,7 +1,11 @@
-import { Link, button as buttonStyles } from "@nextui-org/react";
+import { button as buttonStyles } from "@nextui-org/react";
 import { title, subtitle } from "@/components/primitives";
+import { useTranslations } from "next-intl";
+import { Link } from "@/src/navigation";
 
 export default function Home() {
+  const t = useTranslations("Index");
+
   return (
     <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
       <div className="inline-block max-w-lg text-center justify-center">
@@ -13,6 +17,8 @@ export default function Home() {
         </h2>
       </div>
 
+      <h1>{t("title")}</h1>
+
       <div className="flex gap-3">
         <Link
           href="/projects"
diff --git a/frontend/app/projects/ProjectDialog.tsx b/frontend/src/app/[locale]/projects/ProjectDialog.tsx
similarity index 100%
rename from frontend/app/projects/ProjectDialog.tsx
rename to frontend/src/app/[locale]/projects/ProjectDialog.tsx
diff --git a/frontend/app/projects/ProjectsPage.tsx b/frontend/src/app/[locale]/projects/ProjectsPage.tsx
similarity index 93%
rename from frontend/app/projects/ProjectsPage.tsx
rename to frontend/src/app/[locale]/projects/ProjectsPage.tsx
index 907a752..85e7f68 100644
--- a/frontend/app/projects/ProjectsPage.tsx
+++ b/frontend/src/app/[locale]/projects/ProjectsPage.tsx
@@ -1,4 +1,4 @@
-"use client";
+// "use client";
 import { useEffect, useState } from "react";
 import { Button } from "@nextui-org/react";
 import { Plus } from "lucide-react";
@@ -11,8 +11,10 @@ import {
   updateProject,
   deleteProject,
 } from "./projectsControl";
+import { useTranslations } from "next-intl";
 
 export default function ProjectsPage() {
+  const t = useTranslations("ProjectsPage");
   const [projects, setProjects] = useState([]);
 
   useEffect(() => {
@@ -78,7 +80,7 @@ export default function ProjectsPage() {
   return (
     <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
       <div className="w-full p-3 flex items-center justify-between">
-        <h3 className="font-bold">Projects</h3>
+        <h3 className="font-bold">{t("project.project")}</h3>
         <div>
           <Button
             startContent={<Plus size={16} />}
@@ -86,7 +88,7 @@ export default function ProjectsPage() {
             color="primary"
             onClick={openDialogForCreate}
           >
-            New Project
+            {t("newProject")}
           </Button>
         </div>
       </div>
diff --git a/frontend/app/projects/ProjectsTable.tsx b/frontend/src/app/[locale]/projects/ProjectsTable.tsx
similarity index 100%
rename from frontend/app/projects/ProjectsTable.tsx
rename to frontend/src/app/[locale]/projects/ProjectsTable.tsx
diff --git a/frontend/app/projects/[projectId]/folders/FolderDialog.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/FolderDialog.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/FolderDialog.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/FolderDialog.tsx
diff --git a/frontend/app/projects/[projectId]/folders/FolderEditMenu.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/FolderEditMenu.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/FolderEditMenu.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/FolderEditMenu.tsx
diff --git a/frontend/app/projects/[projectId]/folders/FoldersPane.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/FoldersPane.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx
similarity index 97%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx
index ae0b53d..ad7ccec 100644
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx
@@ -1,5 +1,5 @@
 import { Image, Button, Tooltip, Card, CardBody } from "@nextui-org/react";
-import { AttachmentType } from "../../../../../../../types/case";
+import { AttachmentType } from "../../../../../../../../types/case";
 import { Trash, ArrowDownToLine } from "lucide-react";
 
 type Props = {
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx
similarity index 97%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx
index a403620..ca70cac 100644
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx
@@ -1,5 +1,5 @@
 import { Textarea, Button, Tooltip } from "@nextui-org/react";
-import { StepType } from "../../../../../../../types/case";
+import { StepType } from "../../../../../../../../types/case";
 import { Plus, Trash } from "lucide-react";
 
 type Props = {
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachmentControl.ts b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachmentControl.ts
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachmentControl.ts
rename to frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachmentControl.ts
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/stepControl.ts b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/stepControl.ts
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/stepControl.ts
rename to frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/stepControl.ts
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/caseControl.ts b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/caseControl.ts
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/caseControl.ts
rename to frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/caseControl.ts
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx
diff --git a/frontend/app/projects/[projectId]/folders/foldersControl.ts b/frontend/src/app/[locale]/projects/[projectId]/folders/foldersControl.ts
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/foldersControl.ts
rename to frontend/src/app/[locale]/projects/[projectId]/folders/foldersControl.ts
diff --git a/frontend/app/projects/[projectId]/folders/layout.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/layout.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx
diff --git a/frontend/app/projects/[projectId]/folders/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/page.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/folders/page.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/folders/page.tsx
diff --git a/frontend/app/projects/[projectId]/home/home.tsx b/frontend/src/app/[locale]/projects/[projectId]/home/home.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/home/home.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/home/home.tsx
diff --git a/frontend/app/projects/[projectId]/home/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/home/page.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/home/page.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/home/page.tsx
diff --git a/frontend/app/projects/[projectId]/layout.tsx b/frontend/src/app/[locale]/projects/[projectId]/layout.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/layout.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/layout.tsx
diff --git a/frontend/app/projects/[projectId]/runs/RunsPage.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/runs/RunsPage.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
diff --git a/frontend/app/projects/[projectId]/runs/RunsTable.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/runs/RunsTable.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx
diff --git a/frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
diff --git a/frontend/app/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
diff --git a/frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
diff --git a/frontend/app/projects/[projectId]/runs/[runId]/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/runs/[runId]/page.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
diff --git a/frontend/app/projects/[projectId]/runs/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/runs/page.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
diff --git a/frontend/app/projects/[projectId]/runs/runsControl.ts b/frontend/src/app/[locale]/projects/[projectId]/runs/runsControl.ts
similarity index 100%
rename from frontend/app/projects/[projectId]/runs/runsControl.ts
rename to frontend/src/app/[locale]/projects/[projectId]/runs/runsControl.ts
diff --git a/frontend/app/projects/[projectId]/sidebar.tsx b/frontend/src/app/[locale]/projects/[projectId]/sidebar.tsx
similarity index 100%
rename from frontend/app/projects/[projectId]/sidebar.tsx
rename to frontend/src/app/[locale]/projects/[projectId]/sidebar.tsx
diff --git a/frontend/app/projects/layout.tsx b/frontend/src/app/[locale]/projects/layout.tsx
similarity index 100%
rename from frontend/app/projects/layout.tsx
rename to frontend/src/app/[locale]/projects/layout.tsx
diff --git a/frontend/app/projects/page.tsx b/frontend/src/app/[locale]/projects/page.tsx
similarity index 100%
rename from frontend/app/projects/page.tsx
rename to frontend/src/app/[locale]/projects/page.tsx
diff --git a/frontend/app/projects/projectsControl.ts b/frontend/src/app/[locale]/projects/projectsControl.ts
similarity index 100%
rename from frontend/app/projects/projectsControl.ts
rename to frontend/src/app/[locale]/projects/projectsControl.ts
diff --git a/frontend/app/providers.tsx b/frontend/src/app/[locale]/providers.tsx
similarity index 100%
rename from frontend/app/providers.tsx
rename to frontend/src/app/[locale]/providers.tsx
diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts
new file mode 100644
index 0000000..e5f3170
--- /dev/null
+++ b/frontend/src/i18n.ts
@@ -0,0 +1,12 @@
+import { notFound } from "next/navigation";
+import { getRequestConfig } from "next-intl/server";
+
+const locales = ["en", "ja"];
+
+export default getRequestConfig(async ({ locale }) => {
+  if (!locales.includes(locale as any)) notFound();
+
+  return {
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});
diff --git a/frontend/src/middleware.ts b/frontend/src/middleware.ts
new file mode 100644
index 0000000..b02f1b8
--- /dev/null
+++ b/frontend/src/middleware.ts
@@ -0,0 +1,12 @@
+import createMiddleware from "next-intl/middleware";
+import { locales, localePrefix } from "./navigation";
+
+export default createMiddleware({
+  defaultLocale: "en",
+  localePrefix,
+  locales,
+});
+
+export const config = {
+  matcher: ["/", "/(ja|en)/:path*"],
+};
diff --git a/frontend/src/navigation.ts b/frontend/src/navigation.ts
new file mode 100644
index 0000000..5c5256b
--- /dev/null
+++ b/frontend/src/navigation.ts
@@ -0,0 +1,7 @@
+import { createSharedPathnamesNavigation } from "next-intl/navigation";
+
+export const locales = ["en", "ja"] as const;
+export const localePrefix = "always";
+
+export const { Link, redirect, usePathname, useRouter } =
+  createSharedPathnamesNavigation({ locales, localePrefix });