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} />;
+    </>
+  );
+}

app/(site)/[locale]/error.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export default function Error({ reset }: { reset: () => void }) {
+  return (
+    <div>
+      <h2>Something went wrong.</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  );
+}

app/(site)/[locale]/layout.tsx

@@ -0,0 +1,71 @@
+import Footer from 'components/layout/footer/footer';
+import Header from 'components/layout/header/header';
+import { NextIntlClientProvider } from 'next-intl';
+import { Inter } from 'next/font/google';
+import { notFound } from 'next/navigation';
+import { ReactNode, Suspense } from 'react';
+import { supportedLanguages } from '../../../i18n-config';
+import './../../globals.css';
+
+export const metadata = {
+  title: {
+    default: process.env.SITE_NAME,
+    template: `%s | ${process.env.SITE_NAME}`
+  },
+  description: process.env.SITE_DESCRIPTION,
+  robots: {
+    follow: true,
+    index: true
+  },
+  ...(process.env.TWITTER_CREATOR &&
+    process.env.TWITTER_SITE && {
+      twitter: {
+        card: 'summary_large_image',
+        creator: process.env.TWITTER_CREATOR,
+        site: process.env.TWITTER_SITE
+      }
+    })
+};
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter'
+});
+
+export function generateStaticParams() {
+  return supportedLanguages.locales.map((locale) => ({ locale: locale.id }));
+}
+
+interface LocaleLayoutProps {
+  children: ReactNode;
+  params: {
+    locale: string;
+  };
+}
+
+export default async function LocaleLayout({ children, params: { locale } }: LocaleLayoutProps) {
+  let messages;
+
+  try {
+    messages = (await import(`../../../messages/${locale}.json`)).default;
+  } catch (error) {
+    notFound();
+  }
+
+  return (
+    <html lang={locale} className={inter.variable}>
+      <body className="flex min-h-screen flex-col">
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          <Header locale={locale} />
+          <Suspense>
+            <main className="flex-1">{children}</main>
+          </Suspense>
+          <Suspense>
+            <Footer locale={locale} />
+          </Suspense>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

app/(site)/[locale]/not-found.tsx

@@ -0,0 +1,8 @@
+export default function NotFound() {
+  return (
+    <>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+    </>
+  );
+}

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

@@ -0,0 +1,38 @@
+import DynamicContentManager from 'components/layout/dynamic-content-manager/dynamic-content-manager';
+import { homePageQuery } from 'lib/sanity/queries';
+import { clientFetch } from 'lib/sanity/sanity.client';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+export const runtime = 'edge';
+
+export async function generateMetadata({
+  params
+}: {
+  params: { slug: string; locale: string };
+}): Promise<Metadata> {
+  const homePage = await clientFetch(homePageQuery, params);
+
+  if (!homePage) return notFound();
+
+  return {
+    title: homePage.seo.title || homePage.title,
+    description: homePage.seo.description || homePage.description
+  };
+}
+
+interface HomePageParams {
+  params: {
+    locale: string;
+  };
+}
+
+export default async function HomePage({ params }: HomePageParams) {
+  const data = await clientFetch(homePageQuery, params);
+
+  return (
+    <>
+      <DynamicContentManager content={data?.content} />
+    </>
+  );
+}

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

@@ -0,0 +1,22 @@
+'use client';
+
+import Search from '@/components/search/search';
+import SearchResult from '@/components/search/search-result';
+import Text from '@/components/ui/text/text';
+import { useTranslations } from 'next-intl';
+
+export default function SearchPage() {
+  const t = useTranslations('search');
+
+  return (
+    <div className="my-8 flex w-full flex-col px-4 lg:my-12 lg:px-8 2xl:px-16">
+      <Text className="mb-8 lg:mb-12" variant="pageHeading">
+        {t('search')}
+      </Text>
+
+      <Search>
+        <SearchResult />
+      </Search>
+    </div>
+  );
+}