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 ڈیٹا بیس کی ترتیب

اس مثال میں، ہم سپابیس کو بطور بیک اینڈ سروس استعمال کریں گے۔ براہ کرم درج ذیل مراحل پر عمل کریں:

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 کلائنٹ انسٹال کریں

Next.js پروجیکٹ میں Supabase کلائنٹ لائبریری انسٹال کریں:

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 تعیناتی کے پلیٹ فارم کا انتخاب

ہم اپنے Next.js ایپلیکیشن کی تعیناتی کے لیے Vercel کا استعمال کریں گے۔ براہ کرم درج ذیل مراحل پر عمل کریں:

1. Vercel کی ویب سائٹ پر جائیں اور ایک اکاؤنٹ بنائیں۔
2. ایک نیا پروجیکٹ بنائیں اور اپنے GitHub ریپوزٹری کا انتخاب کریں۔
3. یہ یقینی بنائیں کہ ماحول کی متغیرات میں Supabase URL اور API کلید شامل کریں۔
4. تعیناتی پر کلک کریں، اور Vercel کے مکمل ہونے کا انتظار کریں۔

4.2 تعیناتی کی تصدیق

تعیناتی مکمل ہونے کے بعد، آپ کو ایک عوامی URL ملے گا۔ اس URL پر جائیں، یہ یقینی بنانے کے لیے کہ ایپلیکیشن صحیح طور پر کام کر رہی ہے۔

5. خلاصہ

اس مضمون کے مراحل کے ذریعے، آپ نے کامیابی کے ساتھ Next.js کا استعمال کرتے ہوئے ایک سادہ SaaS ایپلیکیشن بنائی ہے، جس میں صارف رجسٹریشن اور لاگ ان کی خصوصیات شامل ہیں۔ Next.js کی طاقت اس کی لچک اور مؤثریت میں ہے، جو اسے مزید پیچیدہ ضروریات کو پورا کرنے کے لیے آسانی سے بڑھانے کی اجازت دیتی ہے۔ امید ہے کہ آپ اس بنیاد پر مزید گہرائی میں جائیں گے، اور مزید شاندار ایپلیکیشنز بنائیں گے!