perf!: Update to NextJS 15.0.0-canary.177 & next-intl 3.21.0-canary

VitNode · Oct 3, 2024 · d20828d · d20828d
1 parent a1c10fc
commit d20828d
Show file tree

Hide file tree

Showing 38 changed files with 268 additions and 249 deletions.
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -18,8 +18,8 @@
   "dependencies": {
     "geist": "^1.3.1",
     "lucide-react": "^0.446.0",
-    "next": "15.0.0-canary.158",
-    "next-intl": "^3.20.0",
+    "next": "15.0.0-canary.177",
+    "next-intl": "3.21.0-canary.0",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
     "react-dom": "19.0.0-rc-fb9a90fa48-20240614",
     "react-hook-form": "^7.53.0",

diff --git a/apps/frontend/src/app/[locale]/admin/(auth)/(vitnode)/core/plugins/[code]/dev/layout.tsx b/apps/frontend/src/app/[locale]/admin/(auth)/(vitnode)/core/plugins/[code]/dev/layout.tsx
@@ -1,12 +1,13 @@
 // ! DO NOT TOUCH THIS FILE!!! IT IS GENERATED BY VITNODE-CLI
 import {
   DevPluginAdminLayout,
-  DevPluginAdminLayoutProps,
   generateMetadataDevPluginAdminLayout,
 } from 'vitnode-frontend/admin/core/plugins/views/dev/layout/layout';
 
 export const generateMetadata = generateMetadataDevPluginAdminLayout;
 
-export default function Layout(props: DevPluginAdminLayoutProps) {
+export default function Layout(
+  props: React.ComponentProps<typeof DevPluginAdminLayout>,
+) {
   return <DevPluginAdminLayout {...props} />;
 }
diff --git a/apps/frontend/src/app/[locale]/layout.tsx b/apps/frontend/src/app/[locale]/layout.tsx
@@ -2,13 +2,12 @@ import { GeistSans } from 'geist/font/sans';
 import {
   generateMetadataRootLayout,
   RootLayout,
-  RootLayoutProps,
 } from 'vitnode-frontend/views/layout/root-layout';
 
 import './global.css';
 
 export const generateMetadata = generateMetadataRootLayout;
 
-export default function Layout(props: RootLayoutProps) {
+export default function Layout(props: React.ComponentProps<typeof RootLayout>) {
   return <RootLayout className={GeistSans.className} {...props} />;
 }
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -118,8 +118,8 @@
     "eslint-config-typescript-vitnode": "workspace:*",
     "graphql-tag": "^2.12.6",
     "lucide-react": "^0.446.0",
-    "next": "15.0.0-canary.158",
-    "next-intl": "^3.20.0",
+    "next": "15.0.0-canary.177",
+    "next-intl": "3.21.0-canary.0",
     "react": "19.0.0-rc-e56f4ae3-20240830",
     "react-dom": "19.0.0-rc-e56f4ae3-20240830",
     "react-hook-form": "^7.53.0",

diff --git a/packages/frontend/src/graphql/fetcher.ts b/packages/frontend/src/graphql/fetcher.ts
@@ -38,13 +38,13 @@ const cookieFromStringToObject = (
 
 export const setCookieFromApi = ({ res }: { res: Response }) => {
   return cookieFromStringToObject(res.headers.getSetCookie()).forEach(
-    cookie => {
+    async cookie => {
       const key = Object.keys(cookie)[0];
       const value = Object.values(cookie)[0];
 
       if (typeof value !== 'string' || typeof key !== 'string') return;
 
-      cookies().set(key, value, {
+      (await cookies()).set(key, value, {
         domain: cookie.Domain,
         path: cookie.Path,
         expires: new Date(cookie.Expires),
@@ -150,15 +150,18 @@ export async function fetcher<TData, TVariables = object>({
     });
   }
 
-  const nextInternalHeaders = nextHeaders();
+  const [nextInternalHeaders, cookie] = await Promise.all([
+    nextHeaders(),
+    cookies(),
+  ]);
 
   const internalHeaders = {
-    Cookie: cookies().toString(),
+    Cookie: cookie.toString(),
     ['user-agent']: nextInternalHeaders.get('user-agent') ?? 'node',
     ['x-forwarded-for']:
       nextInternalHeaders.get('x-forwarded-for') ?? '0.0.0.0',
     ['x-real-ip']: nextInternalHeaders.get('x-real-ip') ?? '0.0.0.0',
-    'x-vitnode-user-language': cookies().get('NEXT_LOCALE')?.value ?? 'en',
+    'x-vitnode-user-language': cookie.get('NEXT_LOCALE')?.value ?? 'en',
     ...headers,
   };
 

diff --git a/packages/frontend/src/graphql/get-pagination-tool.ts b/packages/frontend/src/graphql/get-pagination-tool.ts
@@ -11,7 +11,7 @@ export interface SearchParamsPagination {
 
 interface Args<T> {
   defaultPageSize: 10 | 20 | 30 | 40 | 50;
-  searchParams: SearchParamsPagination;
+  searchParams: Promise<SearchParamsPagination>;
   search?: boolean;
   sortByEnum?: T;
 }
@@ -23,11 +23,13 @@ interface ReturnValues<T> {
   sortBy?: { column: keyof T; direction: SortDirectionEnum };
 }
 
-export function getPaginationTool<T extends Record<string, unknown>>({
+export async function getPaginationTool<T extends Record<string, unknown>>({
   defaultPageSize,
-  searchParams,
+  searchParams: searchParamsPromise,
   sortByEnum,
-}: Args<T>): ReturnValues<T> {
+}: Args<T>): Promise<ReturnValues<T>> {
+  const searchParams = await searchParamsPromise;
+
   const pagination = {
     first: Number(searchParams?.last ?? 0)
       ? null

diff --git a/packages/frontend/src/graphql/get-user-id-cookie.ts b/packages/frontend/src/graphql/get-user-id-cookie.ts
@@ -1,10 +1,10 @@
 import { cookies } from 'next/headers';
 import 'server-only';
 
-export const getUserIdCookie = () => {
-  return cookies().get('vitnode-user-id')?.value;
+export const getUserIdCookie = async () => {
+  return (await cookies()).get('vitnode-user-id')?.value;
 };
 
-export const getAdminIdCookie = () => {
-  return cookies().get('vitnode-admin-id')?.value;
+export const getAdminIdCookie = async () => {
+  return (await cookies()).get('vitnode-admin-id')?.value;
 };
diff --git a/packages/frontend/src/hooks/core/sign/in/mutation-api.ts b/packages/frontend/src/hooks/core/sign/in/mutation-api.ts
@@ -10,6 +10,7 @@ import {
 import { revalidateTags } from '@/graphql/revalidate-tags';
 import { redirect } from '@/navigation';
 import { cookies } from 'next/headers';
+import { getLocale } from 'next-intl/server';
 
 export const mutationApi = async (
   variables: Core_Sessions__Sign_InMutationVariables,
@@ -23,14 +24,14 @@ export const mutationApi = async (
       variables,
     });
 
-    const cookie = cookies();
+    const cookie = await cookies();
     if (!variables.admin) {
       const userIdFromCookie = cookie.get('vitnode-user-id')?.value;
       if (userIdFromCookie) {
         revalidateTags.session(+userIdFromCookie);
       }
     } else {
-      const adminIdFromCookie = getAdminIdCookie();
+      const adminIdFromCookie = await getAdminIdCookie();
       if (adminIdFromCookie) {
         revalidateTags.sessionAdmin(+adminIdFromCookie);
       }
@@ -41,5 +42,6 @@ export const mutationApi = async (
     return { error: e.message };
   }
 
-  redirect(variables.admin ? '/admin/core/dashboard' : '/');
+  const locale = await getLocale();
+  redirect({ href: variables.admin ? '/admin/core/dashboard' : '/', locale });
 };
diff --git a/packages/frontend/src/hooks/core/sign/out/mutation-api.ts b/packages/frontend/src/hooks/core/sign/out/mutation-api.ts
@@ -9,6 +9,7 @@ import {
 } from '@/graphql/mutations/sessions/core_sessions__sign_out.generated';
 import { revalidateTags } from '@/graphql/revalidate-tags';
 import { redirect } from '@/navigation';
+import { getLocale } from 'next-intl/server';
 
 export const mutationApi = async () => {
   try {
@@ -19,7 +20,7 @@ export const mutationApi = async () => {
       query: Core_Sessions__Sign_Out,
     });
 
-    const userIdFromCookie = getUserIdCookie();
+    const userIdFromCookie = await getUserIdCookie();
     if (userIdFromCookie) {
       revalidateTags.session(+userIdFromCookie);
     }
@@ -29,5 +30,6 @@ export const mutationApi = async () => {
     return { error: e.message };
   }
 
-  redirect('/');
+  const locale = await getLocale();
+  redirect({ href: '/', locale });
 };
diff --git a/packages/frontend/src/i18n.ts b/packages/frontend/src/i18n.ts
@@ -10,17 +10,20 @@ import {
 
 export const i18nConfig = async ({
   pathsToMessagesFromPlugins,
-  locale,
+  requestLocale,
 }: {
-  locale: string;
   pathsToMessagesFromPlugins: ({
     plugin,
     locale,
   }: {
     locale: string;
     plugin: string;
   }) => Promise<{ default: unknown }>;
+  requestLocale: Promise<string | undefined>;
 }): Promise<Omit<IntlConfig, 'locale'>> => {
+  const locale = await requestLocale;
+  if (!locale) notFound();
+
   let plugins: string[] = [];
   try {
     const {

diff --git a/packages/frontend/src/navigation/index.ts b/packages/frontend/src/navigation/index.ts
@@ -1,7 +1,7 @@
-import { createSharedPathnamesNavigation } from 'next-intl/navigation';
+import { createNavigation } from 'next-intl/navigation';
 
 import { useRouter } from './router';
 
-const { redirect, usePathname, Link } = createSharedPathnamesNavigation();
+const { redirect, usePathname, Link } = createNavigation();
 
 export { Link, redirect, usePathname, useRouter };
diff --git a/packages/frontend/src/navigation/router.ts b/packages/frontend/src/navigation/router.ts
@@ -1,12 +1,11 @@
 'use client';
 
 import { useSearchParams } from 'next/navigation';
-import { createSharedPathnamesNavigation } from 'next-intl/navigation';
+import { createNavigation } from 'next-intl/navigation';
 import NProgress from 'nprogress';
 import React from 'react';
 
-const { useRouter: useRouterI18n, usePathname } =
-  createSharedPathnamesNavigation();
+const { useRouter: useRouterI18n, usePathname } = createNavigation();
 
 const useRouter = () => {
   const pathname = usePathname();

diff --git a/packages/frontend/src/views/admin/layout/admin-layout.tsx b/packages/frontend/src/views/admin/layout/admin-layout.tsx
@@ -30,9 +30,12 @@ export const generateMetadataAdminLayout = async (): Promise<Metadata> => {
 
 export const AdminLayout = async ({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: Promise<{ locale: string }>;
 }) => {
+  const { locale } = await params;
   try {
     const [t, data] = await Promise.all([
       getTranslations(),
@@ -109,7 +112,7 @@ export const AdminLayout = async ({
     );
   } catch (err) {
     if (err instanceof Error && err.message === 'ACCESS_DENIED') {
-      redirect('/admin');
+      redirect({ href: '/admin', locale });
     }
 
     throw err;

diff --git a/packages/frontend/src/views/admin/layout/auth/aside/hooks/mutation-api.ts b/packages/frontend/src/views/admin/layout/auth/aside/hooks/mutation-api.ts
@@ -9,6 +9,7 @@ import {
 } from '@/graphql/mutations/admin/sessions/admin_sessions__sign_out.generated';
 import { revalidateTags } from '@/graphql/revalidate-tags';
 import { redirect } from '@/navigation';
+import { getLocale } from 'next-intl/server';
 
 export const mutationApi = async () => {
   try {
@@ -19,7 +20,7 @@ export const mutationApi = async () => {
       query: Admin_Sessions__Sign_Out,
     });
 
-    const adminIdFromCookie = getAdminIdCookie();
+    const adminIdFromCookie = await getAdminIdCookie();
     if (adminIdFromCookie) {
       revalidateTags.sessionAdmin(+adminIdFromCookie);
     }
@@ -29,5 +30,6 @@ export const mutationApi = async () => {
     return { error: e.message };
   }
 
-  redirect('/admin');
+  const locale = await getLocale();
+  redirect({ href: '/admin', locale });
 };
diff --git a/...ges/frontend/src/views/admin/views/core/advanced/files/files-advanced-core-admin-view.tsx b/...ges/frontend/src/views/admin/views/core/advanced/files/files-advanced-core-admin-view.tsx
@@ -29,7 +29,7 @@ const getData = async (variables: Admin__Core_Files__ShowQueryVariables) => {
 };
 
 export interface FilesAdvancedCoreAdminViewProps {
-  searchParams: SearchParamsPagination;
+  searchParams: Promise<SearchParamsPagination>;
 }
 
 export const generateMetadataFilesAdvancedCoreAdmin =
@@ -44,7 +44,7 @@ export const generateMetadataFilesAdvancedCoreAdmin =
 export const FilesAdvancedCoreAdminView = async ({
   searchParams,
 }: FilesAdvancedCoreAdminViewProps) => {
-  const variables = getPaginationTool({
+  const variables = await getPaginationTool({
     searchParams,
     defaultPageSize: 10,
     sortByEnum: ShowCoreFilesSortingColumnEnum,

diff --git a/packages/frontend/src/views/admin/views/core/langs/langs-core-admin-view.tsx b/packages/frontend/src/views/admin/views/core/langs/langs-core-admin-view.tsx
@@ -32,11 +32,8 @@ const getData = async (
   return data;
 };
 
-export interface LangsCoreAdminViewProps {
-  params: {
-    locale: string;
-  };
-  searchParams: SearchParamsPagination;
+interface Props {
+  searchParams: Promise<SearchParamsPagination>;
 }
 
 export const generateMetadataLangsCoreAdmin = async (): Promise<Metadata> => {
@@ -47,10 +44,8 @@ export const generateMetadataLangsCoreAdmin = async (): Promise<Metadata> => {
   };
 };
 
-export const LangsCoreAdminView = async ({
-  searchParams,
-}: LangsCoreAdminViewProps) => {
-  const variables = getPaginationTool({
+export const LangsCoreAdminView = async ({ searchParams }: Props) => {
+  const variables = await getPaginationTool({
     searchParams,
     defaultPageSize: 10,
     sortByEnum: ShowCoreLanguagesSortingColumnEnum,

diff --git a/packages/frontend/src/views/admin/views/core/plugins/plugins-admin-view.tsx b/packages/frontend/src/views/admin/views/core/plugins/plugins-admin-view.tsx
@@ -18,7 +18,7 @@ import { ContentPluginsCoreAdmin } from './content';
 import { WarnReqRestartServer } from './warn-req-restart-server';
 
 export interface PluginsAdminViewProps {
-  searchParams: SearchParamsPagination;
+  searchParams: Promise<SearchParamsPagination>;
 }
 
 const getData = async (variables: Admin__Core_Plugins__ShowQueryVariables) => {
@@ -44,7 +44,7 @@ export const generateMetadataPluginsAdmin = async (): Promise<Metadata> => {
 export const PluginsAdminView = async ({
   searchParams,
 }: PluginsAdminViewProps) => {
-  const variables = getPaginationTool({
+  const variables = await getPaginationTool({
     searchParams,
     sortByEnum: ShowAdminPluginsSortingColumnEnum,
     defaultPageSize: 10,

diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/layout/layout.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/layout/layout.tsx
@@ -13,16 +13,18 @@ import { ActionsDevPluginAdmin } from './actions/actions';
 import { getPluginDataAdmin } from './query-api';
 import { TabsDevPluginAdmin } from './tabs';
 
-export interface DevPluginAdminLayoutProps {
+interface Props {
   children: React.ReactNode;
-  params: {
+  params: Promise<{
     code: string;
-  };
+    locale: string;
+  }>;
 }
 
 export async function generateMetadataDevPluginAdminLayout({
-  params: { code },
-}: DevPluginAdminLayoutProps): Promise<Metadata> {
+  params,
+}: Props): Promise<Metadata> {
+  const { code } = await params;
   const data = await getPluginDataAdmin({ code });
   if (data.admin__core_plugins__show.edges.length === 0) return {};
 
@@ -36,18 +38,16 @@ export async function generateMetadataDevPluginAdminLayout({
   };
 }
 
-export const DevPluginAdminLayout = async ({
-  params: { code },
-  children,
-}: DevPluginAdminLayoutProps) => {
-  if (!CONFIG.node_development) redirect('/admin');
+export const DevPluginAdminLayout = async ({ params, children }: Props) => {
+  const { code, locale } = await params;
+  if (!CONFIG.node_development) redirect({ href: '/admin', locale });
   const [data, t] = await Promise.all([
     getPluginDataAdmin({ code }),
     getTranslations('core.global'),
   ]);
 
   if (data.admin__core_plugins__show.edges.length === 0) {
-    redirect('/admin');
+    redirect({ href: '/admin', locale });
   }
 
   const plugin = data.admin__core_plugins__show.edges.at(0);