ChatGPT Clone

? Erste Schritte

‼ ️ Voraussetzungen

• Melden Sie sich hier für ein Firebase -Konto an
• Installieren Sie hier den Knoten JS in Ihrem Computer
• Holen Sie sich hier den Openai -API -Schlüssel

? Umgebungsvariablen

Um dieses Projekt auszuführen, müssen Sie Ihren .Env -Datei die folgenden Umgebungsvariablen hinzufügen

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

Installation

Installieren Sie My-Project mit NPM

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

 cd my-project

Abhängigkeiten installieren

? Installieren Sie Rückenwind -CSS mit Next.js

Installieren Sie Rückenwind -CSS

Installieren Sie Tailwindcss und ihre Peer -Abhängigkeiten über NPM und führen Sie den Befehl Init aus, um sowohl tailwind.config.js als auch postcss.config.js zu generieren.

 npm install -D tailwindcss postcss autoprefixer

 npx tailwindcss init -p

Konfigurieren Sie Ihre Vorlagenpfade

Fügen Sie die Pfade in alle Ihre Vorlagendateien in Ihrer Datei tailwind.config.js hinzu.

 /** @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 : [ ] ,
} 

Fügen Sie die Rückenwindanweisungen zu Ihrem CSS hinzu

Fügen Sie die @tailwind -Direktiven für jede der Layers eines Psegswind zu Ihrer Datei ./styles/globals.css hinzu.

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

Abhängigkeiten installieren

? Andere Abhängigkeitsinformationen

? Vor Ort laufen

Klonen Sie das Projekt

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

  npm install

Erste Schritte

Starten Sie zuerst den Server und führen Sie den Entwicklungsserver aus:

  npm run dev

Dies ist ein Next.js-Projekt mit create-next-app .

Installieren Sie Abhängigkeiten Dies ist ein Next.js-Projekt mit create-next-app .

Öffnen Sie http: // localhost: 3000 mit Ihrem Browser, um das Ergebnis zu sehen.

Sie können mit dem Bearbeiten der Seite beginnen, indem Sie pages/index.js ändern. Die Seite Auto-Updates, während Sie die Datei bearbeiten.

API -Routen können unter http: // localhost: 3000/api/hello zugegriffen werden. Dieser Endpunkt kann in pages/api/hello.js bearbeitet werden.

Das Verzeichnis pages/api wird /api/* zugeordnet. Dateien in diesem Verzeichnis werden als API -Routen anstelle von React -Seiten behandelt.

Erfahren Sie mehr

Um mehr über Next.js zu erfahren, sehen Sie sich die folgenden Ressourcen an:

• NEXT.JS DOCUMENTATION - LERNEN SIE NEXT NEXT.JS -Funktionen und API.
• Lernen Sie Next.js - Ein interaktives Next.js -Tutorial.

Sie können das nächste.js Github -Repository ansehen - Ihr Feedback und Ihre Beiträge sind willkommen!

Einsatz

Um diesen Projektlauf bereitzustellen

Auf Vercel bereitstellen

Der einfachste Weg, um Ihre Next.js -App bereitzustellen, besteht darin, die Vercel -Plattform von den Erstellern von Next.js. zu verwenden.

Weitere Informationen finden Sie in unserer Next.JS -Bereitstellungsdokumentation.

? Kontakt

Ihr Name - @twitter_handle - [email protected]

Projektlink: https://github.com/sashenjayathilaka/chatgpt-clone.git

---

Vergessen Sie nicht, einen Stern zu hinterlassen.