nextjs-15-patterns
تطبيق أنماط Next.js 15 App Router
توفر هذه الممارسة أفضل الأنماط والممارسات البرمجية لتطوير Next.js 15 App Router، مع تغطية مكونات الخادم، وإجراءات الخادم، واستراتيجيات جلب البيانات، وأنماط React 19 الحديثة.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
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
SeguroDocumentation-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.
Pontuação de qualidade
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؟
متى يجب أن أستخدم إجراءات الخادم مقابل مسارات API؟
كيف يعمل التخزين المؤقت للبيانات في Next.js 15؟
ما هو تدفق Suspense؟
هل يمكنني استخدام React hooks في مكونات الخادم؟
كيف أتعامل مع الأخطاء في مكونات الخادم؟
Detalhes do Desenvolvedor
Licença
MIT
Repositório
https://github.com/Barnhardt-Enterprises-Inc/quetrex-claude/tree/main/skills/nextjs-15-patternsReferência
main
Estrutura de arquivos