feat: Apply i18n codemods

src/app/page.js

@@ -1,28 +1,31 @@
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 
 export default function Home() {
+  const t = useTranslations("app");
+
   return (
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
       <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
         <Image
           className="dark:invert"
           src="/next.svg"
-          alt="Next.js logo"
+          alt={t("nextjs-logo")}
           width={180}
           height={38}
           priority
         />
         <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
           <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              src/app/page.js
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
+            {t("get-started-editing", {
+              component0: (
+                <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
+                  {t("get-started-editing_component0")}
+                </code>
+              ),
+            })}
           </li>
+          <li className="tracking-[-.01em]">{t("save-and-see-changes")}</li>
         </ol>
 
         <div className="flex gap-4 items-center flex-col sm:flex-row">
@@ -35,19 +38,19 @@ export default function Home() {
             <Image
               className="dark:invert"
               src="/vercel.svg"
-              alt="Vercel logomark"
+              alt={t("vercel-logomark")}
               width={20}
               height={20}
             />
-            Deploy now
+            {t("deploy-now")}
           </a>
           <a
             className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
           >
-            Read our docs
+            {t("read-our-docs")}
           </a>
         </div>
       </main>
@@ -61,11 +64,11 @@ export default function Home() {
           <Image
             aria-hidden
             src="/file.svg"
-            alt="File icon"
+            alt={t("file-icon")}
             width={16}
             height={16}
           />
-          Learn
+          {t("learn")}
         </a>
         <a
           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
@@ -76,11 +79,11 @@ export default function Home() {
           <Image
             aria-hidden
             src="/window.svg"
-            alt="Window icon"
+            alt={t("window-icon")}
             width={16}
             height={16}
           />
-          Examples
+          {t("examples")}
         </a>
         <a
           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
@@ -91,11 +94,11 @@ export default function Home() {
           <Image
             aria-hidden
             src="/globe.svg"
-            alt="Globe icon"
+            alt={t("globe-icon")}
             width={16}
             height={16}
           />
-          Go to nextjs.org →
+          {t("go-to-nextjs-org")}
         </a>
       </footer>
     </div>

src/messages/en.json

@@ -0,0 +1,17 @@
+{
+  "app": {
+    "nextjs-logo": "Next.js logo",
+    "get-started-editing_component0": "src/app/page.js",
+    "get-started-editing": "Get started by editing {component0} .",
+    "save-and-see-changes": "Save and see your changes instantly.",
+    "deploy-now": " Deploy now",
+    "vercel-logomark": "Vercel logomark",
+    "read-our-docs": "Read our docs",
+    "learn": " Learn",
+    "file-icon": "File icon",
+    "examples": " Examples",
+    "window-icon": "Window icon",
+    "go-to-nextjs-org": " Go to nextjs.org →",
+    "globe-icon": "Globe icon"
+  }
+}