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으로 내 프로젝트를 설치하십시오

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

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

이것은 다음.js 프로젝트 create-next-app 으로 부트 스트랩입니다.

의존성 설치 다음은 다음에 만들어집니다. JS 프로젝트는 create-next-app 으로 부트 스트랩됩니다.

http : // localhost : 3000을 열어 브라우저를 사용하여 결과를 확인하십시오.

pages/index.js 수정하여 페이지 편집을 시작할 수 있습니다. 파일을 편집 할 때 페이지가 자동 업데이트됩니다.

API 경로는 http : // localhost : 3000/api/hello에서 액세스 할 수 있습니다. 이 엔드 포인트는 pages/api/hello.js 에서 편집 할 수 있습니다.

pages/api 디렉토리는 /api/* 에 매핑됩니다. 이 디렉토리의 파일은 React 페이지 대신 API 경로로 취급됩니다.

자세히 알아보십시오

JS에 대한 자세한 내용은 다음 리소스를 살펴보십시오.

• Next.js 문서 - Next.js 기능 및 API에 대해 알아보십시오.
• 다음.js- 대화식 Next.js 튜토리얼을 배우십시오.

JS Github 리포지토리를 확인할 수 있습니다. 귀하의 의견과 기부금을 환영합니다!

전개

이 프로젝트를 배포하려면

Vercel에 배포하십시오

Next.js 앱을 배포하는 가장 쉬운 방법은 Next.js의 제작자의 Vercel 플랫폼을 사용하는 것입니다.

자세한 내용은 Next.js 배포 문서를 확인하십시오.

? 연락하다

귀하의 이름 - @twitter_handle [email protected]

프로젝트 링크 : https://github.com/sashenjayathilaka/chatgpt-clone.git

---

별을 떠나는 것을 잊지 마십시오