feat: install Sanity

sanity.cli.ts

@@ -0,0 +1,10 @@
+/**
+ * This configuration file lets you run `$ sanity [command]` in this folder
+ * Go to https://www.sanity.io/docs/cli to learn more.
+ **/
+import { defineCliConfig } from 'sanity/cli';
+
+const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID;
+const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET;
+
+export default defineCliConfig({ api: { projectId, dataset } });

sanity.config.ts

@@ -0,0 +1,25 @@
+/**
+ * This configuration is used to for the Sanity Studio that’s mounted on the `/app/studio/[[...index]]/page.tsx` route
+ */
+
+import { visionTool } from '@sanity/vision';
+import { defineConfig } from 'sanity';
+import { deskTool } from 'sanity/desk';
+
+// Go to https://www.sanity.io/docs/api-versioning to learn how API versioning works
+import { apiVersion, dataset, projectId } from './sanity/env';
+import { schema } from './sanity/schema';
+
+export default defineConfig({
+  basePath: '/studio',
+  projectId,
+  dataset,
+  // Add and edit the content schema in the './sanity/schema' folder
+  schema,
+  plugins: [
+    deskTool(),
+    // Vision is a tool that lets you query your content with GROQ in the studio
+    // https://www.sanity.io/docs/the-vision-plugin
+    visionTool({ defaultApiVersion: apiVersion }),
+  ],
+});

sanity/env.ts

@@ -0,0 +1,22 @@
+export const apiVersion =
+  process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-07-05';
+
+export const dataset = assertValue(
+  process.env.NEXT_PUBLIC_SANITY_DATASET,
+  'Missing environment variable: NEXT_PUBLIC_SANITY_DATASET'
+);
+
+export const projectId = assertValue(
+  process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
+  'Missing environment variable: NEXT_PUBLIC_SANITY_PROJECT_ID'
+);
+
+export const useCdn = false;
+
+function assertValue<T>(v: T | undefined, errorMessage: string): T {
+  if (v === undefined) {
+    throw new Error(errorMessage);
+  }
+
+  return v;
+}

sanity/lib/client.ts

@@ -0,0 +1,10 @@
+import { createClient } from 'next-sanity';
+
+import { apiVersion, dataset, projectId, useCdn } from '../env';
+
+export const client = createClient({
+  apiVersion,
+  dataset,
+  projectId,
+  useCdn,
+});

sanity/lib/image.ts

@@ -0,0 +1,13 @@
+import createImageUrlBuilder from '@sanity/image-url';
+import type { Image } from 'sanity';
+
+import { dataset, projectId } from '../env';
+
+const imageBuilder = createImageUrlBuilder({
+  projectId: projectId || '',
+  dataset: dataset || '',
+});
+
+export const urlForImage = (source: Image) => {
+  return imageBuilder?.image(source).auto('format').fit('max');
+};

sanity/schema.ts

@@ -0,0 +1,5 @@
+import { type SchemaTypeDefinition } from 'sanity';
+
+export const schema: { types: SchemaTypeDefinition[] } = {
+  types: [],
+};

src/app/studio/[[...index]]/page.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+/**
+ * This route is responsible for the built-in authoring environment using Sanity Studio.
+ * All routes under your studio path is handled by this file using Next.js' catch-all routes:
+ * https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
+ *
+ * You can learn more about the next-sanity package here:
+ * https://github.com/sanity-io/next-sanity
+ */
+
+import { NextStudio } from 'next-sanity/studio';
+
+import config from '../../../../sanity.config';
+
+export default function StudioPage() {
+  return <NextStudio config={config} />;
+}

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,