ChatGPT Clone

？入門

‼️先決條件

• 在此處註冊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安裝my-project

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

 cd my-project

安裝依賴項

？使用Next.js安裝尾風CSS

安裝尾風CSS

通過NPM安裝parwindcss及其同行依賴項，然後運行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 : [ ] ,
} 

將尾風指令添加到您的CSS

將@tailwind指令添加到您的./styles/globals.css文件中。

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

安裝依賴項

？其他依賴性信息

？本地運行

克隆項目

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

  npm install

入門

首先啟動服務器，運行開發服務器：

  npm run dev

這是一個帶有create-next-app boottrable。

安裝依賴項這是一個帶有create-next-app boottrable。

打開http：// localhost：3000使用瀏覽器查看結果。

您可以通過修改pages/index.js開始編輯頁面。編輯文件時，頁面自動更新。

可以在http：// localhost：3000/api/hello上訪問API路由。可以在pages/api/hello.js中編輯此端點。

pages/api目錄映射到/api/* 。該目錄中的文件被視為API路由而不是React頁面。

了解更多

要了解有關Next.js的更多信息，請查看以下資源：

• Next.js文檔 - 了解Next.js功能和API。
• 學習Next.js-互動Next.js教程。

您可以查看下一個。JSgithub存儲庫 - 歡迎您的反饋和貢獻！

部署

部署此項目運行

部署在Vercel上

部署您的next.js應用的最簡單方法是使用Next.js的創建者的Vercel平台。

請查看我們的Next.js部署文檔以獲取更多詳細信息。

？接觸

您的名字 - @twitter_handle [email protected]

項目鏈接：https：//github.com/sashenjayathilaka/chatgpt-clone.git

---

別忘了離開星星