article-list-all.draft.tsx

'use client';

import type {FC} from 'react';
import {usePreview} from 'utils/sanity';
import {PreviewSuspense} from 'next-sanity/preview';
import {ArticleListAllRender} from './render';
import type {ArticleListAllType} from 'schema/page-sections/article-list-all.zod';

interface Props {
	section: ArticleListAllType;
	articlesQuery: string;
}

export const ArticleListAllDraft: FC<Props> = ({section, articlesQuery}) => {
	return (
		<PreviewSuspense fallback="Loading...">
			<Preview section={section} articlesQuery={articlesQuery} />
		</PreviewSuspense>
	);
};

const Preview: FC<Props> = ({section, articlesQuery}) => {
	const articles = usePreview(null, articlesQuery);
	return <ArticleListAllRender section={section} articles={articles} />;
};

article-list-all.render.tsx

import Link from 'next/link';
import {PortableText} from 'components/portable-text';
import {ImageFill} from 'components/image';
import type {ArticleListAllType} from 'schema/page-sections/article-list-all.zod';
import type {ArticleType} from 'schema/documents/article.zod';

interface Props {
	section: ArticleListAllType;
	articles: ArticleType[];
}

export const ArticleListAllRender = ({section, articles}: Props) => {
	const {theme, title} = section;
	return null;
};

article-list-all.tsx

import {groq} from 'next-sanity';
import {sanityFetch} from 'utils/sanity';
import type {ArticleListAllType} from 'schema/page-sections/article-list-all.zod';
import {ArticleListAllDraft} from './draft';
import {ArticleListAllRender} from './render';
import {ArticleSchema} from 'schema/documents/article.zod';
import {z} from 'zod';
import {isClientContext} from 'utils/draft';

interface Props {
	section: ArticleListAllType;
}

export const ArticleListAll = async ({section}: Props) => {
	const isDraft = isClientContext();
	if (isDraft) {
		return <ArticleListAllDraft section={section} articlesQuery={articlesQuery} />;
	}

	const articles = await sanityFetch(articlesQuery, z.array(ArticleSchema));
	return <ArticleListAllRender section={section} articles={articles} />;
};

const articlesQuery = groq`
*[_type == "article" && defined(slug.current) && !(_id in path('drafts.**'))]{
	...
}
`;

page.draft.tsx

'use client';

import type {FC} from 'react';
import {usePreview} from 'utils/sanity';
import {PreviewSuspense} from 'next-sanity/preview';
import {Page as PageRender} from 'components/page';

interface Props {
	pageQuery: string;
	pageSlug: string;
}

export const PageDraft: FC<Props> = ({pageQuery, pageSlug}) => {
	return (
		<PreviewSuspense fallback="Loading...">
			<Preview pageQuery={pageQuery} pageSlug={pageSlug} />
		</PreviewSuspense>
	);
};

const Preview: FC<Props> = ({pageQuery, pageSlug}) => {
	const page = usePreview(null, pageQuery, {slug: pageSlug});
	return <PageRender page={page} />;
};

page.render.tsx

import type {PageType} from 'schema/documents/page.zod';
import {ArticleListAll} from 'components/article-list-all';
import {Suspense} from 'react';

interface Props {
	page: PageType;
}

export const Page = ({page}: Props) => {
	const {content, heading} = page;
	const sections = content.map((section) => {
		switch (section._type) {
			case 'articleListAll':
				/* @ts-expect-error Async Server Component */
				return <ArticleListAll section={section} />;
			default:
				return <div>unknown</div>;
		}
	});

	return (
		<Suspense>
			<Heading activeHeading={heading.at(0)} />
			{sections}
		</Suspense>
	);
};

page.tsx

import {groq} from 'next-sanity';
import {z} from 'zod';
import {sanityFetch} from 'utils/sanity';
import {draftMode} from 'next/headers';
import {PageSchema} from 'schema/documents/page.zod';
import {PageDraft} from 'app/(frontend)/[[...slug]]/draft';
import {Page as PageRender} from 'components/page';

interface Props {
	params: {
		slug?: string[];
	};
	searchParams: URLSearchParams;
}

export default async function Page({params: {slug}}: Props) {
	const {isEnabled: isDraft} = draftMode();
  const pageSlug = slug.join('/');
	if (isDraft) {
		return <PageDraft pageQuery={pageQuery} pageSlug={pageSlug} />;
	}

	const page = await sanityFetch(pageQuery, PageSchema, {slug: pageSlug});
	return <PageRender page={page} />;
}

const pageQuery = groq`
	*[_type == "page" && slug.current == $slug && !(_id in path('drafts.**'))][0] {
		...
	}
`;