nextjs-dev

Next.js 16 development patterns from Vercel's official Next.js Agent Skills (394 snippets). App Router, RSC boundaries, cache components, Turbopack, proxy.ts, Server Actions, metadata/SEO.

الانتقال إلى التثبيت

المستودع: ktg-one/goodai-mate
آخر نشاط في المصدر: ١٧ مايو ٢٠٢٦ في ١٣:٠٠
لغة SKILL.md المكتشفة: الإنجليزية
النجوم: ٠
التفرعات: ٠

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.

npx skills add https://github.com/ktg-one/goodai-mate --skill nextjs-dev

يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.

تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

SKILL.md

تعليمات المصدر · معاينة للقراءة فقط

العودة إلى البحث العودة إلى التثبيت

goodai-frontend

Good'ai brutalist/direct-mail frontend: brand tokens, stamp UI, voice hero, asset registry, and ESLint gates. Use when building or reviewing UI in goodai-mate, fixing design fidelity, prepping demos (ABS), running lint, or when the user says /goodai-frontend, goodai frontend, brutalist mail board, stamp design, or frontend-design for this project.

2026-06-26

api-builder

API Route Handler, Server Action, and data mutation patterns for Next.js 16. Zod validation, error handling, auth patterns, cache revalidation.

2026-05-17

component-builder

React 19 + Server Component patterns from official Vercel/React docs. Component templates, hooks patterns, RSC boundaries, performance optimization.

2026-05-17

عرض الكل من هذا المستودع

src/app/
  (marketing)/      # force-static — landing, blog, docs
  (app)/             # force-dynamic — dashboard, settings
  (auth)/            # auth flows — login, register, callback

// Server Action file — ALL exports become server actions
'use server'

// Client Component — opts into client rendering
'use client'

// Cache directive (Next.js 16 PPR) — caches component output
'use cache'

// ✅ Correct: Server Component passes Server Component as children
import ClientShell from './client-shell'
import ServerData from './server-data'

export default function Page() {
  return (
    <ClientShell>
      <ServerData />  {/* stays on server */}
    </ClientShell>
  )
}

// ✅ Next.js 16 — await params
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <Article slug={slug} />
}

// ✅ Dynamic metadata
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return { title: `Article: ${slug}` }
}

// ✅ Parallel — no waterfall
const [user, posts, comments] = await Promise.all([
  getUser(id),
  getPosts(id),
  getComments(id),
])

// ❌ Sequential waterfall
const user = await getUser(id)
const posts = await getPosts(id)      // waits for user
const comments = await getComments(id) // waits for posts

import { Suspense } from 'react'

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<CardSkeleton />}>
        <RevenueChart />  {/* streams when ready */}
      </Suspense>
      <Suspense fallback={<TableSkeleton />}>
        <LatestInvoices /> {/* streams independently */}
      </Suspense>
    </div>
  )
}

// Cacheable component with 'use cache'
async function CachedProductList() {
  'use cache'
  const products = await db.product.findMany()
  return <ProductGrid products={products} />
}

// Cache with time-based revalidation
import { cacheLife } from 'next/cache'

async function CachedStats() {
  'use cache'
  cacheLife('hours')  // revalidate every hour
  const stats = await getStats()
  return <StatsDisplay stats={stats} />
}

// Pass-through Server Actions in cached components
import { cacheTag } from 'next/cache'

async function CachedList({ tag }: { tag: string }) {
  'use cache'
  cacheTag(tag)
  const items = await getItems()
  return <ItemList items={items} />
}

'use server'

import { z } from 'zod'
import { revalidatePath, revalidateTag } from 'next/cache'
import { redirect } from 'next/navigation'

const CreateSchema = z.object({
  name: z.string().min(1).max(100),
  email: z.string().email(),
})

export async function createUser(formData: FormData) {
  // 1. Validate
  const parsed = CreateSchema.safeParse(Object.fromEntries(formData))
  if (!parsed.success) {
    return { error: parsed.error.flatten() }
  }

  // 2. Authenticate (treat like API route)
  const session = await auth()
  if (!session) {
    return { error: 'Unauthorized' }
  }

  // 3. Mutate
  const user = await db.user.create({ data: parsed.data })

  // 4. Revalidate + redirect
  revalidatePath('/users')
  redirect(`/users/${user.id}`)
}

// Client-side refresh after mutation
'use client'
import { useRouter } from 'next/navigation'

function UpdateButton() {
  const router = useRouter()
  async function handleUpdate() {
    await updateItem(id)
    router.refresh() // invalidates client router cache
  }
  return <button onClick={handleUpdate}>Update</button>
}

// Pattern 1: Server Component direct fetch
async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const product = await getProduct(id) // direct DB call — no API route needed
  return <ProductView product={product} />
}

// Pattern 2: ISR with revalidation
export const revalidate = 3600 // revalidate every hour

async function BlogPage() {
  const posts = await getPosts()
  return <PostList posts={posts} />
}

// Pattern 3: generateStaticParams for SSG
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({ slug: post.slug }))
}

// Pattern 4: Force dynamic for per-request data
export const dynamic = 'force-dynamic'

// src/app/api/resource/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'

const Schema = z.object({
  name: z.string().min(1).max(100),
})

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const parsed = Schema.safeParse(body)
    if (!parsed.success) {
      return NextResponse.json(
        { error: 'Validation failed', details: parsed.error.flatten() },
        { status: 400 }
      )
    }
    const result = await createResource(parsed.data)
    return NextResponse.json(result, { status: 201 })
  } catch (error) {
    console.error('[API] POST /api/resource:', error)
    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
  }
}

// proxy.ts — project root
import type { NextRequest } from 'next/server'

export function proxy(request: NextRequest) {
  const { pathname } = request.nextUrl

  // Conditional rewrites
  if (pathname.startsWith('/blog')) {
    return { rewrite: new URL('/marketing/blog' + pathname.slice(5), request.url) }
  }

  // Auth redirect
  if (pathname.startsWith('/dashboard') && !request.cookies.get('session')) {
    return { redirect: new URL('/login', request.url) }
  }
}

// Static metadata
export const metadata = {
  title: 'My App',
  description: 'App description',
  openGraph: {
    title: 'My App',
    description: 'App description',
    images: ['/og.png'],
  },
}

// Dynamic metadata
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { images: [post.coverImage] },
  }
}

// OG Image generation
// src/app/api/og/route.tsx
import { ImageResponse } from 'next/og'

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') ?? 'Default Title'
  return new ImageResponse(
    <div style={{ fontSize: 48, background: 'white', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      {title}
    </div>,
    { width: 1200, height: 630 }
  )
}

// Parallel routes — multiple slots in same layout
// src/app/@analytics/page.tsx
// src/app/@team/page.tsx
// src/app/layout.tsx
export default function Layout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <div>
      {children}
      {analytics}
      {team}
    </div>
  )
}

// Intercepting routes — modal pattern
// src/app/@modal/(.)photo/[id]/page.tsx  — intercepts /photo/[id]
// src/app/photo/[id]/page.tsx            — full page fallback

// ❌ WRONG — barrel import pulls entire library
import { Button, Card, Input } from '@/components/ui'

// ✅ RIGHT — direct imports, tree-shakeable
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'

// ❌ WRONG — dynamic import at module level
import HeavyChart from '@/components/heavy-chart'

// ✅ RIGHT — lazy load heavy components
import dynamic from 'next/dynamic'
const HeavyChart = dynamic(() => import('@/components/heavy-chart'), {
  ssr: false,
  loading: () => <ChartSkeleton />,
})

// next.config.ts — Turbopack cache configuration
const config = {
  // Turbopack uses filesystem caching by default
  // Custom cache directory (optional)
  experimental: {
    turbo: {
      // Turbopack-specific configuration if needed
    },
  },
}

// error.tsx — MUST be 'use client'
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

// global-error.tsx — catches root layout errors
'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>Something went wrong</h2>
        <button onClick={reset}>Try again</button>
      </body>
    </html>
  )
}

File	Purpose	Scope
`page.tsx`	UI unique to a route	Route segment
`layout.tsx`	Shared UI wrapping children	Route segment + children
`loading.tsx`	Instant loading UI (Suspense)	Route segment
`error.tsx`	Error boundary (`'use client'` required)	Route segment
`not-found.tsx`	404 UI	Route segment
`route.ts`	API route handler	Route segment
`template.tsx`	Re-rendered layout (no state persistence)	Route segment
`default.tsx`	Parallel route fallback

File	Purpose	Scope
`page.tsx`	UI unique to a route	Route segment
`layout.tsx`	Shared UI wrapping children	Route segment + children
`loading.tsx`	Instant loading UI (Suspense)	Route segment
`error.tsx`	Error boundary (`'use client'` required)	Route segment
`not-found.tsx`	404 UI	Route segment
`route.ts`	API route handler	Route segment
`template.tsx`	Re-rendered layout (no state persistence)	Route segment
`default.tsx`	Parallel route fallback

nextjs-dev

خيارات التثبيت

مراجعة ملفات المصدر

Next.js 16 Development Patterns (Official Vercel Source)

File Conventions (App Router)

Next.js 16 Development Patterns (Official Vercel Source)

File Conventions (App Router)

Route Groups

React Server Component (RSC) Boundaries

Decision Tree

Directives

Boundary Rules

Async Patterns (Next.js 16)

params and searchParams are Promises

Parallel Data Fetching — ALWAYS for independent data

Suspense Streaming

Cache Components (Next.js 16 PPR)

Server Actions

Data Fetching Patterns

Route Handlers

proxy.ts (Replaces middleware.ts in Next.js 16)

Metadata / SEO

Parallel & Intercepting Routes

Import Rules (Critical for Bundle Size)

Turbopack (Default in Next.js 16)

Environment Variables

Error Handling

name	nextjs-dev
description	Next.js 16 development patterns from Vercel's official Next.js Agent Skills (394 snippets). App Router, RSC boundaries, cache components, Turbopack, proxy.ts, Server Actions, metadata/SEO.
user-invocable	false

nextjs-dev

معلومات المصدر

خيارات التثبيت

مراجعة ملفات المصدر

المزيد من هذا المستودع

المزيد من هذا المستودع

Next.js 16 Development Patterns (Official Vercel Source)

File Conventions (App Router)

Next.js 16 Development Patterns (Official Vercel Source)

File Conventions (App Router)

Route Groups

React Server Component (RSC) Boundaries

Decision Tree

Directives

Boundary Rules

Async Patterns (Next.js 16)

params and searchParams are Promises

Parallel Data Fetching — ALWAYS for independent data

Suspense Streaming

Cache Components (Next.js 16 PPR)

Server Actions

Data Fetching Patterns

Route Handlers

proxy.ts (Replaces middleware.ts in Next.js 16)

Metadata / SEO

Parallel & Intercepting Routes

Import Rules (Critical for Bundle Size)

Turbopack (Default in Next.js 16)

Environment Variables

Error Handling