♻️ refactor: refactor page params to adapt next15 breaking change (#4904

)

* refactor the page async params

* fix

* fix

src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx

@@ -8,6 +8,7 @@ import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
 import { DiscoverProviderItem } from '@/types/discover';
+import { PageProps } from '@/types/next';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import DetailLayout from '../../features/DetailLayout';
@@ -17,9 +18,12 @@ import InfoSidebar from './features/InfoSidebar';
 import ParameterList from './features/ParameterList';
 import ProviderList from './features/ProviderList';
 
-type Props = { params: { slugs: string[] }; searchParams: { hl?: Locales } };
+type Props = PageProps<{ slugs: string[] }, { hl?: Locales }>;
+
+export const generateMetadata = async (props: Props) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
 
-export const generateMetadata = async ({ params, searchParams }: Props) => {
   const { slugs } = params;
   const identifier = decodeURIComponent(slugs.join('/'));
   const { t, locale } = await translation('metadata', searchParams?.hl);
@@ -59,7 +63,10 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
   };
 };
 
-const Page = async ({ params, searchParams }: Props) => {
+const Page = async (props: Props) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+
   const { slugs } = params;
 
   const identifier = decodeURIComponent(slugs.join('/'));

src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx

@@ -2,11 +2,11 @@ import { notFound } from 'next/navigation';
 import urlJoin from 'url-join';
 
 import StructuredData from '@/components/StructuredData';
-import { Locales } from '@/locales/resources';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
+import { DiscoverPageProps } from '@/types/discover';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import DetailLayout from '../../features/DetailLayout';
@@ -16,9 +16,10 @@ import InfoSidebar from './features/InfoSidebar';
 import ParameterList from './features/ParameterList';
 import Schema from './features/Schema';
 
-type Props = { params: { slug: string }; searchParams: { hl?: Locales } };
+export const generateMetadata = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
 
-export const generateMetadata = async ({ params, searchParams }: Props) => {
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
 
@@ -57,7 +58,10 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
   };
 };
 
-const Page = async ({ params, searchParams }: Props) => {
+const Page = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const mobile = isMobileDevice();

src/app/(main)/discover/(detail)/provider/[slug]/page.tsx

@@ -3,13 +3,12 @@ import urlJoin from 'url-join';
 
 import StructuredData from '@/components/StructuredData';
 import { CustomMDX } from '@/components/mdx';
-import { Locales } from '@/locales/resources';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { DocService } from '@/server/services/doc';
 import { translation } from '@/server/translation';
-import { DiscoverModelItem } from '@/types/discover';
+import { DiscoverModelItem, DiscoverPageProps } from '@/types/discover';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import DetailLayout from '../../features/DetailLayout';
@@ -18,9 +17,10 @@ import Header from './features/Header';
 import InfoSidebar from './features/InfoSidebar';
 import ModelList from './features/ModelList';
 
-type Props = { params: { slug: string }; searchParams: { hl?: Locales } };
+export const generateMetadata = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
 
-export const generateMetadata = async ({ params, searchParams }: Props) => {
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('models', searchParams?.hl);
@@ -55,7 +55,10 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
   };
 };
 
-const Page = async ({ params, searchParams }: Props) => {
+const Page = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('models', searchParams?.hl);

src/app/(main)/discover/(list)/assistants/[slug]/page.tsx

@@ -1,19 +1,19 @@
 import urlJoin from 'url-join';
 
 import StructuredData from '@/components/StructuredData';
-import { Locales } from '@/locales/resources';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
-import { AssistantCategory } from '@/types/discover';
+import { AssistantCategory, DiscoverPageProps } from '@/types/discover';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import List from '../features/List';
 
-type Props = { params: { slug: AssistantCategory }; searchParams: { hl?: Locales } };
+export const generateMetadata = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
 
-export const generateMetadata = async ({ params, searchParams }: Props) => {
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
 
@@ -26,7 +26,10 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
   });
 };
 
-const Page = async ({ params, searchParams }: Props) => {
+const Page = async (props: DiscoverPageProps<AssistantCategory>) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
   const mobile = isMobileDevice();

src/app/(main)/discover/(list)/models/[slug]/page.tsx

@@ -2,19 +2,19 @@ import urlJoin from 'url-join';
 
 import StructuredData from '@/components/StructuredData';
 import { DEFAULT_LANG } from '@/const/locale';
-import { Locales } from '@/locales/resources';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
-import { AssistantCategory } from '@/types/discover';
+import { DiscoverPageProps } from '@/types/discover';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import List from '../features/List';
 
-type Props = { params: { slug: AssistantCategory }; searchParams: { hl?: Locales } };
+export const generateMetadata = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
 
-export const generateMetadata = async ({ params, searchParams }: Props) => {
   const { t, locale } = await translation('metadata', searchParams?.hl);
 
   const discoverService = new DiscoverService();
@@ -30,7 +30,10 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
   });
 };
 
-const Page = async ({ params, searchParams }: Props) => {
+const Page = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const mobile = isMobileDevice();
 

src/app/(main)/discover/(list)/plugins/[slug]/page.tsx

@@ -1,19 +1,19 @@
 import urlJoin from 'url-join';
 
 import StructuredData from '@/components/StructuredData';
-import { Locales } from '@/locales/resources';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
-import { PluginCategory } from '@/types/discover';
+import { DiscoverPageProps, PluginCategory } from '@/types/discover';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import List from '../features/List';
 
-type Props = { params: { slug: PluginCategory }; searchParams: { hl?: Locales } };
+export const generateMetadata = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
 
-export const generateMetadata = async ({ params, searchParams }: Props) => {
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
 
@@ -26,7 +26,10 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
   });
 };
 
-const Page = async ({ params, searchParams }: Props) => {
+const Page = async (props: DiscoverPageProps<PluginCategory>) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
   const mobile = isMobileDevice();

src/app/(main)/discover/search/page.tsx

@@ -7,6 +7,7 @@ import { Locales } from '@/locales/resources';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
+import { PageProps } from '@/types/next';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import { ListLoadingWithoutBanner } from '../components/ListLoading';
@@ -24,15 +25,18 @@ const ProvidersResult = dynamic(() => import('./features/ProvidersResult'), {
   loading: () => <ListLoadingWithoutBanner />,
 });
 
-type Props = {
-  searchParams: {
+type Props = PageProps<
+  undefined,
+  {
     hl?: Locales;
     q?: string;
     type?: 'assistants' | 'plugins' | 'models' | 'providers';
-  };
-};
+  }
+>;
+
+export const generateMetadata = async (props: Props) => {
+  const searchParams = await props.searchParams;
 
-export const generateMetadata = async ({ searchParams }: Props) => {
   const { t, locale } = await translation('metadata', searchParams?.hl);
 
   return metadataModule.generate({
@@ -44,7 +48,9 @@ export const generateMetadata = async ({ searchParams }: Props) => {
   });
 };
 
-const Page = async ({ searchParams }: Props) => {
+const Page = async (props: Props) => {
+  const searchParams = await props.searchParams;
+
   const { q, type = 'assistants' } = searchParams;
   if (!q) redirect(urlJoin(`/discover`, type));
   const keywords = decodeURIComponent(q);

src/app/(main)/files/(content)/@modal/(.)[id]/page.tsx

@@ -1,14 +1,12 @@
+import { PagePropsWithId } from '@/types/next';
+
 import FileDetail from './FileDetail';
 import FilePreview from './FilePreview';
 import FullscreenModal from './FullscreenModal';
 
-interface Params {
-  id: string;
-}
-
-type Props = { params: Params };
+const Page = async (props: PagePropsWithId) => {
+  const params = await props.params;
 
-const Page = ({ params }: Props) => {
   return (
     <FullscreenModal detail={<FileDetail id={params.id} />}>
       <FilePreview id={params.id} />

src/app/(main)/files/[id]/page.tsx

@@ -5,19 +5,16 @@ import FileDetail from '@/app/(main)/files/features/FileDetail';
 import FileViewer from '@/features/FileViewer';
 import { createCallerFactory } from '@/libs/trpc';
 import { lambdaRouter } from '@/server/routers/lambda';
+import { PagePropsWithId } from '@/types/next';
 import { getUserAuth } from '@/utils/server/auth';
 
 import Header from './Header';
 
-interface Params {
-  id: string;
-}
-
-type Props = { params: Params };
-
 const createCaller = createCallerFactory(lambdaRouter);
 
-const FilePage = async ({ params }: Props) => {
+const FilePage = async (props: PagePropsWithId) => {
+  const params = await props.params;
+
   const { userId } = await getUserAuth();
 
   const caller = createCaller({ userId });

src/app/(main)/repos/[id]/evals/dataset/page.tsx

@@ -6,7 +6,6 @@ import { Flexbox } from 'react-layout-kit';
 import CircleLoading from '@/components/CircleLoading';
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 
-import { PageProps } from '../type';
 import DatasetDetail from './DatasetDetail';
 import DatasetList from './DatasetList';
 import EmptyGuide from './EmptyGuide';
@@ -18,7 +17,13 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Dataset = ({ params }: PageProps) => {
+interface Params {
+  id: string;
+}
+
+type Props = { params: Params & Promise<Params> };
+
+const Dataset = ({ params }: Props) => {
   const { styles } = useStyles();
   const knowledgeBaseId = params.id;
 

src/app/(main)/repos/[id]/evals/evaluation/page.tsx

@@ -5,11 +5,16 @@ import { Flexbox } from 'react-layout-kit';
 import CircleLoading from '@/components/CircleLoading';
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 
-import { PageProps } from '../type';
 import EmptyGuide from './EmptyGuide';
 import EvaluationList from './EvaluationList';
 
-const Evaluation = ({ params }: PageProps) => {
+interface Params {
+  id: string;
+}
+
+type Props = { params: Params };
+
+const Evaluation = ({ params }: Props) => {
   const knowledgeBaseId = params.id;
 
   const useFetchEvaluation = useKnowledgeBaseStore((s) => s.useFetchEvaluationList);

src/app/(main)/repos/[id]/evals/layout.tsx

@@ -3,20 +3,21 @@ import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { serverFeatureFlags } from '@/config/featureFlags';
+import { PagePropsWithId } from '@/types/next';
 
 import Container from './components/Container';
 import { Tabs } from './components/Tabs';
-import { PageProps } from './type';
 
-export default ({ children, params }: PropsWithChildren<PageProps>) => {
+export default async (props: PropsWithChildren<PagePropsWithId>) => {
   const enableRAGEval = serverFeatureFlags().enableRAGEval;
+  const params = await props.params;
 
   if (!enableRAGEval) return notFound();
 
   return (
     <Flexbox gap={24} height={'100%'} padding={24} style={{ paddingTop: 0 }}>
       <Tabs knowledgeBaseId={params.id} />
-      <Container>{children}</Container>
+      <Container>{props.children}</Container>
     </Flexbox>
   );
 };

src/app/(main)/repos/[id]/evals/page.tsx

@@ -1,9 +1,9 @@
 import { redirect } from 'next/navigation';
 
-interface Params {
-  id: string;
-}
+import { PagePropsWithId } from '@/types/next';
 
-type Props = { params: Params };
+export default async (props: PagePropsWithId) => {
+  const params = await props.params;
 
-export default ({ params }: Props) => redirect(`/repos/${params.id}/evals/dataset`);
+  return redirect(`/repos/${params.id}/evals/dataset`);
+};