feat: update config next intl - fixing error

2025-02-12 22:24:24 +07:00 · 2025-02-12 22:24:24 +07:00 · 3d9d1cc80e
parent c00f4094ef
commit 3d9d1cc80e
8 changed files with 236 additions and 49 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,5 +1,3 @@
-// RootLayout.tsx
-"use client";
 import { fontSans } from "@/config/fonts";
 import { siteConfig } from "@/config/site";
 import { Inter } from "next/font/google";
@ -10,8 +8,8 @@ import { Metadata } from "next";
 import { Providers } from "./providers";
 import LoadScript from "@/utils/global";
 import { NextIntlClientProvider } from "next-intl";
-import { useEffect, useState, type ReactNode } from "react";
 import storedLanguage from "@/store/language-store";
+import { getMessages } from "next-intl/server";
 const inter = Inter({ subsets: ["latin"] });

 // export const metadata: Metadata = {
@ -31,25 +29,30 @@ const inter = Inter({ subsets: ["latin"] });
 //   },
 // };

-export default function RootLayout({ children }: { children: ReactNode }) {
-  const [localeNow, setLocaleNow] = useState<string>("id");
+export default async function RootLayout({
+  children,
+  params: { locale },
+}: Readonly<{
+  children: React.ReactNode;
+  params: { locale: string };
+}>) {
+  const messages = await getMessages();
+  // const locale = storedLanguage((state) => state.locale);

-  const locale = storedLanguage((state) => state.locale);
+  // useEffect(() => {
+  //   if (locale) {
+  //     setLocaleNow(locale);
+  //   }
+  // }, [locale]);

-  useEffect(() => {
-    if (locale) {
-      setLocaleNow(locale);
-    }
-  }, [locale]);
-
-  const [messages, setMessages] = useState<any>(null);
-  useEffect(() => {
-    (async () => {
-      const loadedMessages = (await import(`../messages/${locale}.json`))
-        .default;
-      setMessages(loadedMessages);
-    })();
-  }, [locale]);
+  // const [messages, setMessages] = useState<any>(null);
+  // useEffect(() => {
+  //   (async () => {
+  //     const loadedMessages = (await import(`../messages/${locale}.json`))
+  //       .default;
+  //     setMessages(loadedMessages);
+  //   })();
+  // }, [locale]);
  return (
    <html lang="en" suppressHydrationWarning className="scroll-smooth">
      <head>
@ -68,7 +71,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
      <body
        className={clsx("bg-background font-sans antialiased", inter.className)}
      >
-        <NextIntlClientProvider locale={localeNow} messages={messages}>
+        <NextIntlClientProvider locale={locale} messages={messages}>
          <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
            <main className="">{children}</main>
          </Providers>
--- a/config/index.ts
+++ b/config/index.ts
@ -0,0 +1,3 @@
+export const locales = ['en', 'in'];
+
+export const baseURL = process.env.NEXT_PUBLIC_SITE_URL + "/api";
--- a/i18n/request.ts
+++ b/i18n/request.ts
@ -1,15 +1,16 @@
-"use client";
-import { notFound } from "next/navigation";
-import { getRequestConfig } from "next-intl/server";
-import storedLanguage from "@/store/language-store";
-
-export default getRequestConfig(async () => {
-  const supportedLocale = ["en", "id"];
-  const locale = storedLanguage((state) => state.locale);
+import {getRequestConfig} from 'next-intl/server';
+import {routing} from './routing';
+ 
+export default getRequestConfig(async ({requestLocale}) => {
+  let locale = await requestLocale;
  // Validate that the incoming `locale` parameter is valid
-  if (!supportedLocale.includes(locale)) notFound();
-
+  // if (!routing.locales.includes(locale as any)) notFound();
+  if (!locale || !routing.locales.includes(locale as any)) {
+    locale = routing.defaultLocale;
+  }
+ 
  return {
-    messages: (await import(`../messages/${locale}.json`)).default,
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default
  };
-});
+});
--- a/i18n/routing.ts
+++ b/i18n/routing.ts
@ -0,0 +1,15 @@
+import {defineRouting} from 'next-intl/routing';
+import {createSharedPathnamesNavigation} from 'next-intl/navigation';
+ import {locales} from '@/config';
+export const routing = defineRouting({
+  // A list of all locales that are supported
+  locales: locales,
+ 
+  // Used when no locale matches
+  defaultLocale: 'id'
+});
+ 
+// Lightweight wrappers around Next.js' navigation APIs
+// that will consider the routing configuration
+export const {Link, redirect, usePathname, useRouter} =
+  createSharedPathnamesNavigation(routing);
--- a/next.config.js
+++ b/next.config.js
@ -1,15 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  images: {
-    remotePatterns: [
-      {
-        hostname: "*",
-      },
-    ],
-  },
-};
-
-module.exports = nextConfig;
--- a/next.config.mjs
+++ b/next.config.mjs
@ -0,0 +1,27 @@
+/** @type {import('next').NextConfig} */
+import createNextIntlPlugin from "next-intl/plugin";
+import withBundleAnalyzer from "@next/bundle-analyzer";
+
+const withNextIntl = createNextIntlPlugin();
+
+const bundleAnalyzer = withBundleAnalyzer({
+  enabled: process.env.ANALYZE === "true",
+});
+
+const nextConfig = {
+  env: {
+      _next_intl_trailing_slash: "false"
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  images: {
+    remotePatterns: [
+      {
+        hostname: "*",
+      },
+    ],
+  },
+};
+
+export default bundleAnalyzer(withNextIntl(nextConfig));
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "@ckeditor/ckeditor5-react": "^6.2.0",
        "@hookform/resolvers": "^3.3.4",
+        "@next/bundle-analyzer": "^15.1.7",
        "@nextui-org/breadcrumbs": "^2.0.4",
        "@nextui-org/button": "2.0.26",
        "@nextui-org/code": "2.0.24",
@ -1095,7 +1096,6 @@
      "version": "0.5.7",
      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
-      "dev": true,
      "engines": {
        "node": ">=10.0.0"
      }
@ -1497,6 +1497,14 @@
      "integrity": "sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==",
      "peer": true
    },
+    "node_modules/@next/bundle-analyzer": {
+      "version": "15.1.7",
+      "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-15.1.7.tgz",
+      "integrity": "sha512-tESiAwTUEpzzxKMLDbQuPHvD+PFDjY+0O3R4T5bpjIo0cr5fvppbbllQbtksQbBEquT55Eu8JmDoOlc9YFv6Kw==",
+      "dependencies": {
+        "webpack-bundle-analyzer": "4.10.1"
+      }
+    },
    "node_modules/@next/env": {
      "version": "14.0.2",
      "license": "MIT"
@ -2847,6 +2855,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.28",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
+      "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw=="
+    },
    "node_modules/@react-aria/breadcrumbs": {
      "version": "3.5.9",
      "license": "Apache-2.0",
@ -4249,6 +4262,17 @@
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
      }
    },
+    "node_modules/acorn-walk": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/aggregate-error": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@ -5411,6 +5435,11 @@
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
    },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
    "node_modules/debug": {
      "version": "4.3.4",
      "license": "MIT",
@ -5619,6 +5648,11 @@
        "url": "https://github.com/fb55/domutils?sponsor=1"
      }
    },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.83",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.83.tgz",
@ -6613,6 +6647,20 @@
      "version": "1.4.0",
      "license": "MIT"
    },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/has-bigints": {
      "version": "1.0.2",
      "license": "MIT",
@ -6697,6 +6745,11 @@
        "htmlparser2": "9.1.0"
      }
    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
+    },
    "node_modules/html-react-parser": {
      "version": "5.1.10",
      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.1.10.tgz",
@ -7697,6 +7750,14 @@
        "node": ">=10"
      }
    },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.2",
      "license": "MIT"
@ -7997,6 +8058,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
    "node_modules/optionator": {
      "version": "0.9.3",
      "license": "MIT",
@ -9671,6 +9740,19 @@
        "is-arrayish": "^0.3.1"
      }
    },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/slash": {
      "version": "3.0.0",
      "license": "MIT",
@ -10357,6 +10439,14 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/ts-api-utils": {
      "version": "1.0.3",
      "license": "MIT",
@ -10753,6 +10843,48 @@
        }
      }
    },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz",
+      "integrity": "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==",
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "is-plain-object": "^5.0.0",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/webpack-cli": {
      "version": "4.10.0",
      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
@ -11126,6 +11258,26 @@
      "version": "1.0.2",
      "license": "ISC"
    },
+    "node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/yallist": {
      "version": "4.0.0",
      "license": "ISC"
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
  "dependencies": {
    "@ckeditor/ckeditor5-react": "^6.2.0",
    "@hookform/resolvers": "^3.3.4",
+    "@next/bundle-analyzer": "^15.1.7",
    "@nextui-org/breadcrumbs": "^2.0.4",
    "@nextui-org/button": "2.0.26",
    "@nextui-org/code": "2.0.24",