Merge pull request #619 from VitNode/perf/next-intl_v4

perf(frontend)!: Update to next-intl v4
VitNode · Dec 23, 2024 · 04fdeeb · 04fdeeb
2 parents 4a56616 + 432e409
commit 04fdeeb
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 79 deletions.
diff --git a/apps/frontend/global.d.ts b/apps/frontend/global.d.ts
@@ -4,6 +4,8 @@ import type welcome from '@/plugins/welcome/langs/en.json';
 
 type Messages = typeof core & typeof admin & typeof welcome;
 
-declare global {
-  interface IntlMessages extends Messages {}
+declare module 'next-intl' {
+  interface AppConfig {
+    Messages: Messages;
+  }
 }
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -18,7 +18,7 @@
     "geist": "^1.3.1",
     "lucide-react": "^0.468.0",
     "next": "^15.1.2",
-    "next-intl": "^3.26.2",
+    "next-intl": "4.0.0-beta-ddd5ae5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.1",

diff --git a/packages/create-vitnode-app/helpers/create-packages-json.ts b/packages/create-vitnode-app/helpers/create-packages-json.ts
@@ -85,7 +85,7 @@ export const createPackagesJSON = async ({
       geist: '^1.3.1',
       'lucide-react': '^0.469.0',
       next: '^15.1.2',
-      'next-intl': '^3.26.2',
+      'next-intl': '4.0.0-beta-ddd5ae5',
       react: '^19.0.0',
       'react-dom': '^19.0.0',
       'react-hook-form': '^7.54.1',

diff --git a/packages/create-vitnode-app/templates/basic/apps/frontend/global.d.ts b/packages/create-vitnode-app/templates/basic/apps/frontend/global.d.ts
@@ -4,6 +4,8 @@ import type welcome from '@/plugins/welcome/langs/en.json';
 
 type Messages = typeof core & typeof admin & typeof welcome;
 
-declare global {
-  interface IntlMessages extends Messages {}
+declare module 'next-intl' {
+  interface AppConfig {
+    Messages: Messages;
+  }
 }
diff --git a/packages/frontend/global.d.ts b/packages/frontend/global.d.ts
@@ -4,6 +4,8 @@ import type welcome from '../../apps/frontend/src/plugins/welcome/langs/en.json'
 
 type Messages = typeof core & typeof admin & typeof welcome;
 
-declare global {
-  interface IntlMessages extends Messages {}
+declare module 'next-intl' {
+  interface AppConfig {
+    Messages: Messages;
+  }
 }
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -95,7 +95,7 @@
     "@hookform/resolvers": "^3.9.1",
     "lucide-react": "*",
     "next": "^15.1.2",
-    "next-intl": "^3.26.2",
+    "next-intl": "4.0.0-beta-ddd5ae5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.1",
@@ -119,7 +119,7 @@
     "eslint-config-typescript-vitnode": "workspace:*",
     "lucide-react": "^0.469.0",
     "next": "^15.1.2",
-    "next-intl": "^3.26.3",
+    "next-intl": "4.0.0-beta-ddd5ae5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",

diff --git a/packages/frontend/src/components/translations-provider.tsx b/packages/frontend/src/components/translations-provider.tsx
@@ -1,4 +1,9 @@
-import { NamespaceKeys, NestedKeyOf, NextIntlClientProvider } from 'next-intl';
+import {
+  Messages,
+  NamespaceKeys,
+  NestedKeyOf,
+  NextIntlClientProvider,
+} from 'next-intl';
 import { getLocale, getMessages } from 'next-intl/server';
 import 'server-only';
 
@@ -30,10 +35,7 @@ const pick = (obj: object, paths: string[]) => {
 };
 
 export async function TranslationsProvider<
-  NestedKey extends NamespaceKeys<
-    IntlMessages,
-    NestedKeyOf<IntlMessages>
-  > = never,
+  NestedKey extends NamespaceKeys<Messages, NestedKeyOf<Messages>> = never,
 >({
   children,
   namespaces,

diff --git a/packages/frontend/src/i18n.ts b/packages/frontend/src/i18n.ts
@@ -13,8 +13,8 @@ export const i18nConfigVitNode = async ({
   }) => Promise<{ default: object }>;
   requestLocale: Promise<string | undefined>;
 }) => {
-  let locale = await requestLocale;
   let defaultLocale = 'en';
+  let locale = (await requestLocale) ?? 'en';
 
   if (!locale) {
     locale = 'en';
@@ -28,7 +28,7 @@ export const i18nConfigVitNode = async ({
     const defaultLanguage = data.languages.find(lang => lang.default);
     defaultLocale = defaultLanguage?.code ?? 'en';
     if (!data.languages.find(lang => lang.code === locale)) {
-      locale = defaultLanguage?.code;
+      locale = defaultLanguage?.code ?? defaultLocale;
     }
   } catch (_) {
     // If the request fails, we will use the default plugins

diff --git a/packages/frontend/src/navigation/index.tsx b/packages/frontend/src/navigation/index.tsx
@@ -1,7 +1,6 @@
-import { createNavigation } from 'next-intl/navigation';
+import { createNavigation, QueryParams } from 'next-intl/navigation';
 import { getLocale } from 'next-intl/server';
 import { RedirectType } from 'next/navigation';
-import { QueryParams } from 'node_modules/next-intl/dist/types/src/navigation/shared/utils';
 import React from 'react';
 
 import { usePathname, useRouter } from './router';

diff --git a/packages/frontend/src/views/admin/layout/sidebar/item-nav.tsx b/packages/frontend/src/views/admin/layout/sidebar/item-nav.tsx
@@ -40,31 +40,39 @@ export const ItemNavSidebarAdmin = ({
   );
   if (!textAndIcon) return null;
 
-  const button = (
-    <SidebarMenuButton
-      asChild
-      isActive={pathname.startsWith(href)}
-      onClick={() => {
-        setOpenMobile(false);
-      }}
-    >
-      <Link
-        href={item.children?.length ? `${href}/${item.children[0].code}` : href}
-      >
-        {textAndIcon.icon}
-        <span>{textAndIcon.text}</span>
-      </Link>
-    </SidebarMenuButton>
-  );
-
   if (!item.children?.length) {
-    return <SidebarMenuItem>{button}</SidebarMenuItem>;
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          asChild
+          isActive={pathname.startsWith(href)}
+          onClick={() => {
+            setOpenMobile(false);
+          }}
+        >
+          <Link
+            href={
+              item.children?.length ? `${href}/${item.children[0].code}` : href
+            }
+          >
+            {textAndIcon.icon}
+            <span>{textAndIcon.text}</span>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
   }
 
   return (
     <Collapsible asChild defaultOpen={pathname.startsWith(href)}>
       <SidebarMenuItem>
-        {button}
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={pathname.startsWith(href)}>
+            {textAndIcon.icon}
+            <span>{textAndIcon.text}</span>
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+
         <>
           <CollapsibleTrigger asChild>
             <SidebarMenuAction className="data-[state=open]:rotate-90">

diff --git a/packages/frontend/src/views/admin/views/core/settings/main/components/desc.tsx b/packages/frontend/src/views/admin/views/core/settings/main/components/desc.tsx
@@ -31,7 +31,7 @@ export const DescFieldContentMainSettingsCoreAdmin = ({
         onLanguageChange={setSelectedLanguage}
       />
 
-      <div className="flex w-32 items-center justify-center">
+      <div className="flex w-32 items-center justify-start">
         <TooltipWrapper content={t('description.seo')}>
           <Badge
             className="mt-1"

diff --git a/packages/frontend/src/views/admin/views/core/settings/main/content.tsx b/packages/frontend/src/views/admin/views/core/settings/main/content.tsx
@@ -23,7 +23,7 @@ export const ContentMainSettingsCoreAdmin = (props: ShowMiddlewareObj) => {
           component: props => (
             <>
               <AutoFormInput {...props} />
-              <div className="flex w-32 items-center justify-center">
+              <div className="flex w-32 items-center justify-start">
                 <TooltipWrapper content={t('name.seo')}>
                   <Badge
                     className="mt-1"
@@ -50,7 +50,7 @@ export const ContentMainSettingsCoreAdmin = (props: ShowMiddlewareObj) => {
           component: props => (
             <>
               <AutoFormInput {...props} />
-              <div className="flex w-32 items-center justify-center">
+              <div className="flex w-32 items-center justify-start">
                 <TooltipWrapper content={t('short_name.seo')}>
                   <Badge
                     className="mt-1"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml