Habilidades nextjs-15-patterns

nextjs-15-patterns

Seguro

تطبيق أنماط Next.js 15 App Router

توفر هذه الممارسة أفضل الأنماط والممارسات البرمجية لتطوير Next.js 15 App Router، مع تغطية مكونات الخادم، وإجراءات الخادم، واستراتيجيات جلب البيانات، وأنماط React 19 الحديثة.

Suporta: Claude Codex Code(CC)
🥉 72 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "nextjs-15-patterns". أرني مكون خادم يجلب بيانات المستخدم

Resultado esperado:

  • ```typescript
  • // app/users/[id]/page.tsx
  • import { notFound } from 'next/navigation';
  •  
  • async function getUser(id: string) {
  • const user = await db.query.users.findFirst({
  • where: (users, { eq }) => eq(users.id, id)
  • });
  • return user;
  • }
  •  
  • export default async function UserPage({ params }: { params: { id: string } }) {
  • const user = await getUser(params.id);
  • if (!user) notFound();
  • return (
  • <div>
  • <h1>{user.name}</h1>
  • <p>{user.email}</p>
  • </div>
  • );
  • }
  • ```

A utilizar "nextjs-15-patterns". أنشئ إجراء خادم مع التحقق

Resultado esperado:

  • ```typescript
  • 'use server';
  •  
  • import { revalidatePath } from 'next/cache';
  • import { z } from 'zod';
  •  
  • const CreateUserSchema = z.object({
  • name: z.string().min(1),
  • email: z.string().email(),
  • });
  •  
  • export async function createUser(formData: FormData) {
  • const validated = CreateUserSchema.safeParse({
  • name: formData.get('name'),
  • email: formData.get('email'),
  • });
  •  
  • if (!validated.success) {
  • return { error: validated.error.flatten() };
  • }
  •  
  • const user = await db.insert(users).values(validated.data).returning();
  • revalidatePath('/users');
  • return { data: user };
  • }
  • ```

Auditoria de Segurança

Seguro
v6 • 1/21/2026

Documentation-only skill containing TypeScript code examples for Next.js 15 patterns. Static scanner flagged markdown code blocks and YAML syntax as false positives. No executable code, scripts, or runtime network calls. Safe for marketplace publication.

5
Arquivos analisados
1,299
Linhas analisadas
0
achados
6
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude Ver Histórico de Auditoria →

Pontuação de qualidade

45
Arquitetura
100
Manutenibilidade
87
Conteúdo
31
Comunidade
100
Segurança
83
Conformidade com especificações

O Que Você Pode Construir

الترحيل إلى مكونات الخادم

إعادة هيكلة مكونات جانب العميل إلى مكونات الخادم حيثما أمكن، مما يقلل حجم الحزمة ويحسن الأداء.

تطبيق إجراءات الخادم

استبدال مسارات API بإجراءات الخادم لمعالجة النماذج والبيانات، مما يُبسط قاعدة الكود.

تحسين جلب البيانات

تطبيق الجلب المتوالي، واستراتيجيات التخزين المؤقت، والتدفق مع Suspense لتحميل الصفحات بشكل أسرع.

Tente Estes Prompts

مكون الخادم الأساسي
أرني كيفية إنشاء مكون خادم في Next.js 15 يجلب البيانات من قاعدة بيانات.
إجراء الخادم مع التحقق
أنشئ إجراء خادم مع التحقق من صحة مخطط Zod الذي يتعامل مع إرسال النموذج ويُعيد التحقق من صحة التخزين المؤقت.
جلب البيانات المتوازي
اكتب كود لجلب مصادر بيانات متعددة بشكل متوازي باستخدام Promise.all مع بدائل Suspense.
تنفيذ الصفحة الكاملة
أنشئ صفحة Next.js 15 كاملة مع مكونات الخادم، وحالات التحميل، ومعالجة الأخطاء، وإنشاء البيانات الوصفية.

Melhores Práticas

  • فضّل مكونات الخادم افتراضياً واستخدم 'use client' فقط عندما تكون التفاعلية من جانب العميل مطلوبة
  • اجلب البيانات مباشرة في مكونات الخادم بدلاً من استخدام مسارات API للوصول الداخلي للبيانات
  • استخدم Zod لإجراءات التحقق من الخادم وأعد استجابات الأخطاء المكتوبة

Evitar

  • تجنب جلب البيانات في مكونات العميل باستخدام useEffect؛ استخدم مكونات الخادم بدلاً من ذلك
  • لا تستخدم مسارات API للعمليات عندما توفر إجراءات الخادم بديلاً أبسط
  • تجنب حظر التقديم مع الجلب التتابعي عندما يمكن تحميل البيانات بشكل متوازي

Perguntas Frequentes

ما هو نوع المكون الافتراضي في Next.js 15؟
مكونات الخادم هي الافتراضية في Next.js 15 App Router. يتم تقديم المكونات على الخادم ما لم تُعلّم بـ 'use client'.
متى يجب أن أستخدم إجراءات الخادم مقابل مسارات API؟
استخدم إجراءات الخادم لإرسال النماذج والعمليات على البيانات. استخدم مسارات API فقط عندما تحتاج إلى كشف نقاط النهاية للعملاء الخارجيين.
كيف يعمل التخزين المؤقت للبيانات في Next.js 15؟
طلبات الجلب يتم تخزينها مؤقتاً افتراضياً. استخدم cache: 'no-store' للبيانات الديناميكية، أو next: { revalidate: 60 } للتحقق الدوري.
ما هو تدفق Suspense؟
يسمح Suspense بتدفق أجزاء من الصفحة تدريجياً بينما لا تزال الأجزاء الأخرى قيد التحميل، مما يُحسّن الأداء المُدرك.
هل يمكنني استخدام React hooks في مكونات الخادم؟
لا، الـ hooks مثل useState وuseEffect تعمل فقط في مكونات العميل. مكونات الخادم تُعرض على الخادم بدون حالة React.
كيف أتعامل مع الأخطاء في مكونات الخادم؟
أنشئ ملف error.tsx مع 'use client' للتعامل مع الأخطاء. استخدم notFound() لحالات 404 وأ抛出 أخطاء لتشغيل حدود الأخطاء.

Detalhes do Desenvolvedor

Estrutura de arquivos