بناء موقع حديث باستخدام Sanity v3 و Next.js App Router

npx create-next-app@latest devjournal --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd devjournal

npm install next-sanity @sanity/image-url @sanity/vision @portabletext/react
npm install -D @sanity/types

npx sanity@latest init --env

NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id"
NEXT_PUBLIC_SANITY_DATASET="production"
SANITY_API_READ_TOKEN="your-read-token"

// src/sanity/config.ts
export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!
export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!
export const apiVersion = '2026-04-07'

// src/sanity/client.ts
import { createClient } from 'next-sanity'
import { projectId, dataset, apiVersion } from './config'
 
export const client = createClient({
  projectId,
  dataset,
  apiVersion,
  useCdn: true,
})
 
// عميل المعاينة مع رمز مميز للمحتوى المسودة
export const previewClient = createClient({
  projectId,
  dataset,
  apiVersion,
  useCdn: false,
  token: process.env.SANITY_API_READ_TOKEN,
  perspective: 'previewDrafts',
})
 
export function getClient(preview = false) {
  return preview ? previewClient : client
}

// src/sanity/schemas/author.ts
import { defineField, defineType } from 'sanity'
 
export const author = defineType({
  name: 'author',
  title: 'Author',
  type: 'document',
  fields: [
    defineField({
      name: 'name',
      title: 'Name',
      type: 'string',
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'name',
        maxLength: 96,
      },
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'image',
      title: 'Image',
      type: 'image',
      options: { hotspot: true },
    }),
    defineField({
      name: 'bio',
      title: 'Bio',
      type: 'array',
      of: [{ type: 'block' }],
    }),
  ],
  preview: {
    select: {
      title: 'name',
      media: 'image',
    },
  },
})

// src/sanity/schemas/category.ts
import { defineField, defineType } from 'sanity'
 
export const category = defineType({
  name: 'category',
  title: 'Category',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'description',
      title: 'Description',
      type: 'text',
    }),
  ],
})

// src/sanity/schemas/post.ts
import { defineField, defineType } from 'sanity'
 
export const post = defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'author',
      title: 'Author',
      type: 'reference',
      to: [{ type: 'author' }],
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'mainImage',
      title: 'Main Image',
      type: 'image',
      options: { hotspot: true },
      fields: [
        {
          name: 'alt',
          type: 'string',
          title: 'Alternative Text',
        },
      ],
    }),
    defineField({
      name: 'categories',
      title: 'Categories',
      type: 'array',
      of: [{ type: 'reference', to: [{ type: 'category' }] }],
    }),
    defineField({
      name: 'publishedAt',
      title: 'Published at',
      type: 'datetime',
    }),
    defineField({
      name: 'excerpt',
      title: 'Excerpt',
      type: 'text',
      rows: 3,
    }),
    defineField({
      name: 'body',
      title: 'Body',
      type: 'array',
      of: [
        { type: 'block' },
        {
          type: 'image',
          options: { hotspot: true },
          fields: [
            { name: 'alt', type: 'string', title: 'Alternative Text' },
            { name: 'caption', type: 'string', title: 'Caption' },
          ],
        },
        {
          type: 'code',
          title: 'Code Block',
        },
      ],
    }),
    defineField({
      name: 'seo',
      title: 'SEO',
      type: 'object',
      fields: [
        { name: 'metaTitle', type: 'string', title: 'Meta Title' },
        { name: 'metaDescription', type: 'text', title: 'Meta Description', rows: 3 },
        { name: 'ogImage', type: 'image', title: 'Open Graph Image' },
      ],
    }),
  ],
  preview: {
    select: {
      title: 'title',
      author: 'author.name',
      media: 'mainImage',
    },
    prepare(selection) {
      const { author } = selection
      return { ...selection, subtitle: author ? `بواسطة ${author}` : '' }
    },
  },
  orderings: [
    {
      title: 'تاريخ النشر، الأحدث',
      name: 'publishedAtDesc',
      by: [{ field: 'publishedAt', direction: 'desc' }],
    },
  ],
})

// src/sanity/schemas/index.ts
import { author } from './author'
import { category } from './category'
import { post } from './post'
 
export const schemaTypes = [author, category, post]

// src/sanity/studio.ts
import { defineConfig } from 'sanity'
import { structureTool } from 'sanity/structure'
import { visionTool } from '@sanity/vision'
import { schemaTypes } from './schemas'
import { projectId, dataset } from './config'
 
export default defineConfig({
  name: 'devjournal-studio',
  title: 'DevJournal Studio',
  projectId,
  dataset,
  plugins: [structureTool(), visionTool()],
  schema: {
    types: schemaTypes,
  },
})

// src/app/studio/[[...tool]]/page.tsx
'use client'
 
import { NextStudio } from 'next-sanity/studio'
import config from '@/sanity/studio'
 
export default function StudioPage() {
  return <NextStudio config={config} />
}

// src/app/studio/[[...tool]]/layout.tsx
export const metadata = {
  title: 'DevJournal Studio',
}
 
export default function StudioLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// src/sanity/queries.ts
import { groq } from 'next-sanity'
 
// جلب جميع المقالات المنشورة
export const postsQuery = groq`
  *[_type == "post" && defined(publishedAt)] | order(publishedAt desc) {
    _id,
    title,
    slug,
    excerpt,
    publishedAt,
    mainImage,
    "author": author->{name, slug, image},
    "categories": categories[]->{ title, slug }
  }
`
 
// جلب مقالة واحدة بالـ slug
export const postBySlugQuery = groq`
  *[_type == "post" && slug.current == $slug][0] {
    _id,
    title,
    slug,
    excerpt,
    publishedAt,
    mainImage,
    body,
    "author": author->{name, slug, image, bio},
    "categories": categories[]->{ title, slug },
    seo
  }
`
 
// جلب جميع الـ slugs للتوليد الثابت
export const postSlugsQuery = groq`
  *[_type == "post" && defined(slug.current)][].slug.current
`
 
// جلب المقالات حسب التصنيف
export const postsByCategoryQuery = groq`
  *[_type == "post" && $categorySlug in categories[]->slug.current] | order(publishedAt desc) {
    _id,
    title,
    slug,
    excerpt,
    publishedAt,
    mainImage,
    "author": author->{name, slug, image},
    "categories": categories[]->{ title, slug }
  }
`
 
// المقالات ذات الصلة
export const relatedPostsQuery = groq`
  *[_type == "post" && _id != $currentId && count(categories[@._ref in $categoryIds]) > 0] | order(publishedAt desc) [0...3] {
    _id,
    title,
    slug,
    excerpt,
    publishedAt,
    mainImage
  }
`

// src/sanity/image.ts
import createImageUrlBuilder from '@sanity/image-url'
import { projectId, dataset } from './config'
import type { Image } from 'sanity'
 
const imageBuilder = createImageUrlBuilder({ projectId, dataset })
 
export function urlForImage(source: Image | undefined) {
  if (!source) return undefined
  return imageBuilder.image(source).auto('format').fit('max')
}

// src/components/sanity-image.tsx
import Image from 'next/image'
import { urlForImage } from '@/sanity/image'
import type { Image as SanityImageType } from 'sanity'
 
interface SanityImageProps {
  image: SanityImageType & { alt?: string }
  width?: number
  height?: number
  className?: string
  priority?: boolean
}
 
export function SanityImage({
  image,
  width = 800,
  height = 450,
  className,
  priority = false,
}: SanityImageProps) {
  const imageUrl = urlForImage(image)?.url()
  if (!imageUrl) return null
 
  return (
    <Image
      src={imageUrl}
      alt={image.alt || ''}
      width={width}
      height={height}
      className={className}
      priority={priority}
    />
  )
}

// src/app/blog/page.tsx
import Link from 'next/link'
import { client } from '@/sanity/client'
import { postsQuery } from '@/sanity/queries'
import { SanityImage } from '@/components/sanity-image'
 
export const revalidate = 60
 
export default async function BlogPage() {
  const posts = await client.fetch(postsQuery)
 
  return (
    <main className="mx-auto max-w-6xl px-4 py-16">
      <h1 className="mb-12 text-4xl font-bold">مدونة DevJournal</h1>
 
      <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
        {posts.map((post: any) => (
          <article
            key={post._id}
            className="group overflow-hidden rounded-xl border bg-white shadow-sm transition-shadow hover:shadow-md"
          >
            <Link href={`/blog/${post.slug.current}`}>
              {post.mainImage && (
                <SanityImage
                  image={post.mainImage}
                  width={600}
                  height={340}
                  className="aspect-video w-full object-cover transition-transform group-hover:scale-105"
                />
              )}
              <div className="p-6">
                <h2 className="mb-2 text-xl font-semibold">{post.title}</h2>
                <p className="mb-4 line-clamp-2 text-gray-600">{post.excerpt}</p>
                <div className="flex items-center gap-3 text-sm text-gray-500">
                  <span>{post.author?.name}</span>
                </div>
              </div>
            </Link>
          </article>
        ))}
      </div>
    </main>
  )
}

// src/app/blog/[slug]/page.tsx
import { notFound } from 'next/navigation'
import { client } from '@/sanity/client'
import { postBySlugQuery, postSlugsQuery } from '@/sanity/queries'
import { SanityImage } from '@/components/sanity-image'
import { PortableTextRenderer } from '@/components/portable-text'
import type { Metadata } from 'next'
 
interface PageProps {
  params: Promise<{ slug: string }>
}
 
export async function generateStaticParams() {
  const slugs = await client.fetch(postSlugsQuery)
  return slugs.map((slug: string) => ({ slug }))
}
 
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params
  const post = await client.fetch(postBySlugQuery, { slug })
  if (!post) return { title: 'المقالة غير موجودة' }
 
  return {
    title: post.seo?.metaTitle || post.title,
    description: post.seo?.metaDescription || post.excerpt,
  }
}
 
export default async function PostPage({ params }: PageProps) {
  const { slug } = await params
  const post = await client.fetch(postBySlugQuery, { slug })
  if (!post) notFound()
 
  return (
    <article className="mx-auto max-w-3xl px-4 py-16">
      <header className="mb-12">
        <h1 className="mb-4 text-4xl font-bold leading-tight lg:text-5xl">
          {post.title}
        </h1>
        {post.excerpt && (
          <p className="mb-6 text-xl text-gray-600">{post.excerpt}</p>
        )}
      </header>
 
      {post.mainImage && (
        <SanityImage
          image={post.mainImage}
          className="mb-12 w-full rounded-xl"
          priority
        />
      )}
 
      <div className="prose prose-lg max-w-none">
        <PortableTextRenderer value={post.body} />
      </div>
    </article>
  )
}

// src/components/portable-text.tsx
import {
  PortableText,
  type PortableTextComponents,
} from '@portabletext/react'
import { SanityImage } from './sanity-image'
 
const components: PortableTextComponents = {
  types: {
    image: ({ value }) => (
      <figure className="my-8">
        <SanityImage image={value} className="w-full rounded-lg" />
        {value.caption && (
          <figcaption className="mt-2 text-center text-sm text-gray-500">
            {value.caption}
          </figcaption>
        )}
      </figure>
    ),
    code: ({ value }) => (
      <pre className="my-6 overflow-x-auto rounded-lg bg-gray-900 p-4">
        <code className={`language-${value.language || 'text'}`}>
          {value.code}
        </code>
      </pre>
    ),
  },
  marks: {
    link: ({ children, value }) => (
      <a
        href={value?.href}
        rel="noreferrer noopener"
        className="text-blue-600 underline hover:text-blue-800"
      >
        {children}
      </a>
    ),
    code: ({ children }) => (
      <code className="rounded bg-gray-100 px-1.5 py-0.5 text-sm">
        {children}
      </code>
    ),
  },
  block: {
    h2: ({ children }) => (
      <h2 className="mb-4 mt-12 text-3xl font-bold">{children}</h2>
    ),
    h3: ({ children }) => (
      <h3 className="mb-3 mt-8 text-2xl font-semibold">{children}</h3>
    ),
    blockquote: ({ children }) => (
      <blockquote className="my-6 border-l-4 border-blue-500 pl-4 italic text-gray-700">
        {children}
      </blockquote>
    ),
  },
}
 
export function PortableTextRenderer({ value }: { value: any }) {
  if (!value) return null
  return <PortableText value={value} components={components} />
}

// src/components/preview-provider.tsx
'use client'
 
import { LiveQueryProvider } from 'next-sanity/preview'
import { client } from '@/sanity/client'
 
export default function PreviewProvider({
  children,
  token,
}: {
  children: React.ReactNode
  token: string
}) {
  return (
    <LiveQueryProvider client={client} token={token}>
      {children}
    </LiveQueryProvider>
  )
}

// src/app/api/preview/route.ts
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 secret = searchParams.get('secret')
 
  if (secret !== process.env.SANITY_PREVIEW_SECRET) {
    return new Response('رمز غير صالح', { status: 401 })
  }
 
  const draft = await draftMode()
  draft.enable()
  redirect(slug ? `/blog/${slug}` : '/blog')
}

// src/app/api/exit-preview/route.ts
import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'
 
export async function GET() {
  const draft = await draftMode()
  draft.disable()
  redirect('/blog')
}

// src/app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'
 
export async function POST(request: NextRequest) {
  const secret = request.headers.get('x-sanity-webhook-secret')
 
  if (secret !== process.env.SANITY_WEBHOOK_SECRET) {
    return NextResponse.json({ message: 'غير مصرح' }, { status: 401 })
  }
 
  const body = await request.json()
 
  switch (body._type) {
    case 'post':
      revalidatePath('/blog')
      if (body.slug?.current) {
        revalidatePath(`/blog/${body.slug.current}`)
      }
      break
    case 'author':
    case 'category':
      revalidatePath('/blog')
      break
    default:
      revalidatePath('/')
  }
 
  return NextResponse.json({ revalidated: true, now: Date.now() })
}

// src/sanity/types.ts
import type { Image, Slug, PortableTextBlock } from 'sanity'
 
export interface Author {
  _id: string
  name: string
  slug: Slug
  image?: Image
  bio?: PortableTextBlock[]
}
 
export interface Category {
  _id: string
  title: string
  slug: Slug
  description?: string
  postCount?: number
}
 
export interface Post {
  _id: string
  title: string
  slug: Slug
  author: Author
  mainImage?: Image & { alt?: string }
  categories?: Category[]
  publishedAt: string
  excerpt?: string
  body?: PortableTextBlock[]
  seo?: {
    metaTitle?: string
    metaDescription?: string
    ogImage?: Image
  }
}

git add .
git commit -m "feat: complete devjournal with Sanity v3"
git push origin main
 
npx vercel