Bump dependencies and use next.js new draftmode with app routes (#918)

app/(blog)/(category)/[slug]/page.tsx

@@ -1,5 +1,5 @@
 import type {Metadata} from 'next';
-import {previewData} from 'next/headers';
+import {draftMode} from 'next/headers';
 import {pageQuery, allPagesSlug} from '~/lib/queries';
 import {sanityClient, urlForImage} from '~/lib/sanity/client';
 import {PageLayout} from '~/components/layout';
@@ -15,7 +15,6 @@ export const generateStaticParams = async () => {
 };
 
 export const generateMetadata = async ({params}: {params: {slug: string}}): Promise<Metadata> => {
-	console.log('params.slug', params.slug);
 	const page = await sanityClient.fetch<Page>(pageQuery, {
 		slug: params.slug
 	});
@@ -45,11 +44,12 @@ export const generateMetadata = async ({params}: {params: {slug: string}}): Prom
 };
 
 const SlugRoute = async ({params}: {params: {slug: string}}) => {
+	const {isEnabled} = draftMode();
 	const page = await sanityClient.fetch<Page>(pageQuery, {
 		slug: params.slug
 	});
 
-	if (previewData()) {
+	if (isEnabled) {
 		return (
 			<PreviewSuspense fallback={<PageLayout page={page} />}>
 				<PagePreview query={pageQuery} variables={{slug: params.slug}} />

app/(blog)/page.tsx

@@ -1,5 +1,5 @@
 import type {Metadata} from 'next';
-import {previewData} from 'next/headers';
+import {draftMode} from 'next/headers';
 import {pageWithPostsQuery} from '~/lib/queries';
 import {sanityClient, urlForImage} from '~/lib/sanity/client';
 import {IndexPageLayout} from '~/components/layout';
@@ -43,12 +43,13 @@ export const generateMetadata = async (): Promise<Metadata> => {
 };
 
 const IndexRoute = async () => {
+	const {isEnabled} = draftMode();
 	const {page, posts} = await sanityClient.fetch<PageWithPosts>(pageWithPostsQuery, {
 		slug: 'frontpage',
 		limit: 2
 	});
 
-	if (previewData()) {
+	if (isEnabled) {
 		return (
 			<PreviewSuspense fallback={<IndexPageLayout page={page} posts={posts} />}>
 				<IndexPagePreview query={pageWithPostsQuery} variables={{slug: 'frontpage', limit: 2}} />

app/(blog)/posts/[slug]/page.tsx

@@ -1,5 +1,5 @@
 import type {Metadata} from 'next';
-import {previewData} from 'next/headers';
+import {draftMode} from 'next/headers';
 import {postQuery, postsQuery} from '~/lib/queries';
 import {sanityClient, urlForImage} from '~/lib/sanity/client';
 import {PostPageLayout} from '~/components/layout';
@@ -47,11 +47,12 @@ export const generateMetadata = async ({params}: {params: {slug: string}}): Prom
 };
 
 const PostRoute = async ({params}: {params: {slug: string}}) => {
+	const {isEnabled} = draftMode();
 	const post = await sanityClient.fetch<Post>(postQuery, {
 		slug: params.slug
 	});
 
-	if (previewData()) {
+	if (isEnabled) {
 		return (
 			<PreviewSuspense fallback={<PostPageLayout post={post} />}>
 				<PostPreview query={postQuery} variables={{slug: params.slug}} />

app/api/preview/route.ts

@@ -0,0 +1,13 @@
+import { draftMode } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+export async function GET(request: Request) {
+	const { searchParams } = new URL(request.url);
+	const slug = searchParams.get('slug');
+	const type = searchParams.get('type');
+
+	const target = type === 'post' ? `/posts/${slug}` : `/${slug}`;
+
+	draftMode().enable();
+	redirect(target);
+}

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -17,49 +17,49 @@
 	"author": "Aron Hafner",
 	"license": "MIT",
 	"dependencies": {
-		"@next/font": "^13.2.4",
-		"@portabletext/react": "^2.0.2",
+		"@next/font": "^13.4.4",
+		"@portabletext/react": "^3.0.2",
 		"@sanity/asset-utils": "^1.3.0",
 		"@sanity/image-url": "^1.0.2",
-		"@sanity/types": "^3.7.0",
-		"@sanity/ui": "^1.3.0",
-		"@sanity/vision": "^3.7.0",
+		"@sanity/types": "^3.11.5",
+		"@sanity/ui": "^1.3.3",
+		"@sanity/vision": "^3.11.5",
 		"clsx": "^1.2.1",
-		"date-fns": "^2.29.3",
+		"date-fns": "^2.30.0",
 		"date-fns-tz": "^2.0.0",
-		"framer-motion": "^10.6.0",
+		"framer-motion": "^10.12.16",
 		"get-youtube-id": "^1.0.1",
-		"next": "^13.2.4",
-		"next-sanity": "^4.1.5",
+		"next": "^13.4.4",
+		"next-sanity": "^4.3.3",
 		"next-sanity-image": "^6.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-icons": "^4.8.0",
+		"react-icons": "^4.9.0",
 		"react-is": "^18.2.0",
 		"react-youtube": "^10.1.0",
-		"sanity": "^3.7.0",
-		"slugify": "^1.6.5",
-		"styled-components": "^5.3.9",
+		"sanity": "^3.11.5",
+		"slugify": "^1.6.6",
+		"styled-components": "^5.3.11",
 		"usehooks-ts": "^2.9.1"
 	},
 	"devDependencies": {
-		"@sanity/cli": "^3.7.0",
-		"@types/node": "^18.15.3",
-		"@types/react": "^18.0.28",
-		"@types/react-dom": "^18.0.11",
-		"@typescript-eslint/eslint-plugin": "^5.55.0",
-		"@typescript-eslint/parser": "^5.55.0",
+		"@sanity/cli": "^3.11.5",
+		"@types/node": "^20.2.5",
+		"@types/react": "^18.2.8",
+		"@types/react-dom": "^18.2.4",
+		"@typescript-eslint/eslint-plugin": "^5.59.8",
+		"@typescript-eslint/parser": "^5.59.8",
 		"autoprefixer": "^10.4.14",
-		"eslint": "^8.36.0",
-		"eslint-config-next": "^13.2.4",
-		"eslint-config-prettier": "^8.7.0",
+		"eslint": "^8.42.0",
+		"eslint-config-next": "^13.4.4",
+		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-react": "^7.32.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
-		"postcss": "^8.4.21",
-		"prettier": "^2.8.4",
-		"tailwindcss": "^3.2.7",
-		"typescript": "^5.0.2",
-		"vercel": "^28.17.0"
+		"postcss": "^8.4.24",
+		"prettier": "^2.8.8",
+		"tailwindcss": "^3.3.2",
+		"typescript": "^5.1.0",
+		"vercel": "^30.1.2"
 	},
 	"prettier": {
 		"printWidth": 120,