مشروع NEXT JS مع LARAVEL

في البداية نعم يمكنك استخدام NextAuth.js في مشروعك حتى لو كنت ستستخدم  PHP LARAVEL كباك اند في المشروع حيث انك بأستخدامه يمكنك انشاء نظام تسجيل دخول بسيط لموقعك ويمكنك التحكم في وصول المستخدمين الى المدونة الخاصة بك 

والان ل كي تقوم بربط Next.js الخاص بك مع laravel  يمكنك استخدام API للتفاعل بين الواجهة الأمامية والخلفية. يمكنك استخدام NextAuth.js لإجراء عمليات المصادقة والتوثيق في الواجهة الأمامية، ثم استخدام طلبات API للتفاعل مع Laravel والحصول على البيانات اللازمة لعرضها في الموقع.

هكذا نكون قد استخدمنا مميزات NextAuth.js في الواجهة الامامية وستعمل باقي خيارات المشروع ك ادارة البيانات والعمليات الاخرى بأستخدام php laravel

او بأمكانك ان تفعل ذلك كله باستخدام ال php laravel  ك عمل نظام تسجيل الدخول  والاستيثاق كما ذكرنا فيمكنك عمله بأستخدام

حزمة laravel breeze  او بأستخدام jetstream 

وبالتوفيق لك في مشروعك  ...

لستَ بحاجة إلى استخدام NEXT AUTH في مشروعك إذا لم يكن لديك باك إند مبني على Next.js.

لأن NEXT AUTH هو حل مخصص لتسهيل مهام المصادقة في مشاريع Next.js الكاملة، حيث يتكامل بسلاسة مع واجهة المستخدم الأمامية ويوفر واجهة برمجة تطبيقات سهلة الاستخدام للتعامل مع المستخدمين في واجهة المستخدم الخلفية.

بينما أنت ستعتمد على باك إند من خلال إطار Laravel لذا بإمكانك الربط بواسطة واجهة برمجة تطبيقات RESTful كالتالي:

• إنشاء واجهة برمجة تطبيقات RESTful في Laravel للتعامل مع عمليات المصادقة وإدارة المستخدمين.
• استخدم واجهة برمجة تطبيقات RESTful من Next.js لإرسال طلبات HTTP إلى Laravel للتحقق من صحة المستخدمين وإنشاء جلسات جديدة.
• استخدام مكتبات مثل Axios أو Fetch API لإجراء طلبات HTTP من Next.js إلى Laravel.

أو استخدام JWT (JSON Web Tokens): كالتالي:

• إنشاء JWT في Laravel عند تسجيل دخول المستخدم.
• إرسال JWT إلى Next.js كملف تعريف ارتباط أو في عنوان URL.
• تحقق من صحة JWT في Next.js قبل السماح للمستخدم بالوصول إلى صفحات أو ميزات معينة.

أو استخدام مكتبة مثل Passport فهي مكتبة Laravel شائعة لتسهيل مهام المصادقة، ونعتمد عليها لإنشاء واجهة برمجة تطبيقات OAuth 2.0 في Laravel.

وبالطبع تستطيع استخدام مكتبة Passport في Next.js للتفاعل مع واجهة برمجة تطبيقات OAuth 2.0.

لذا في حال وجود متطلبات مصادقة بسيطة، فاستخدام واجهة برمجة تطبيقات RESTful كافيًا، بينما لميزات مصادقة أكثر تقدمًا، مثل التخويل على أساس الأدوار، فنلجأ إلى JWT أو Passport كخيار أفضل.

وعليكم السلام ,

كمطور Frontend ضمن المشروع فأنت لست بحاجة ل Next Auth ... بل سيتم تطبيق مثلها تمام من قبل مطور Backend باستخدام Laravel في مشروعك .

ما سوف تقوم بتنفيذه هو مشابه للخطوات التالية تماماً :

• أولاً تقوم بتصميم صفحة تسجيل دخول ببريد إلكتروني وكلمة السر.
• ثانياً تقوم بطلب Api الذي سوف يتم توفيره من قبل مطور Backend في مشروعك.
• في حال كانت بريد الالكتروني و كلمة السر متطابقين , سوف يقوم api بإرجاع token تقوم بحفطه في cookies او local storage مثلاً .
• سوف تقوم باستخدام token الموجود في local storage لتنفيذ طلبات APIs الأخرى ( مثلا dashboard ).

هذا مثال عملي يوضح آلية العمل ككود  :

import { useState } from 'react';
import Router from 'next/router';
import axios from 'axios';

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('/api/login', {
        email,
        password,
      });
      const { token } = response.data;
      localStorage.setItem('token', token);
      Router.push('/dashboard');
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

بالنسبة لاستخدام Next.js في مشروع مدونة مع Laravel كباك إند، يمكنك استخدام Next Auth إذا كنت ترغب في إضافة نظام مصادقة للمستخدمين في تطبيقك. يمكن استخدام Next Auth بشكل مستقل عن ما إذا كنت تقوم بتطوير تطبيق Full-Stack أو لا.

Next Auth يوفر مجموعة من الخيارات المرنة للمصادقة، بما في ذلك المصادقة باستخدام البريد الإلكتروني وكلمة المرور، أو التوثيق باستخدام الوسائل الاجتماعية مثل Google وFacebook وTwitter وغيرها. لذا، إذا كنت ترغب في إضافة خيارات تسجيل الدخول والتسجيل لمستخدمي مدونتك، فإن Next Auth قد يكون حلاً ملائمًا لك.

إذا كنت تفضل عدم استخدام Next Auth، فيمكنك تطبيق نظام المصادقة في Laravel والاتصال به من Next.js باستخدام طرق التواصل المعتادة مثل API. يمكنك إنشاء نقاط نهاية (endpoints) في Laravel للمصادقة واستخدامها من Next.js لتسجيل الدخول والتسجيل والتحقق من صحة الجلسة.