يعد تحسين سير عمل تطوير المشروع أمرًا مهمًا لإنجاز العمل بشكل أسرع وأفضل. في هذه المقالة، ستستكشف كيفية إعداد بيئة تطوير محلية مثالية لمشروع Next.js باستخدام   Postgres ونشره على   . Neon Vercel    تطبيق CRUD الذي يعرض قائمة بتفاصيل المستخدم من قاعدة بيانات. يتم التركيز على أفضل الممارسات والآراء - وبالتالي، فإن المقالة سوف تغطي التطوير والنشر المحلي، والتفرع، والبيئات من خلال فحص  بمزيد من التفاصيل، سنغطي:  إنشاء مشروع Neon Postgres للتنمية المحلية  كيفية نشر مشروع Next.js على Vercel باستخدام Vercel CLI  كيفية استخدام وظائف Vercel edge لتحسين عمليات وقت التشغيل للحصول على استجابة أسرع للطلبات  كيفية حماية قاعدة بيانات Neon من هجمات حقن SQL.  تفرع قاعدة البيانات في Neon.  المتطلبات الأساسية  المتطلبات اللازمة لمتابعة هذا الدليل هي كما يلي:  الكفاءة مع   . Next.js   حساب نيون  حساب  فيرسيل  بعد الانتهاء من ذلك، دعنا نعمل على إعدادات المشروع الخاصة بـ Neon وVercel.  كيفية إعداد مشروع Neon Postgres    هو برنامج Postgres بدون خادم يفصل بين الحوسبة والتخزين. وهو يوفر ميزات حديثة للمطورين مثل التوسع التلقائي والتفرع والاستعادة في نقطة زمنية محددة، مما يسمح بالتطوير القابل للتوسع والسريع. Neon  قم بإنشاء حساب Neon مجاني إذا كنت لا تزال بحاجة إلى القيام بذلك. بمجرد الانتهاء من ذلك، يقوم Neon بإعادة توجيهك إلى صفحة إعداد المشروع، حيث يتعين عليك توفير اسم المشروع وقاعدة البيانات وإصدار Postgres والمنطقة (نوصي باختيار واحدة قريبة من موقعك) المخصصة للمشروع.   يوفر Neon أداة CLI للتكامل مع بيئتك المحلية، ولكن هذه المقالة ستستخدم Neon من خلال واجهة الويب الخاصة به لعمليات معينة.  بمجرد إنشاء مشروعك، انسخ سلسلة الاتصال المجمعة من واجهة Neon Dashboard والصقها في ملف   ضمن مشروع Next.js الخاص بك.  .env.production  عند الحديث عن مشروع Next.js، ستستخدم هذه المقالة مشروع Next.js الحالي الذي يحتوي على جدول بيانات من   . ShadcnUI  للحصول على هذا المشروع، قم باستنساخ هذا   إلى جهازك المحلي باستخدام الأمر. المستودع   git clone https://github.com/muyiwexy/dev_env_hackmamba.git  بمجرد استنساخ المستودع، قم بإنشاء ملف   لاحتواء متغيرات البيئة في الدليل الرئيسي للمشروع ولصق سلسلة الاتصال الخاصة بك. يجب أن يبدو الأمر كما يلي: .env.production   DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require'  بعد ذلك، انتقل إلى محرر Neon SQL في لوحة معلومات Neon. هنا، يمكنك لصق أوامر SQL لأداء إجراءات معينة مطلوبة لمشروعك. انسخ الأمر أدناه والصقه في المحرر لإنشاء جدول SQL مع بعض الحقول المطلوبة:   CREATE TABLE user_details ( member_number VARCHAR(10) PRIMARY KEY, created_at VARCHAR, name VARCHAR(100), email VARCHAR(255), phone_number VARCHAR(15), gender VARCHAR(10), zone VARCHAR(50), service_unit VARCHAR(100), conference_shirt VARCHAR(5), fee_payment VARCHAR(20), paid BOOLEAN );  ملاحظة: يمكنك العثور على هذا الأمر في ملف   ضمن قالب Next.js المقدم سابقًا.  /sql/user_data.sql  يمكنك التحقق من قسم   في أي وقت للتأكد من توفر الجدول الذي تم إنشاؤه حديثًا. والآن بعد أن حصلت على هذه المعلومات، يمكنك نشر تطبيقك على Vercet. يمكنك القيام بذلك من خلال واجهة مستخدم الويب الخاصة بـ Vercel، ولكننا سنستخدم واجهة سطر الأوامر الخاصة بـ Vercel لهذا البرنامج التعليمي. الجداول  نشر تطبيق Next.js الخاص بك على Vercel  بدون إضاعة الكثير من الوقت، توجه إلى محطتك الطرفية وقم بلصق الأمر أدناه:   npm i -g vercel  ملاحظة: بالنسبة لمستخدمي Mac، قد تحصل أحيانًا على خطأ رفض الوصول؛ لذا، قم بإضافة بادئة الأمر باستخدام كلمة   . sudo  يقوم الأمر بتثبيت CLI عالميًا، مما يسمح بسهولة الوصول إلى CLI في أي مكان عبر جهازك المحلي.  الخطوة التالية هي تسجيل الدخول إلى حساب Vercel الخاص بك باستخدام واجهة سطر الأوامر. لتحقيق ذلك، الصق الأمر أدناه في محطتك الطرفية:   vercel login  قم بالمتابعة عن طريق اختيار مزود التسجيل في Vercel الخاص بك من القائمة، والمصادقة، والبحث عن رسالة النجاح في صفحة التأكيد.   بعد ذلك، ستقوم بنشر برنامجك على Vercel باستخدام الأمر أدناه:   vercel  تتضمن هذه العملية عدة خطوات لإعداد عملية النشر. ولضمان التوحيد، اتبع الخيارات الموضحة في الصورة أدناه.   ملاحظة: بعد البناء، يمكنك التحقق من النشر للتأكد من تشغيل التطبيق كما هو متوقع  بعد ذلك، ستوضح هذه المقالة كيفية استخدام دالة Vercel Edge لاسترداد معلومات المستخدم من قاعدة بيانات Neon.  إنشاء دالة حافة Vercel  تعد   معززات للأداء. وهي عبارة عن وظائف JavaScript أو TypeScript أكثر كفاءة وأسرع من الحوسبة التقليدية بدون خادم بسبب عمليات وقت التشغيل الأكثر بساطة. وظائف Vercel Edge  ارجع إلى مشروعك المستنسخ وقم بإنشاء ملف   داخل دليل   . لتشغيل هذه الوظيفة على الحافة، حدد وقت تشغيل في قاعدة التعليمات البرمجية على النحو التالي: /api/route.ts /app   import { NextRequest, NextResponse } from "next/server"; export const runtime = "edge"; export async function GET(req: NextRequest, res: NextResponse) { return NextResponse.json({ message: "Hello from the Edge!" }); }  قبل المتابعة، ستقوم بتثبيت   ، و   ، وحزمة   باستخدام الأمر: برنامج تشغيل Neon serverless Zod sqlstring   npm install @neondatabase/serverless zod sqlstring  بالإضافة إلى ذلك، يجب عليك تثبيت أنواع   كاعتمادية dev باستخدام الأمر أدناه. sqlstring   npm i --save-dev @types/sqlstring -D  يمكنك اختبار ما إذا كان هناك اتصال ناجح بقاعدة البيانات الخاصة بك عن طريق استبدال الكود الموجود في ملف   بالكود أدناه: /api/route.ts   import { NextRequest, NextResponse } from "next/server"; import { Pool } from "@neondatabase/serverless"; export const runtime = "edge"; export async function GET(req: NextRequest) { const pool = new Pool({ connectionString: process.env.DATABASE_URL, }); const sql = ` SELECT NOW(); `; const { rows } = await pool.query(sql); const now = rows[0]; await pool.end(); return NextResponse.json( { now }, { status: 200, } ); }  يجب أن تحصل على استجابة مثل الصورة أدناه عند الوصول إلى مسار   في المتصفح.  /api  الخطوة التالية هي إضافة سلسلة اتصال قاعدة البيانات إلى متغيرات بيئة Vercel. لذا، باستخدام واجهة سطر الأوامر Vercel، أضف هذه السلسلة باستخدام الأمر:   vercel env add  اتبع التعليمات لإضافة اسم المتغير (نوصيك باستخدام الاسم في ملف   ) والقيمة (يجب أن تكون القيمة هي السلسلة نفسها). بعد ذلك، حدد البيئة التي تريد استخدام المتغير فيها بين الإنتاج والمعاينة والتطوير. .env.production  ملاحظة: سوف نستكشف التفرع لاحقًا، لذا فإن إنشاء سلاسل اتصال متعددة ليس ضروريًا.  الآن بعد أن قمت بإضافة عنوان URL لقاعدة البيانات الخاصة بك إلى مشروعك، قم بإعادة النشر باستخدام الأمر:   Vercel  في القسم التالي، ستتمكن من إرسال بعض البيانات إلى Neon باستخدام طلب POST من مسار واجهة برمجة التطبيقات الخاصة بوظيفتك.  إرسال البيانات إلى نيون  من الصعب فهم أي من هذه المفاهيم دون العمل بالبيانات. لذا، دعنا نرسل بعض البيانات الوهمية إلى قاعدة بيانات Neon. سيتناول هذا القسم حقن SQL ومنع الهجوم على قاعدة البيانات باستخدام   . سنناقش أيضًا التفرع في قاعدة البيانات، مما يمنحنا مزيدًا من المرونة ويحمي مصداقية فرع الإنتاج الخاص بك. Zod  دعنا نستكشف وظيفة   هذه لمعالجة طلب HTTP POST عن طريق لصق الكود أدناه في    معالج مسار API /api/route.ts .   export async function POST(req: any) { try { const data = await req.json(); const { member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid, } = schema.parse(data); const sql = sqlstring.format( ` INSERT INTO user_details ( member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid ) VALUES (?,?,?,?,?,?,?,?,?,?,?) `, [ member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid, ] ); console.log("sql", sql); await pool.query(sql); await pool.end(); return NextResponse.json(data); } catch (error) { console.error("Error processing request:", error); return NextResponse.json( { message: "Failed to save user details" }, { status: 500 } ); } }  تقوم دالة Edge هذه بتفكيك قيم النموذج بهذه التفاصيل:   from the request JSON. بعد ذلك، يمكنك التحقق من صحة بيانات النموذج باستخدام   . للقيام بذلك، الصق الكود أدناه في  member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid Zod /api/route.ts   const schema = zod.object({ member_number: zod.string().min(5).max(12), created_at: zod.string(), name: zod.string().min(1, "Name is required").max(100, "Name is too long"), email: zod .string() .email("Invalid email format") .min(5, "Email is too short") .max(100, "Email is too long"), phone_number: zod .string() .min(7, "Phone number is too short") .max(15, "Phone number is too long"), gender: zod .string() .min(1, "Gender is required") .max(6, "Gender is too long"), zone: zod.string().min(1, "Zone is required").max(50, "Zone is too long"), service_unit: zod .string() .min(1, "Service Unit is required") .max(50, "Service Unit is too long"), conference_shirt: zod .string() .min(1, "Conference shirt size is required") .max(5, "Conference shirt size is too long"), fee_payment: zod .string() .min(1, "Fee Payment info is required") .max(50, "Fee Payment info is too long"), paid: zod.boolean(), });  يحدد الكود أعلاه مخططًا يصف البنية وقواعد التحقق من صحة الكائن الذي يمثل بيانات النموذج. الآن، يمكنك إجراء استعلام   بنجاح في قاعدة البيانات. INSERT  يجب أن يبدو مثل الصورة أدناه عندما تتحقق من قاعدة البيانات الخاصة بك.   سلس وسريع - وبهذا يمكنك ملء قاعدة بيانات Neon الخاصة بك. السؤال الآن هو، ماذا لو كانت هذه قاعدة بيانات إنتاجية؟ من غير الحكمة استخدام بيانات الاختبار في بيئة إنتاجية. لقد تطور Neon للسماح لنا   (على غرار كيفية عمل فروع GitHub) لقاعدة البيانات الخاصة بك. الآن، يمكنك اختبار وتطوير تطبيقك بسرعة دون أي عيوب أو خوف من تلويث قاعدة بيانات الإنتاج. بإنشاء فروع  في القسم التالي، سوف تستكشف هذه المقالة   . تفرع قاعدة البيانات باستخدام Neon  التفرع في قاعدة البيانات في Neon  انتقل إلى قسم   في وحدة تحكم Neon وحدد   . يجب عليك تسمية فرع بحيث يكون الفرع الرئيسي هو الأصل عند إنشائه. أحد الأشياء التي لفتت انتباهنا هو أنه سمح لنا بوضع البيانات التي نريدها في الفرع حسب الفترة، مما يضمن المزيد من المرونة.  الفروع إنشاء فرع  بعد إنشاء فرع، سوف تتلقى سلسلة اتصال، تمامًا كما فعلت عند إنشاء مشروع؛ تأكد من الاحتفاظ بها في مكان آمن.   تذكر أن هذا الفرع عبارة عن قاعدة بيانات منفصلة تحتوي على بيانات فعلية باعتبارها الفرع الرئيسي.  لاستخدام سلسلة اتصال قاعدة البيانات الجديدة هذه، قم بإنشاء ملف   مشابه لملف   الذي قمت بإنشائه وقم بإعداد بيانات اعتماد   مع سلسلة الاتصال كقيمة لها. .env.local .env.production DATABASE_URL  يكتشف Next.js تلقائيًا ملف البيئة الذي يجب استخدامه أثناء التطوير أو الإنتاج.  عند اختبار جدول فرع قاعدة البيانات باستخدام بيانات جديدة، يمكنك مقارنته بفرع الإنتاج.   يمكنك إجراء العديد من التعديلات على الفرع حسب رغبتك، مثل تغيير مخطط الجدول أو حذف البيانات.  خاتمة  قد يكون التطوير معقدًا، ولكن باستخدام الأدوات التي يوفرها Neon Postgres، يصبح بناء التطبيقات القابلة للتطوير والموثوقة أسرع. قدمت هذه المقالة دليلاً مفصلاً حول إعداد بيئة تطوير محلية باستخدام Neon ونشرها على Vercel. لقد قمنا بتغطية الجوانب الأساسية مثل إعدادات التطوير المحلي وعمليات النشر والتفرع وإدارة البيئات المختلفة. استمر في تطوير التطبيقات باستخدام هذا الإعداد؛ يسعدنا أن نسمع كيف تسير الأمور.  يمكنك الاطلاع على المشروع بأكمله على   . GitHub

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

تم إنتاج هذا الصوت باللغة الأصلية للقصة!

طويل جدا؛ ليقرأ

Make resilience your competitive advantage

إنشاء تطبيق ويب؟ هذه الطريقة تجعله أسرع وأكثر أمانًا وذكاءً

About Author

تعليقات

شنق العلامات

تم تقديم هذه المقالة في

Related Stories

The shortage of women in tech

Aria Coin Achieves 3000% Growth, Pioneering a Galactic-Themed Crypto Ecosystem

Top Ecommerce Development Companies

Top Web Development Companies in 2018

The shortage of women in tech

Aria Coin Achieves 3000% Growth, Pioneering a Galactic-Themed Crypto Ecosystem

Top Ecommerce Development Companies

Top Web Development Companies in 2018

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps