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

يعد تحسين سير عمل تطوير المشروع أمرًا مهمًا لإنجاز العمل بشكل أسرع وأفضل. في هذه المقالة، ستستكشف كيفية إعداد بيئة تطوير محلية مثالية لمشروع Next.js باستخدام Neon Postgres ونشره على Vercel .

يتم التركيز على أفضل الممارسات والآراء - وبالتالي، فإن المقالة سوف تغطي التطوير والنشر المحلي، والتفرع، والبيئات من خلال فحص تطبيق CRUD الذي يعرض قائمة بتفاصيل المستخدم من قاعدة بيانات.

بمزيد من التفاصيل، سنغطي:

• إنشاء مشروع Neon Postgres للتنمية المحلية
• كيفية نشر مشروع Next.js على Vercel باستخدام Vercel CLI
• كيفية استخدام وظائف Vercel edge لتحسين عمليات وقت التشغيل للحصول على استجابة أسرع للطلبات
• كيفية حماية قاعدة بيانات Neon من هجمات حقن SQL.
• تفرع قاعدة البيانات في Neon.

المتطلبات الأساسية

المتطلبات اللازمة لمتابعة هذا الدليل هي كما يلي:

• الكفاءة مع Next.js .
• حساب نيون
• حساب فيرسيل

بعد الانتهاء من ذلك، دعنا نعمل على إعدادات المشروع الخاصة بـ Neon وVercel.

كيفية إعداد مشروع Neon Postgres

Neon هو برنامج Postgres بدون خادم يفصل بين الحوسبة والتخزين. وهو يوفر ميزات حديثة للمطورين مثل التوسع التلقائي والتفرع والاستعادة في نقطة زمنية محددة، مما يسمح بالتطوير القابل للتوسع والسريع.

قم بإنشاء حساب Neon مجاني إذا كنت لا تزال بحاجة إلى القيام بذلك. بمجرد الانتهاء من ذلك، يقوم Neon بإعادة توجيهك إلى صفحة إعداد المشروع، حيث يتعين عليك توفير اسم المشروع وقاعدة البيانات وإصدار Postgres والمنطقة (نوصي باختيار واحدة قريبة من موقعك) المخصصة للمشروع.

يوفر Neon أداة CLI للتكامل مع بيئتك المحلية، ولكن هذه المقالة ستستخدم Neon من خلال واجهة الويب الخاصة به لعمليات معينة.

بمجرد إنشاء مشروعك، انسخ سلسلة الاتصال المجمعة من واجهة Neon Dashboard والصقها في ملف .env.production ضمن مشروع Next.js الخاص بك.

عند الحديث عن مشروع 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 );

ملاحظة: يمكنك العثور على هذا الأمر في ملف /sql/user_data.sql ضمن قالب Next.js المقدم سابقًا.

يمكنك التحقق من قسم الجداول في أي وقت للتأكد من توفر الجدول الذي تم إنشاؤه حديثًا. والآن بعد أن حصلت على هذه المعلومات، يمكنك نشر تطبيقك على Vercet. يمكنك القيام بذلك من خلال واجهة مستخدم الويب الخاصة بـ Vercel، ولكننا سنستخدم واجهة سطر الأوامر الخاصة بـ Vercel لهذا البرنامج التعليمي.

نشر تطبيق Next.js الخاص بك على Vercel

بدون إضاعة الكثير من الوقت، توجه إلى محطتك الطرفية وقم بلصق الأمر أدناه:

 npm i -g vercel

ملاحظة: بالنسبة لمستخدمي Mac، قد تحصل أحيانًا على خطأ رفض الوصول؛ لذا، قم بإضافة بادئة الأمر باستخدام كلمة sudo .

يقوم الأمر بتثبيت CLI عالميًا، مما يسمح بسهولة الوصول إلى CLI في أي مكان عبر جهازك المحلي.

الخطوة التالية هي تسجيل الدخول إلى حساب Vercel الخاص بك باستخدام واجهة سطر الأوامر. لتحقيق ذلك، الصق الأمر أدناه في محطتك الطرفية:

 vercel login

قم بالمتابعة عن طريق اختيار مزود التسجيل في Vercel الخاص بك من القائمة، والمصادقة، والبحث عن رسالة النجاح في صفحة التأكيد.

بعد ذلك، ستقوم بنشر برنامجك على Vercel باستخدام الأمر أدناه:

 vercel

تتضمن هذه العملية عدة خطوات لإعداد عملية النشر. ولضمان التوحيد، اتبع الخيارات الموضحة في الصورة أدناه.

ملاحظة: بعد البناء، يمكنك التحقق من النشر للتأكد من تشغيل التطبيق كما هو متوقع

بعد ذلك، ستوضح هذه المقالة كيفية استخدام دالة Vercel Edge لاسترداد معلومات المستخدم من قاعدة بيانات Neon.

إنشاء دالة حافة Vercel

تعد وظائف Vercel Edge معززات للأداء. وهي عبارة عن وظائف JavaScript أو TypeScript أكثر كفاءة وأسرع من الحوسبة التقليدية بدون خادم بسبب عمليات وقت التشغيل الأكثر بساطة.

ارجع إلى مشروعك المستنسخ وقم بإنشاء ملف /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

بالإضافة إلى ذلك، يجب عليك تثبيت أنواع sqlstring كاعتمادية dev باستخدام الأمر أدناه.

 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 . سنناقش أيضًا التفرع في قاعدة البيانات، مما يمنحنا مزيدًا من المرونة ويحمي مصداقية فرع الإنتاج الخاص بك.

دعنا نستكشف وظيفة معالج مسار API هذه لمعالجة طلب HTTP POST عن طريق لصق الكود أدناه في /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 هذه بتفكيك قيم النموذج بهذه التفاصيل: member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid from the request JSON. بعد ذلك، يمكنك التحقق من صحة بيانات النموذج باستخدام 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 .