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

---

别忘了离开星星