clean up

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

@@ -0,0 +1,29 @@
+import { fetchCoins, fetchCoinsId } from "@/lib/fetch-coins";
+import getQueryClient from "@/lib/react-query";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+
+export default async function CoinIdLayout({
+  children,
+}: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
+  const queryClient = getQueryClient();
+
+  const initialCoins = await fetchCoins();
+
+  const firstCoinId = initialCoins[0]?.id;
+
+  queryClient.prefetchQuery({
+    queryKey: ["coin", "market_cap_desc", 1],
+    queryFn: async () => await fetchCoinsId(firstCoinId),
+  });
+
+  return (
+    <div>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        {children}
+      </HydrationBoundary>
+    </div>
+  );
+}

src/app/[locale]/layout.tsx

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

src/lib/fetch-coins.ts

@@ -6,7 +6,7 @@ export const fetchCoins = async (sortOrder = "market_cap_desc", page = 1) => {
   return res.json();
 };
 
-export const fetchCoinData = async (coinId?: string): Promise<CoinIdData> => {
+export const fetchCoinsId = async (coinId?: string): Promise<CoinIdData> => {
   const response = await fetch(
     `https://api.coingecko.com/api/v3/coins/${coinId}`
   );