clean up

next.config.mjs

@@ -3,6 +3,10 @@ import createNextIntlPlugin from "next-intl/plugin";
 const withNextIntl = createNextIntlPlugin();
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    domains: ["coin-images.coingecko.com"],
+  },
+};
 
 export default withNextIntl(nextConfig);

src/app/[locale]/(home)/coin/[coinId]/page.tsx

@@ -40,8 +40,8 @@ export default function CoinInfoPage() {
         <Card className="mb-8">
           <CardHeader className="flex flex-row items-center space-y-0 pb-2">
             <Avatar className="h-16 w-16 mr-4">
-              <AvatarImage src={coin?.image.large} alt={coin?.name} />
-              <AvatarFallback>{coin?.symbol.toUpperCase()}</AvatarFallback>
+              <AvatarImage src={coin?.image?.large} alt={coin?.name} />
+              <AvatarFallback>{coin?.symbol?.toUpperCase()}</AvatarFallback>
             </Avatar>
             <div>
               <CardTitle className="text-2xl">{coin?.name}</CardTitle>

src/app/[locale]/layout.tsx

@@ -1,7 +1,6 @@
 import { Navbar } from "@/components/pages/container/navbar";
 import QueryProvider from "@/components/providers/query-provider";
-import { fetchCoins } from "@/lib/fetch-coins";
-// import { fetchCoins } from "@/lib/fetch-coins";
+import { fetchCoinData, fetchCoins } from "@/lib/fetch-coins";
 import getQueryClient from "@/lib/react-query";
 import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { NextIntlClientProvider } from "next-intl";
@@ -18,9 +17,14 @@ export default async function LocaleLayout({
   const queryClient = getQueryClient();
 
   const initialCoins = await fetchCoins();
-
   queryClient.setQueryData(["coin", "market_cap_desc", 1], initialCoins);
 
+  const firstCoinId = initialCoins[0]?.id;
+  if (firstCoinId) {
+    const coinData = await fetchCoinData(firstCoinId);
+    queryClient.setQueryData(["coin", firstCoinId], coinData);
+  }
+
   return (
     <NextIntlClientProvider messages={messages} locale={locale}>
       <QueryProvider>

src/components/hooks/coin-hook.ts

@@ -1,4 +1,4 @@
-import { fetchCoins } from "@/lib/fetch-coins";
+import { fetchCoinData, fetchCoins } from "@/lib/fetch-coins";
 import { useQuery } from "@tanstack/react-query";
 import { useParams } from "next/navigation";
 
@@ -17,15 +17,7 @@ export const CoinHook = (
 
   const coinIdQuery = useQuery<CoinIdData>({
     queryKey: ["coin", params.coinId],
-    queryFn: async () => {
-      const response = await fetch(
-        `https://api.coingecko.com/api/v3/coins/${params.coinId}`
-      );
-      if (!response.ok) {
-        throw new Error("Network response was not ok");
-      }
-      return response.json();
-    },
+    queryFn: () => fetchCoinData(),
     enabled: !!params.coinId,
     staleTime: 60000,
     refetchOnWindowFocus: false,