ChatGPT Clone

? Начиная

‼ ️ Предварительные условия

• Подпишитесь на учетную запись 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

Установка

Установите My-Project с 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, загруженный с create-next-app .

Установить зависимости Это проект Next.js, загруженный с create-next-app .

Откройте http: // localhost: 3000 с вашим браузером, чтобы увидеть результат.

Вы можете начать редактировать страницу путем изменения pages/index.js . Страница автоматически обновится при редактировании файла.

Доступ к API можно получить на http: // localhost: 3000/api/hello. Эта конечная точка может быть отредактирована на pages/api/hello.js .

Каталог pages/api сопоставлен /api/* . Файлы в этом каталоге рассматриваются как маршруты API вместо страниц реагирования.

Узнать больше

Чтобы узнать больше о следующем.js, посмотрите на следующие ресурсы:

• Next.js Документация - Узнайте о функциях Next.js и API.
• Узнайте Next.js - интерактивный учебник Next.js.

Вы можете проверить хранилище следующего.js GitHub - ваши отзывы и вклады приветствуются!

Развертывание

Для развертывания этого проекта запуск

Развернуть на Vercel

Самый простой способ развернуть ваше приложение.

Ознакомьтесь с нашей документацией по развертыванию Next.js для получения более подробной информации.

? Контакт

Ваше имя - @twitter_handle - [email protected]

Ссылка проекта: https://github.com/sashenjayathilaka/chatgpt-clone.git

---

Не забудьте оставить звезду ️