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にTailwind CSSをインストールします

Tailwind CSSをインストールします

NPMを介してTailWindCSSとそのピア依存関係をインストールし、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

これはcreate-next-appでBootstrappedのnext.jsプロジェクトです。

依存関係をインストールこれはcreate-next-appでブートストラップされたnext.jsプロジェクトです。

http：// localhost：3000を開き、ブラウザを使用して結果を確認します。

pages/index.jsを変更して、ページの編集を開始できます。ファイルを編集するときにページ自動更新。

APIルートはhttp：// localhost：3000/api/helloでアクセスできます。このエンドポイントはpages/api/hello.jsで編集できます。

pages/apiディレクトリは/api/*にマッピングされます。このディレクトリのファイルは、Reactページの代わりにAPIルートとして扱われます。

もっと詳しく知る

next.jsの詳細については、次のリソースをご覧ください。

• next.jsドキュメント - next.js機能とAPIについて学びます。
• next.jsを学ぶ - インタラクティブなnext.jsチュートリアル。

next.js githubリポジトリを確認できます - フィードバックと貢献を大歓迎です！

展開

このプロジェクトを展開するには

Vercelに展開します

next.jsアプリを展開する最も簡単な方法は、next.jsの作成者からvercelプラットフォームを使用することです。

詳細については、next.js deploymentドキュメントをご覧ください。

？接触

あなたの名前 - @twitter_handle [email protected]

プロジェクトリンク：https：//github.com/sashenjayathilaka/chatgpt-clone.git

---

星を離れることを忘れないでくださいするまで