cleanup

app/[locale]/shop-list/page.tsx

@@ -3,12 +3,12 @@ import type { Metadata } from 'next';
 import Footer from 'components/layout/footer';
 import Navbar from 'components/layout/navbar';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
-import Prose from 'components/prose';
 import { getCart, getPage, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
+import ShopListDetail from './shop-list-detail';
 import ShopsNav from './shops-nav';
 
 export async function generateMetadata({
@@ -16,7 +16,10 @@ export async function generateMetadata({
 }: {
   params: { locale?: SupportedLocale };
 }): Promise<Metadata> {
-  const page = await getPage({ handle: 'shop-list', language: params?.locale?.toUpperCase() });
+  const page = await getPage({
+    handle: 'shop-list',
+    language: params?.locale?.toUpperCase() || 'JA'
+  });
 
   if (!page) return notFound();
 
@@ -39,26 +42,21 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
     cart = await getCart(cartId);
   }
 
-  const page = await getPage({ handle: 'shop-list', language: params?.locale?.toUpperCase() });
-
-  if (!page) return notFound();
-
   const promotedItem: Product | undefined = await getProduct({
     handle: 'gift-bag-and-postcard-set',
-    language: params?.locale?.toUpperCase()
+    language: params?.locale?.toUpperCase() || 'JA'
   });
 
   return (
     <div>
       <Navbar cart={cart} locale={params?.locale} compact showTop promotedItem={promotedItem} />
       <div className="mx-auto max-w-xl px-6 pb-24 pt-12 md:pb-48 md:pt-24">
-        <Suspense>
-          <div className="pb-12">
-            <ShopsNav />
-          </div>
+        <div className="pb-12">
+          <ShopsNav />
+        </div>
+        <Suspense fallback={null}>
+          <ShopListDetail language={params?.locale?.toUpperCase()} />
         </Suspense>
-        {/* <h2 className="font-multilingual mb-8 text-3xl font-medium">{page.title}</h2> */}
-        <Prose html={page.body as string} />
       </div>
 
       <Footer cart={cart} />

app/[locale]/shop-list/shop-list-detail.tsx

@@ -0,0 +1,13 @@
+'use server';
+
+import Prose from 'components/prose';
+import { getPage } from 'lib/shopify';
+import { notFound } from 'next/navigation';
+
+export default async function ShopListDetail({ language }: { language?: string }) {
+  const page = await getPage({ handle: 'shop-list', language });
+
+  if (!page) return notFound();
+
+  return <Prose html={page.body as string} />;
+}