หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด
Google

- เริ่มต้น

! ข้อกำหนดเบื้องต้น

  • ลงทะเบียนสำหรับบัญชี Firebase ที่นี่
  • ติดตั้งโหนด JS ในคอมพิวเตอร์ของคุณที่นี่
  • รับคีย์ OpenAI API ที่นี่

- ตัวแปรสภาพแวดล้อม

ในการเรียกใช้โครงการนี้คุณจะต้องเพิ่มตัวแปรสภาพแวดล้อมต่อไปนี้ในไฟล์. 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

ติดตั้งการพึ่งพา

- ติดตั้ง tailwind css ด้วย next.js

ติดตั้ง tailwind css

ติดตั้ง 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 project bootstrapped ด้วย create-next-app

ติดตั้งการพึ่งพานี่คือ next.js project bootstrapped ด้วย create-next-app

เปิด http: // localhost: 3000 พร้อมเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์

คุณสามารถเริ่มแก้ไขหน้าได้โดยแก้ไข pages/index.js การอัปเดตหน้าอัตโนมัติเมื่อคุณแก้ไขไฟล์

เส้นทาง API สามารถเข้าถึงได้บน http: // localhost: 3000/api/hello จุดสิ้นสุดนี้สามารถแก้ไขได้ใน pages/api/hello.js

ไดเรกทอรี pages/api ถูกแมปกับ /api/* ไฟล์ในไดเรกทอรีนี้ถือเป็นเส้นทาง API แทนหน้าปฏิกิริยา

เรียนรู้เพิ่มเติม

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ 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


อย่าลืมออกจากดาว️
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด