From 3d9d1cc80e1ddfd1e6e59ba2991261468eb19573 Mon Sep 17 00:00:00 2001 From: hanif salafi Date: Wed, 12 Feb 2025 22:24:24 +0700 Subject: [PATCH] feat: update config next intl - fixing error --- app/layout.tsx | 45 +++++++------- config/index.ts | 3 + i18n/request.ts | 25 ++++---- i18n/routing.ts | 15 +++++ next.config.js | 15 ----- next.config.mjs | 27 ++++++++ package-lock.json | 154 +++++++++++++++++++++++++++++++++++++++++++++- package.json | 1 + 8 files changed, 236 insertions(+), 49 deletions(-) create mode 100644 config/index.ts create mode 100644 i18n/routing.ts delete mode 100644 next.config.js create mode 100644 next.config.mjs diff --git a/app/layout.tsx b/app/layout.tsx index 89e8b01..d23e345 100644 --- 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("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(null); - useEffect(() => { - (async () => { - const loadedMessages = (await import(`../messages/${locale}.json`)) - .default; - setMessages(loadedMessages); - })(); - }, [locale]); + // const [messages, setMessages] = useState(null); + // useEffect(() => { + // (async () => { + // const loadedMessages = (await import(`../messages/${locale}.json`)) + // .default; + // setMessages(loadedMessages); + // })(); + // }, [locale]); return ( @@ -68,7 +71,7 @@ export default function RootLayout({ children }: { children: ReactNode }) { - +
{children}
 diff --git a/config/index.ts b/config/index.ts new file mode 100644 index 0000000..fb74bc0 --- /dev/null +++ b/config/index.ts @@ -0,0 +1,3 @@ +export const locales = ['en', 'in']; + +export const baseURL = process.env.NEXT_PUBLIC_SITE_URL + "/api"; \ No newline at end of file diff --git a/i18n/request.ts b/i18n/request.ts index 17e05e4..5d52539 100644 --- 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 }; -}); +}); \ No newline at end of file diff --git a/i18n/routing.ts b/i18n/routing.ts new file mode 100644 index 0000000..63ed882 --- /dev/null +++ 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); \ No newline at end of file diff --git a/next.config.js b/next.config.js deleted file mode 100644 index 35f0f49..0000000 --- a/next.config.js +++ /dev/null @@ -1,15 +0,0 @@ -/** @type {import('next').NextConfig} */ -const nextConfig = { - eslint: { - ignoreDuringBuilds: true, - }, - images: { - remotePatterns: [ - { - hostname: "*", - }, - ], - }, -}; - -module.exports = nextConfig; diff --git a/next.config.mjs b/next.config.mjs new file mode 100644 index 0000000..dcd81cc --- /dev/null +++ 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)); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 36db6ba..728de18 100644 --- 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" diff --git a/package.json b/package.json index 0235ac3..10b0743 100644 --- 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",