الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل
جوجل

؟ ابدء

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

  • اشترك في حساب Firebase هنا
  • تثبيت العقدة JS في جهاز الكمبيوتر الخاص بك هنا
  • احصل على مفتاح API Openai هنا

؟ متغيرات البيئة

لتشغيل هذا المشروع ، ستحتاج إلى إضافة متغيرات البيئة التالية إلى ملف .env الخاص بك

OPENAI_API_KEY

NEXTAUTH_URL

GOOGLE_CLIENT_ID

NEXT_PUBLIC_SECRET

GOOGLE_CLIENT_SECRET

NEXT_PUBLIC_BASE_URL

NEXT_PUBLIC_FIREBASE_APP_ID

NEXT_PUBLIC_FIREBASE_API_KEY

NEXT_PUBLIC_FIREBASE_PROJECT_ID

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET

NEXT_PUBLIC_FIREBASE_MESSAGING_SET

FIREBASE_SERVICE_ACCOUNT_KEY

تثبيت

تثبيت مشروعي مع NPM 

 npx create-next-app@latest my-project --typescript

 cd my-project

تثبيت التبعيات

؟ تثبيت CSS Tailwind مع Next.js

تثبيت CSS Tailwind

قم بتثبيت Tailwindcss وتبعيات الأقران عبر NPM ، ثم قم بتشغيل الأمر init لإنشاء كل من tailwind.config.js و postcss.config.js . 

 npm install -D tailwindcss postcss autoprefixer

 npx tailwindcss init -p

تكوين مسارات القالب الخاصة بك

أضف المسارات إلى جميع ملفات القالب الخاصة بك في ملف tailwind.config.js . 

 /** @type {import('tailwindcss').Config} */
module . exports = {
  content : [
    "./app/**/*.{js,ts,jsx,tsx}" ,
    "./pages/**/*.{js,ts,jsx,tsx}" ,
    "./components/**/*.{js,ts,jsx,tsx}" ,
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}" ,
  ] ,
  theme : {
    extend : { } ,
  } ,
  plugins : [ ] ,
}

أضف توجيهات Tailwind إلى CSS

أضف توجيهات @tailwind لكل من طبقات Tailwind إلى ملف ./styles/globals.css الخاص بك. 

 @tailwind base;
@tailwind components;
@tailwind utilities;

تثبيت التبعيات

؟ معلومات التبعية الأخرى

؟ تشغيل محليا

استنساخ المشروع 

  git clone https://github.com/SashenJayathilaka/ChatGPT-Clone.git
  npm install

ابدء

ابدأ الخادم أولاً ، قم بتشغيل خادم التطوير: 

  npm run dev

هذا هو مشروع next.js bootstrapped مع create-next-app .

تثبيت التبعيات هذا هو مشروع next.js bootstrapped مع create-next-app .

افتح http: // localhost: 3000 مع متصفحك لرؤية النتيجة.

يمكنك البدء في تحرير الصفحة عن طريق تعديل pages/index.js . تحديثات الصفحة التلقائية أثناء تحرير الملف.

يمكن الوصول إلى طرق API على http: // localhost: 3000/api/hello. يمكن تحرير نقطة النهاية هذه في pages/api/hello.js .

يتم تعيين دليل pages/api إلى /api/* . يتم التعامل مع الملفات الموجودة في هذا الدليل كطرق API بدلاً من صفحات React.

يتعلم أكثر

لمعرفة المزيد حول Next.js ، ألق نظرة على الموارد التالية:

  • Next.js Documentation - تعرف على ميزات Next.js و API.
  • تعلم next.js - تعليمي تفاعلي Next.js.

يمكنك التحقق من مستودع NEXT.JS GitHub - ملاحظاتك ومساهماتك مرحب بها!

النشر

لنشر هذا المشروع تشغيل

نشر على Vercel

أسهل طريقة لنشر تطبيق Next.js الخاص بك هي استخدام منصة Vercel من منشئي Next.js.

تحقق من وثائق نشر NEXT.JS لمزيد من التفاصيل.

؟ اتصال

اسمك - twitter_handle - [email protected]

رابط المشروع: https://github.com/sashenjayathilaka/chatgpt-clone.git


لا تنس أن تترك نجمة ️
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل