feat: upgrade nextjs to 14 and sanity components

0-vortex · 0-vortex · commit 3d54673989ea · 2023-12-19T11:14:34.000+02:00
closes #1
diff --git a/app/(personal)/layout.tsx b/app/(personal)/layout.tsx
@@ -1,4 +1,4 @@
-import 'styles/index.css'
+import '@/styles/index.css'
 
 import { toPlainText } from '@portabletext/react'
 import { Metadata, Viewport } from 'next'
diff --git a/components/pages/home/HomePage.tsx b/components/pages/home/HomePage.tsx
@@ -1,4 +1,4 @@
-import { type EncodeDataAttributeCallback } from '@sanity/react-loader/rsc'
+import { type EncodeDataAttributeCallback } from '@sanity/react-loader'
 import clsx from 'clsx'
 import Link from 'next/link'
 
diff --git a/components/pages/home/HomePagePreview.tsx b/components/pages/home/HomePagePreview.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { EncodeDataAttributeCallback,type QueryResponseInitial } from '@sanity/react-loader/rsc'
+import { EncodeDataAttributeCallback,type QueryResponseInitial } from '@sanity/react-loader'
 
 import { homePageQuery } from '@/sanity/lib/queries'
 import { useQuery } from '@/sanity/loader/useQuery'
diff --git a/components/pages/page/PagePreview.tsx b/components/pages/page/PagePreview.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { type QueryResponseInitial } from '@sanity/react-loader/rsc'
+import { type QueryResponseInitial } from '@sanity/react-loader'
 
 import { pagesBySlugQuery } from '@/sanity/lib/queries'
 import { useQuery } from '@/sanity/loader/useQuery'
diff --git a/components/pages/post/PostPreview.tsx b/components/pages/post/PostPreview.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { type QueryResponseInitial } from '@sanity/react-loader/rsc'
+import { type QueryResponseInitial } from '@sanity/react-loader'
 
 import { pagesBySlugQuery } from '@/sanity/lib/queries'
 import { useQuery } from '@/sanity/loader/useQuery'
diff --git a/components/pages/project/ProjectPage.tsx b/components/pages/project/ProjectPage.tsx
@@ -1,4 +1,4 @@
-import type { EncodeDataAttributeCallback } from '@sanity/react-loader/rsc'
+import type { EncodeDataAttributeCallback } from '@sanity/react-loader'
 import Link from 'next/link'
 
 import { CustomPortableText } from '@/components/shared/CustomPortableText'
diff --git a/components/pages/project/ProjectPreview.tsx b/components/pages/project/ProjectPreview.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { type QueryResponseInitial } from '@sanity/react-loader/rsc'
+import { type QueryResponseInitial } from '@sanity/react-loader'
 
 import { projectBySlugQuery } from '@/sanity/lib/queries'
 import { useQuery } from '@/sanity/loader/useQuery'
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -31,44 +31,44 @@
   "dependencies": {
     "@iconify-icon/react": "^1.0.8",
     "@portabletext/react": "^3.0.11",
-    "@sanity/code-input": "^4.1.1",
+    "@sanity/code-input": "^4.1.2",
     "@sanity/demo": "^1.0.2",
     "@sanity/image-url": "^1.0.2",
-    "@sanity/overlays": "^2.0.3",
-    "@sanity/react-loader": "^1.1.1",
-    "@sanity/vision": "^3.20.2",
+    "@sanity/overlays": "^2.2.2",
+    "@sanity/react-loader": "^1.6.3",
+    "@sanity/vision": "^3.21.3",
     "@tailwindcss/typography": "^0.5.10",
     "clsx": "^2.0.0",
-    "next": "^14.0.3",
-    "next-sanity": "^6.1.2",
+    "next": "^14.0.4",
+    "next-sanity": "^7.0.4",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-toggle-dark-mode": "^1.1.1",
-    "sanity": "^3.20.2",
+    "sanity": "^3.21.3",
     "sanity-plugin-asset-source-unsplash": "^1.1.2",
     "sanity-plugin-iconify": "^1.1.1",
     "server-only": "^0.0.1",
     "styled-components": "^6.1.1"
   },
   "devDependencies": {
-    "@tmcb/check-engines": "^1.0.0",
+    "@tmcb/check-engines": "^1.0.1",
     "@tmcb/conventional-commit": "^1.0.0",
-    "@types/react": "^18.2.39",
-    "@types/react-syntax-highlighter": "^15.5.10",
+    "@types/react": "^18.2.45",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.54.0",
-    "eslint-config-next": "^14.0.3",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
-    "prettier-plugin-packagejson": "^2.4.6",
-    "prettier-plugin-tailwindcss": "^0.5.7",
-    "tailwindcss": "^3.3.5",
-    "typescript": "^5.3.2",
+    "postcss": "^8.4.32",
+    "prettier": "^3.1.1",
+    "prettier-plugin-packagejson": "^2.4.7",
+    "prettier-plugin-tailwindcss": "^0.5.9",
+    "tailwindcss": "^3.3.7",
+    "typescript": "^5.3.3",
     "typesync": "^0.11.1"
   },
   "prettier": {
diff --git a/sanity.config.ts b/sanity.config.ts
@@ -58,10 +58,6 @@ export default defineConfig({
     presentationTool({
       locate,
       previewUrl: {
-        origin:
-          typeof location === 'undefined'
-            ? 'http://localhost:3000'
-            : location.origin,
         draftMode: {
           enable: '/api/draft',
         },
diff --git a/sanity/loader/VisualEditing.tsx b/sanity/loader/VisualEditing.tsx
@@ -1,20 +1,15 @@
 'use client'
 
 import { enableOverlays, HistoryAdapterNavigate } from '@sanity/overlays'
+import { useLiveMode } from '@sanity/react-loader'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useRef, useState } from 'react'
 
 import { client } from '@/sanity/lib/client'
 
-import { useLiveMode } from './useQuery'
-
 // Always enable stega in Live Mode
 const stegaClient = client.withConfig({ stega: true })
 
-// Only allow same-origin Studios to connect
-const allowStudioOrigin =
-  typeof location === 'undefined' ? 'http://localhost:3000' : location.origin
-
 export default function VisualEditing() {
   const router = useRouter()
   const routerRef = useRef(router)
@@ -25,7 +20,6 @@ export default function VisualEditing() {
   }, [router])
   useEffect(() => {
     const disable = enableOverlays({
-      allowStudioOrigin,
       history: {
         subscribe: (navigate) => {
           setNavigate(() => navigate)
@@ -59,7 +53,7 @@ export default function VisualEditing() {
     }
   }, [navigate, pathname, searchParams])
 
-  useLiveMode({ allowStudioOrigin, client: stegaClient })
+  useLiveMode({ client: stegaClient })
   useEffect(() => {
     // If not an iframe or a Vercel Preview deployment, turn off Draft Mode
     if (process.env.NEXT_PUBLIC_VERCEL_ENV !== 'preview' && window === parent) {
diff --git a/sanity/loader/createQueryStore.ts b/sanity/loader/createQueryStore.ts
diff --git a/sanity/loader/loadQuery.ts b/sanity/loader/loadQuery.ts
@@ -1,5 +1,6 @@
 import 'server-only'
 
+import * as queryStore from '@sanity/react-loader'
 import { draftMode } from 'next/headers'
 
 import { client } from '@/sanity/lib/client'
@@ -19,8 +20,6 @@ import {
   SettingsPayload,
 } from '@/types'
 
-import { queryStore } from './createQueryStore'
-
 const serverClient = client.withConfig({
   token,
   stega: {
@@ -44,14 +43,19 @@ export const loadQuery = ((query, params = {}, options = {}) => {
     perspective = draftMode().isEnabled ? 'previewDrafts' : 'published',
   } = options
   // Don't cache by default
-  let cache: RequestCache = 'no-store'
+  let revalidate: NextFetchRequestConfig['revalidate'] = 0
   // If `next.tags` is set, and we're not using the CDN, then it's safe to cache
   if (!usingCdn && Array.isArray(options.next?.tags)) {
-    cache = 'force-cache'
+    revalidate = false
+  } else if (usingCdn) {
+    revalidate = 60
   }
   return queryStore.loadQuery(query, params, {
-    cache,
     ...options,
+    next: {
+      revalidate,
+      ...(options.next || {}),
+    },
     perspective,
   })
 }) satisfies typeof queryStore.loadQuery
diff --git a/sanity/loader/useQuery.ts b/sanity/loader/useQuery.ts
@@ -1,13 +1,10 @@
 import {
   type QueryParams,
   type QueryResponseInitial,
-  useEncodeDataAttribute,
   type UseQueryOptions,
-} from '@sanity/react-loader/rsc'
+} from '@sanity/react-loader'
+import * as queryStore from '@sanity/react-loader'
 
-import { studioUrl } from '@/sanity/lib/api'
-
-import { queryStore } from './createQueryStore'
 import { SettingsPayload } from '@/types'
 import { settingsQuery } from '../lib/queries'
 
@@ -29,32 +26,17 @@ export const useQuery = <
     options,
   )
 
-  const encodeDataAttribute = useEncodeDataAttribute(
-    snapshot.data,
-    snapshot.sourceMap,
-    studioUrl,
-  )
-
   // Always throw errors if there are any
   if (snapshot.error) {
     throw snapshot.error
   }
 
-  return {
-    ...snapshot,
-    encodeDataAttribute,
-  }
+  return snapshot
 }
 
-/**
- * Used by `./VisualEditing.tsx` to connect to `sanity/presentation`
- */
-export const { useLiveMode } = queryStore
-
 /**
  * Loaders that are used in more than one place are declared here, otherwise they're colocated with the component
  */
-
 export function useSettings(initial: QueryResponseInitial<SettingsPayload>) {
   return useQuery<SettingsPayload>(settingsQuery, {}, { initial })
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import 'styles/index.css'`
	`1`	`+import '@/styles/index.css'`
`2`	`2`
`3`	`3`	`import { toPlainText } from '@portabletext/react'`
`4`	`4`	`import { Metadata, Viewport } from 'next'`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { type EncodeDataAttributeCallback } from '@sanity/react-loader/rsc'`
	`1`	`+import { type EncodeDataAttributeCallback } from '@sanity/react-loader'`
`2`	`2`	`import clsx from 'clsx'`
`3`	`3`	`import Link from 'next/link'`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { EncodeDataAttributeCallback } from '@sanity/react-loader/rsc'`
	`1`	`+import type { EncodeDataAttributeCallback } from '@sanity/react-loader'`
`2`	`2`	`import Link from 'next/link'`
`3`	`3`
`4`	`4`	`import { CustomPortableText } from '@/components/shared/CustomPortableText'`