Ported sanity studio to Next js app

app/(site)/[locale]/[...slug]/page.tsx

@@ -0,0 +1,68 @@
+import getQueryFromSlug from '@/helpers/get-query-from-slug';
+import { clientFetch } from 'lib/sanity/sanity.client';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import CategoryPage from './pages/category-page';
+import ProductPage from './pages/product-page';
+import SinglePage from './pages/single-page';
+
+export const revalidate = 43200; // 12 hours in seconds
+
+export async function generateMetadata({
+  params
+}: {
+  params: { locale: string; slug: string[] };
+}): Promise<Metadata> {
+  const { slug, locale } = params;
+
+  const { query = '', queryParams } = getQueryFromSlug(slug, locale);
+
+  const page = await clientFetch(query, queryParams);
+
+  if (!page) return notFound();
+
+  return {
+    title: `${page.seo?.title || page.title}`,
+    description: page.seo?.description || page.bodySummary,
+    openGraph: {
+      publishedTime: page.createdAt,
+      modifiedTime: page.updatedAt,
+      type: 'article'
+    }
+  };
+}
+
+interface PageParams {
+  params: {
+    locale: string;
+    slug: string[];
+  };
+}
+
+export default async function Page({ params }: PageParams) {
+  const { slug, locale } = params;
+
+  const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale);
+
+  let pageData;
+
+  if (docType === 'page') {
+    pageData = await clientFetch(query, queryParams);
+  } else if (docType === 'product') {
+    pageData = await clientFetch(query, queryParams);
+  } else if (docType === 'category') {
+    pageData = await clientFetch(query, queryParams);
+  } else {
+    return;
+  }
+
+  if (!pageData) return notFound();
+
+  return (
+    <>
+      {docType === 'page' && <SinglePage data={pageData} />}
+      {docType === 'product' && <ProductPage data={pageData} />}
+      {docType === 'category' && <CategoryPage data={pageData} />}
+    </>
+  );
+}

app/(site)/[locale]/[...slug]/pages/category-page.tsx

@@ -0,0 +1,26 @@
+import Search from '@/components/search/search';
+import SearchResult from '@/components/search/search-result';
+import Text from '@/components/ui/text/text';
+
+interface CategoryPageParams {
+  data: object | any;
+}
+
+export default function CategoryPage({ data }: CategoryPageParams) {
+  const category = data;
+
+  const { title } = category;
+
+  return (
+    <div className="my-8 flex w-full flex-col px-4 lg:my-12 lg:px-8 2xl:px-16">
+      {title && (
+        <Text className="mb-8 lg:mb-12" variant="pageHeading">
+          {title}
+        </Text>
+      )}
+      <Search isCategory placeholder={title.toLowerCase()}>
+        <SearchResult />
+      </Search>
+    </div>
+  );
+}

app/(site)/[locale]/[...slug]/pages/product-page.tsx

@@ -0,0 +1,28 @@
+import ProductView from '@/components/product/product-view';
+interface ProductPageParams {
+  data: object | any;
+}
+
+export default function ProductPage({ data }: ProductPageParams) {
+  const product = data;
+
+  const productJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    description: product.description,
+    image: product.images[0].asset.url
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(productJsonLd)
+        }}
+      />
+      <ProductView product={product} relatedProducts={[]} />;
+    </>
+  );
+}

app/(site)/[locale]/[...slug]/pages/single-page.tsx

@@ -0,0 +1,13 @@
+import DynamicContentManager from '@/components/layout/dynamic-content-manager/dynamic-content-manager';
+
+interface SinglePageParams {
+  data: object | any;
+}
+
+export default function SinglePage({ data }: SinglePageParams) {
+  return (
+    <>
+      <DynamicContentManager content={data?.content} />;
+    </>
+  );
+}