القائمة
Next.js mastery -- App Router, Server Components, data fetching, rendering strategies, optimization.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/arbazkhan971/godmode --skill nextjsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | nextjs |
| description | Next.js mastery -- App Router, Server Components, data fetching, rendering strategies, optimization. |
/godmode:nextjs, "Next.js", "App Router"cat next.config.* 2>/dev/null
ls app/ pages/ 2>/dev/null
grep "next" package.json 2>/dev/null
Router: App Router | Pages Router | Migration
Version: 13 | 14 | 15+
Rendering: mostly static | mostly dynamic | mixed
Auth: NextAuth | Clerk | Supabase Auth | custom
Deploy: Vercel | self-hosted | Docker
app/
layout.tsx # Root (metadata, providers)
loading.tsx / error.tsx / not-found.tsx
(marketing)/ # Route group (no URL segment)
page.tsx, about/, pricing/
(app)/ # Authenticated app group
layout.tsx (sidebar, nav)
dashboard/ (page, loading, error)
[workspace]/ (dynamic, [...slug]/)
api/ (route handlers)
Route groups (name) organize without URL impact.
Every segment: layout, loading, error optional.
Mark error.tsx as 'use client'.
DECISION: needs browser APIs, event handlers,
useState, useEffect, useContext?
YES -> 'use client'
NO -> Server Component (default)
PATTERNS:
Push 'use client' to leaf components
Composition: client wrapper, server children
Context provider at boundary
ANTI-PATTERNS:
'use client' on page.tsx or layout.tsx
Import server-only code in client components
Non-serializable props server -> client
'use server')Read data -> Server Component. Mutate -> Server Action. Real-time -> Client fetch + SWR/React Query.
SSG: static content. Default, generateStaticParams().
ISR: periodic refresh. revalidate: <seconds>.
SSR: fresh per request. force-dynamic, cookies().
Streaming: slow data. Suspense + loading.tsx.
Client: interactive/real-time. 'use client' + SWR.
IF can be static: SSG. IF periodic: ISR. IF per-request: SSR. IF slow parts: Streaming.
priority on LCP only. Always sizes.
fill for unknown dimensions. placeholder="blur".display: 'swap'.[ ] App Router used
[ ] 'use client' pushed to leaves
[ ] No 'use client' on pages/layouts
[ ] Server Actions for mutations
[ ] Parallel data fetching
[ ] loading.tsx for data routes
[ ] error.tsx for dynamic routes
[ ] next/image with sizes prop
[ ] Metadata API (not manual <head>)
<head>).Append .godmode/nextjs-results.tsv:
timestamp action routes server_components client_components audit notes
KEEP if: TTFB improved AND build passes
AND no 'use client' on page/layout.
DISCARD if: TTFB worsened OR build failed.
Never measure TTFB in dev mode.
STOP when ALL of:
- All routes TTFB < 200ms (p75)
- Client JS < 150KB gzipped
- All 'use client' at leaf level
- Rendering strategy matches data needs
On failure: git reset --hard HEAD~1. Never pause.
| Failure | Action |
|---|---|
| Build fails | Fix TS errors, missing imports |
| 'use client' on page | Extract interactive to leaf |
| Hydration mismatch | useEffect for client-only code |
| Server Action fails | Check 'use server', serializable args |
| Middleware loops | Check matcher exclusions |