test

src/app/search/image/loading.jsx

@@ -1,23 +0,0 @@
-export default function loading() {
-  return (
-    <div className="pt-10 mx-2 lg:pl-52 max-w-6xl flex sm:space-x-4 flex-col sm:flex-row pb-42">
-      <div className="animate-pulse">
-        <div className="h-48 w-48 mb-4 bg-gray-200 rounded-md"></div>
-        <div className="h-2 w-48 mb-2.5 bg-gray-200 rounded-md"></div>
-        <div className="h-2 w-44 mb-2.5 bg-gray-200 rounded-md"></div>
-      </div>
-      <div className="hidden sm:inline-flex sm:space-x-4">
-        <div className="animate-pulse">
-          <div className="h-48 w-48 mb-4 bg-gray-200 rounded-md"></div>
-          <div className="h-2 w-48 mb-2.5 bg-gray-200 rounded-md"></div>
-          <div className="h-2 w-44 mb-2.5 bg-gray-200 rounded-md"></div>
-        </div>
-        <div className="animate-pulse">
-          <div className="h-48 w-48 mb-4 bg-gray-200 rounded-md"></div>
-          <div className="h-2 w-48 mb-2.5 bg-gray-200 rounded-md"></div>
-          <div className="h-2 w-44 mb-2.5 bg-gray-200 rounded-md"></div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/search/image/page.jsx

@@ -1,36 +0,0 @@
-export const dynamic = "force-dynamic";
-
-import ImageSearchResults from "@/components/ImageSearchResults";
-import Link from "next/link";
-
-export default async function ImageSearchPage({ searchParams }) {
-  const startIndex = searchParams.start || "1";
-  await new Promise((resolve) => setTimeout(resolve, 2000));
-  const response = await fetch(
-    `https://www.googleapis.com/customsearch/v1?key=${process.env.API_KEY}&cx=${process.env.CONTEXT_KEY}&q=${searchParams.searchTerm}}&searchType=image&start=${startIndex}`
-  );
-
-  if (!response.ok) {
-    console.log(response);
-    throw new Error("Something went wrong");
-  }
-
-  const data = await response.json();
-
-  const results = data.items;
-
-  if (!results) {
-    return (
-      <div className="flex flex-col justify-center items-center pt-10">
-        <h1 className="text-3xl mb-4">No results found</h1>
-        <p className="text-lg">
-          Try searching for something else or go back to the homepage{" "}
-          <Link href="/" className="text-blue-500">
-            Home
-          </Link>
-        </p>
-      </div>
-    );
-  }
-  return <>{results && <ImageSearchResults results={data} />}</>;
-}

src/app/search/layout.jsx

@@ -1,5 +1,5 @@
 import SearchHeader from "@/components/SearchHeader";
-import "./../globals.css";
+import "../../app/globals.css";
 
 export default function SearchLayout({ children }) {
   return (

src/app/search/web/page.jsx

@@ -103,4 +103,4 @@ export default function WebSearchPage({ params, searchParams }) {
         </MemoizedReactMarkdown>
       </div>
     );
-}
+}

src/pages/index.js

@@ -24,12 +24,11 @@ export default function Home() {
   );
 }
 
-export async function getServerSideProps(context) {
+export async function getStaticProps(context) {
     // You can access the query parameters of the request with context.query
     const searchParams = context.query;
-  
-    // TODO: Perform any necessary operations with searchParams
-  
-    // Return searchParams as a prop to your page
-    return { props: { searchParams } };
+    if (searchParams) {
+        return { props: { searchParams } };
+    }
+    return { props: {} };    
 }