كيفية استخدام Next.js لبناء تطبيق SaaS حديث

Next.js هو إطار عمل قوي لـ React، مما يجعل بناء تطبيقات الويب الحديثة أكثر سهولة وكفاءة. في هذه المقالة، سنقدم لك دليل خطوة بخطوة حول كيفية استخدام Next.js لبناء تطبيق SaaS بسيط. سنغطي العملية الكاملة من إعداد بيئة التطوير إلى إنشاء الوظائف الأساسية.

1. إعداد البيئة

قبل البدء، نحتاج إلى التأكد من أن بيئة التطوير الخاصة بك جاهزة. يرجى اتباع الخطوات التالية:

1.1 تثبيت Node.js و npm

تأكد من أن جهاز الكمبيوتر الخاص بك يحتوي على Node.js و npm مثبتين. يمكنك تشغيل الأوامر التالية في الطرفية للتحقق من الإصدار:

node -v
npm -v

إذا لم تكن قد قمت بالتثبيت بعد، يمكنك زيارة الموقع الرسمي لـ Node.js لتنزيله وتثبيته.

1.2 إنشاء مشروع Next.js

قم بتشغيل الأوامر التالية في الطرفية لإنشاء مشروع Next.js جديد:

npx create-next-app@latest my-saas-app
cd my-saas-app

سيؤدي ذلك إلى إنشاء مشروع جديد باسم my-saas-app وتثبيت التبعيات المطلوبة تلقائيًا.

2. هيكل المشروع

في دليل my-saas-app، سترى الهيكل الأساسي التالي:

my-saas-app/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
│   └── ...
├── public/
├── styles/
└── ...

• pages/: يحتوي على صفحات التطبيق.
• public/: يحتوي على الموارد العامة مثل الصور والرموز.
• styles/: يحتوي على ملفات CSS.

3. بناء الوظائف الأساسية

في هذا القسم، سنقوم بتنفيذ نظام تسجيل دخول وتسجيل مستخدم بسيط.

3.1 إعداد قاعدة البيانات

في هذا المثال، سنستخدم Supabase كخدمة خلفية. يرجى اتباع الخطوات التالية:

1. انتقل إلى الموقع الرسمي لـ Supabase وأنشئ حسابًا.
2. أنشئ مشروعًا جديدًا، وتذكر عنوان URL لقاعدة البيانات ومفتاح API الخاص بك.
3. اتصل بقاعدة البيانات، وأنشئ جدول المستخدمين كما يلي:

create table users (
  id serial primary key,
  email text unique not null,
  password text not null
);

3.2 تثبيت عميل Supabase

قم بتثبيت مكتبة عميل Supabase في مشروع Next.js:

npm install @supabase/supabase-js

3.3 إنشاء صفحة تسجيل المستخدم

في دليل pages/، أنشئ ملفًا جديدًا باسم register.js وأضف المحتوى التالي:

import { useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

const Register = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleRegister = async () => {
    const { user, error } = await supabase.auth.signUp({
      email,
      password,
    });

    if (error) {
      console.error(error);
    } else {
      alert('تم التسجيل بنجاح!');
    }
  };

  return (
    

      
تسجيل
       setEmail(e.target.value)} />
       setPassword(e.target.value)} />
      تسجيل
    
  );
};

export default Register;

3.4 إنشاء صفحة تسجيل الدخول للمستخدم

في دليل pages/، أنشئ ملفًا جديدًا باسم login.js وأضف المحتوى التالي:

import { useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    const { user, error } = await supabase.auth.signIn({
      email,
      password,
    });

    if (error) {
      console.error(error);
    } else {
      alert('تم تسجيل الدخول بنجاح!');
    }
  };

  return (
    

      
تسجيل الدخول
       setEmail(e.target.value)} />
       setPassword(e.target.value)} />
      تسجيل الدخول
    
  );
};

export default Login;

4. نشر التطبيق

4.1 اختيار منصة النشر

نستخدم Vercel لنشر تطبيق Next.js الخاص بنا. يرجى اتباع الخطوات التالية:

1. انتقل إلى الموقع الرسمي لـ Vercel وسجل حسابًا.
2. أنشئ مشروعًا جديدًا واختر مستودع GitHub الخاص بك.
3. تأكد من إضافة عنوان URL لـ Supabase ومفتاح API في متغيرات البيئة.
4. انقر على نشر، وانتظر حتى يكمل Vercel عملية النشر.

4.2 التحقق من النشر

بعد الانتهاء من النشر، ستحصل على عنوان URL عام. قم بزيارة هذا العنوان للتأكد من أن التطبيق يعمل بشكل صحيح.

5. الخلاصة

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