feat: add i18n support with next-intl for Spanish translation

components/OfflinePage.tsx

@@ -1,6 +1,9 @@
 import Image from "next/image";
+import { useTranslations } from "next-intl";
 
 const OfflinePage = () => {
+  const t = useTranslations("OfflinePage");
+
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-background text-center px-4 z-50">
       <div className="w-full max-w-lg flex flex-col items-center">
@@ -14,17 +17,16 @@ const OfflinePage = () => {
           />
         </div>
         <h1 className="text-2xl md:text-4xl font-medium mb-4">
-          Recoup is Offline
+          {t("title")}
         </h1>
         <p className="text-muted-foreground max-w-md mx-auto text-base md:text-lg">
-          The internet is having an outage, affecting Recoup and thousands of
-          other applications.
+          {t("description")}
           <br />
-          We expect this to be resolved shortly
+          {t("resolution")}
         </p>
       </div>
     </div>
   );
 };
 
-export default OfflinePage;
+export default OfflinePage;

i18n/request.ts

@@ -0,0 +1,15 @@
+import { getRequestConfig } from "next-intl/server";
+
+const SUPPORTED_LOCALES = ["en", "es"];
+
+export default getRequestConfig(async (params) => {
+  const requested = await params.requestLocale;
+  const locale = SUPPORTED_LOCALES.includes(requested ?? "") 
+    ? requested! 
+    : "en";
+
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});

messages/en.json

@@ -0,0 +1,7 @@
+{
+  "OfflinePage": {
+    "title": "Recoup is Offline",
+    "description": "The internet is having an outage, affecting Recoup and thousands of other applications.",
+    "resolution": "We expect this to be resolved shortly"
+  }
+}

messages/es.json

@@ -0,0 +1,7 @@
+{
+  "OfflinePage": {
+    "title": "Recoup no está disponible",
+    "description": "Hay una interrupción en internet que afecta a Recoup y a miles de otras aplicaciones.",
+    "resolution": "Esperamos que esto se resuelva en breve"
+  }
+}

next.config.mjs

@@ -1,6 +1,9 @@
 // next.config.mjs
 
 import withPWA from "next-pwa";
+import createNextIntlPlugin from "next-intl/plugin";
+
+const withNextIntl = createNextIntlPlugin();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -24,20 +27,20 @@ const nextConfig = {
     domains: [
       "i.imgur.com",
       "ipfs.decentralized-content.com",
-      "pbs.twimg.com", // Twitter profile images
-      "abs.twimg.com", // Twitter media
-      "cdn.discordapp.com", // Discord
-      "scontent.xx.fbcdn.net", // Facebook
-      "scontent.cdninstagram.com", // Instagram
-      "instagram.fyvr4-1.fna.fbcdn.net", // Instagram
-      "platform-lookaside.fbsbx.com", // Facebook
-      "static-cdn.jtvnw.net", // Twitch
-      "yt3.ggpht.com", // YouTube
-      "i.ytimg.com", // YouTube
-      "avatars.githubusercontent.com", // GitHub
-      "example.com", // Example domain from our mock data
-      "arweave.net", // Arweave
-      "storage.googleapis.com", // Fal AI image hosting (backup)
+      "pbs.twimg.com",
+      "abs.twimg.com",
+      "cdn.discordapp.com",
+      "scontent.xx.fbcdn.net",
+      "scontent.cdninstagram.com",
+      "instagram.fyvr4-1.fna.fbcdn.net",
+      "platform-lookaside.fbsbx.com",
+      "static-cdn.jtvnw.net",
+      "yt3.ggpht.com",
+      "i.ytimg.com",
+      "avatars.githubusercontent.com",
+      "example.com",
+      "arweave.net",
+      "storage.googleapis.com",
     ],
     remotePatterns: [
       {
@@ -62,9 +65,11 @@ const nextConfig = {
   },
 };
 
-export default withPWA({
-  dest: "public",
-  register: true,
-  skipWaiting: true,
-  disable: process.env.NODE_ENV === "development",
-})(nextConfig);
+export default withNextIntl(
+  withPWA({
+    dest: "public",
+    register: true,
+    skipWaiting: true,
+    disable: process.env.NODE_ENV === "development",
+  })(nextConfig)
+);

package.json

@@ -77,6 +77,7 @@
     "motion": "^12.23.6",
     "multiformats": "^13.4.1",
     "next": "16.0.10",
+    "next-intl": "^4.9.1",
     "next-pwa": "^5.6.0",
     "next-themes": "^0.3.0",
     "node-telegram-bot-api": "^0.66.0",