NextJs Messenger Clone

Nextjs Messenger-Clone

Nextjs 13 (App Router), MongoDB, Tailwind CSS, Pusher, Next-Auth 및 Cloudinary로 만든 완전 반응 형 실시간 채팅 앱.

• Nextjs (13.4.x)
• React (18.x)
• MongoDB (6.x)
• 테일 윈드 CSS (3.x)
• 푸셔 (5.x)
• Next-Auth (4.x)
• TypeScript (5.x)
• 생산 빌드 스크립트

라이브 데모

Vercel의 라이브 데모를 참조하십시오

특징

• Pusher와의 실시간 채팅 업데이트
• 그룹 채팅
• 채팅 기록을 삭제하십시오
• Cloudinary와 함께 이미지 호스팅
• 동적 테마 지원 (빛과 어두운 모드)
• 데스크탑 및 모바일 화면 모두를 지원합니다

설치

MongoDB 설정

1. https://www.mongodb.com/atlas/database로 이동하여 등록하십시오

2. Build a Database 찾고 선택하십시오
   무료 계층을 선택하고 바닥에서 Create 누릅니다.
   

3. 사용자 만들기 (비밀번호 참고)
   Add entries to your IP Access List 하려면 아래로 스크롤하십시오.
   0.0.0.0/0 입력하고 Add Entry 누릅니다
   

4. Go to Databases
   

5. Connect 클릭하고 MongoDB for VSCode 선택하십시오
   연결 문자열을 복사하여 메모장에 저장하십시오.
   <password> 3 단계의 비밀번호로 교체하십시오
   연결 문자열 끝에서 test 추가 (예 : connectionstring/test )
   

GitHub 인증 설정

1. https://github.com/으로 이동
   오른쪽 상단의 프로필 드롭 다운을 클릭하십시오
   Settings 클릭하십시오
   

2. Developer settings 클릭하십시오
   OAuth Apps 클릭하십시오
   New OAuth App 클릭하십시오
   

3. 앱에 이름을 알려주십시오
   http://localhost:3020/ Homepage URL 및 Authorization callback URL 필드를 입력하십시오.
   "응용 프로그램 등록"을 클릭하십시오.
   

4. Client Id 복사하여 주목하십시오
   Generate a new client secret 클릭하고 복사하여 주목하십시오.
   

Google 인증을 설정합니다

1. https://console.cloud.google.com으로 이동하여 새 프로젝트를 만듭니다
   

2. 새로 생성 된 프로젝트로 이동하여 API & Services 검색
   

3. OAuth consent screen 으로 이동하십시오
   External 필드를 클릭하십시오
   CREATE 클릭합니다
   

4. App name 필드를 클릭하고 이름을 지정하십시오.
   사용자 메일 필드에서 이메일을 선택하십시오
   Developer contact information 로 스크롤하고 이메일을 입력하십시오.
   Summary 단계에있을 때까지 SAVE AND CONTINUE
   

5. Credentials 으로 이동하십시오
   CREATE CREDENTIALS 클릭합니다
   OAuth client ID 선택하십시오
   

6. 응용 프로그램 유형으로 Web application 선택하십시오
   Authorized redirect URIs 로 아래로 스크롤하고 http://localhost:3020/api/auth/callback/google 추가하십시오
   CREATE 클릭합니다
   CLient ID 와 Client Secret 복사하여 주목하십시오.
   

설정 Cloudinary

1. https://console.cloudinary.com으로 이동하여 로그인하십시오
   Dashboard 로 이동하여 Cloud name 기록하십시오
   

2. 설정으로 이동하십시오
   그런 다음 Upload 로 이동하십시오
   

3. Add upload preset 클릭하십시오
   Signing Mode Unsigned 로 변경합니다
   새로 추가 된 사전 설정 이름을 복사하여 저장 Save 클릭하십시오.
   

설정 푸셔

1. https://dashboard.pusher.com/channels로 이동하십시오
   Create app 클릭하거나 Get Started .
   앱의 이름을 알려주십시오
   Frontend 및 Node.js 에 대한 React 선택하여 백엔드를 선택하십시오
   앱을 만듭니다
   

2. App Keys 이동하십시오
   다운 값을 기록하십시오
   

설정 프로젝트

1. 복제/다운로드 레포
2. 프로젝트의 루트 디렉토리에서 .env.local이라는 파일 만들기 CMD/PowerShell에 다음을 입력하십시오.

    cp env.example .env.local
   

3. .env.local 파일 내부에서 이전 단계에서 MongoDB, Pusher, Cloudinary, Github 및 Google 키를 추가하십시오.
4. yarn install (실행 npm install yarn 설치되어 있지 않은 경우 실행).
5. yarn prisma db push DB 컬렉션을 생성합니다
6. prisma generate

용법

개발

yarn dev

• 앱을 지속적으로 빌드 (HMR 활성화)

생산

yarn build yarn start

• /.next/ 에 앱을 한 번 (hmr disabled) 빌드하십시오.

---

모든 명령

명령	설명
yarn dev	앱을 지속적으로 빌드 (HMR 활성화)
yarn build	/.next/ 에 앱을 한 번 (hmr disabled) 빌드하십시오.
yarn start	생산 빌드를 실행하십시오

참조하십시오

• 일부 디자인 아이디어는 Facebook 메신저에서 가져 왔습니다
• 이 프로젝트에 대한 일부 구현 아이디어는 Josh와 Antonio에서 가져 왔습니다.
• Project는 Create-Next-App으로 부트 스트랩되었습니다