升级nextjs版本到16.2.3；引入swiper

package.json

@@ -14,31 +14,45 @@
     "@apollo/client": "^3.14.0",
     "@heroicons/react": "^2.2.0",
     "@heroui/accordion": "^2.2.25",
+    "@heroui/alert": "^2.2.32",
+    "@heroui/avatar": "^2.2.26",
     "@heroui/drawer": "^2.2.25",
+    "@heroui/popover": "^2.3.32",
     "@heroui/react": "^2.8.6",
     "@heroui/select": "^2.4.29",
+    "@heroui/switch": "^2.2.27",
+    "@heroui/system": "^2.4.28",
+    "@react-aria/visually-hidden": "^3.8.31",
+    "@react-types/shared": "^3.33.1",
     "@reduxjs/toolkit": "^2.10.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.24",
     "graphql": "^16.12.0",
     "lucide-react": "^0.563.0",
-    "next": "16.0.10",
+    "next": "16.2.3",
     "next-auth": "^4.24.13",
     "next-themes": "^0.4.6",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
     "react-hook-form": "^7.66.1",
-    "react-redux": "^9.2.0"
+    "react-redux": "^9.2.0",
+    "swiper": "^12.1.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
     "eslint": "^9",
-    "eslint-config-next": "16.0.10",
+    "eslint-config-next": "16.2.3",
     "tailwindcss": "^4",
     "ts-node": "^10.9.2",
     "typescript": "^5"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "19.2.14",
+      "@types/react-dom": "19.2.3"
+    }
   }
 }

src/app/(public)/page.tsx

@@ -1,11 +1,13 @@
 import { GET_THEME_CUSTOMIZATION } from "@/graphql";
 import RenderThemeCustomization from "@components/home/RenderThemeCustomization";
+import HomeImageBanner from "@components/home/HomeImageBanner";
 import { ThemeCustomizationResponse } from "@/types/theme/theme-customization";
 import { cachedGraphQLRequest } from "@/utils/hooks/useCache";
 
 export const revalidate = 3600;
 
 export default async function Home() {
+  // const 
   const data = await cachedGraphQLRequest<ThemeCustomizationResponse>(
     "home",
     GET_THEME_CUSTOMIZATION,
@@ -13,6 +15,10 @@ export default async function Home() {
   );
 
   return (
-    <RenderThemeCustomization themeCustomizations={data?.themeCustomizations} />
+    <>
+      <HomeImageBanner />
+      <RenderThemeCustomization themeCustomizations={data?.themeCustomizations} />
+    </>
+    
   );
 }

src/app/(public)/product/[...urlProduct]/page.tsx

@@ -46,8 +46,8 @@ async function getSingleProduct(urlKey: string) {
 
   try {
     const dataById = await cachedProductRequest<SingleProductResponse>(
-      urlKey,
-      GET_PRODUCT_BY_URL_KEY,
+      urlKey, // 产品名称
+      GET_PRODUCT_BY_URL_KEY, // gql查询语句
       { urlKey: urlKey },
     );
 
@@ -68,7 +68,7 @@ async function getSingleProduct(urlKey: string) {
     return null;
   }
 }
-
+//动态路由中的参数 -- params
 export default async function ProductPage({
   params,
 }: {

src/app/(public)/search/[collection]/page.tsx

@@ -23,7 +23,7 @@ import { TreeCategoriesResponse } from "@/types/theme/category-tree";
 import { MobileSearchBar } from "@components/layout/navbar/MobileSearch";
 import { extractNumericId, findCategoryBySlug, getFilterAttributes, buildProductFilters } from "@utils/helper";
 
-
+/**列表页 */
 export async function generateMetadata({
   params,
 }: {

src/components/common/slider/HeroCarousel.tsx

@@ -65,7 +65,7 @@ export default function HeroCarousel({
               priority={true}
               sizes="(max-width: 1024px) 100vw, (max-width: 1536px) 66vw, 1000px"
               src={images[current]?.src as string}
-              onLoadingComplete={() => setIsLoading(false)}
+              onLoad={() => setIsLoading(false)}
               onError={() => setIsLoading(false)}
             />
           </div>

src/components/home/HomeImageBanner.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+
+// interface ImageCarouselProps {
+//     options: {
+//         images: {
+//             image: string;
+//             link: string;
+//             title?: string;
+//         }[];
+//     };
+// }
+export default function HomeImageBanner() {
+  return (
+    <Swiper
+      spaceBetween={50}
+      slidesPerView={3}
+      onSlideChange={() => console.log('slide change')}
+      onSwiper={(swiper) => console.log(swiper)}
+    >
+      <SwiperSlide>Slide 1</SwiperSlide>
+      <SwiperSlide>Slide 2</SwiperSlide>
+      <SwiperSlide>Slide 3</SwiperSlide>
+      <SwiperSlide>Slide 4</SwiperSlide>
+    </Swiper>
+
+  )
+}