채팅용 Next.js 앱 빌드: Sendbird UIKit을 Next.js 앱에 추가

Jan 30, 2023

James Robertson

인앱 채팅 을 구축하는 데는 많은 복잡성이 있습니다. 기능이 풍부한 채팅을 구축하는 동안 사용할 준비가 된 미리 디자인된 채팅 UI 구성 요소 집합이 있는 경우 도움이 되는 경우가 많습니다. Sendbird UIKit은 인앱 채팅 구축 과정을 단순화하는 UI 구성 요소 를 제공합니다. 이 튜토리얼에서는 Sendbird React UIKit V3 를 Next.js 13 앱에 추가하는 방법을 배웁니다.

이 블로그를 마치면 채팅 메시징을 위한 Next.js 앱을 빌드하게 됩니다. 다음은 어떻게 표시되는지에 대한 스크린샷입니다.

최종 코드 와 최종 결과의 라이브 데모 를 확인하는 것이 좋습니다 . 아래 동영상을 보시는 것도 도움이 될 수 있습니다.

전제 조건

시작하기 전에 Sendbird 계정에 가입 했는지 확인하십시오 . 이 자습서에서는 시스템에 설치된 Node.js (버전 12.22.0 이상)가 필요합니다.

시작하자!

The only UIKit you need.

Start building

채팅용 Next.js 앱을 빌드하는 이유는 무엇입니까?

Next.js가 채팅 앱을 빌드하는 데 좋은 선택인 이유는 Next.js를 사용하면 빌드 중이나 서버 요청 시 React 구성 요소를 쉽게 렌더링할 수 있기 때문입니다. 이는 사용자의 기기에서 렌더링되는 기존의 React 앱과 반대입니다. 이것은 네트워크를 통해 많은 양의 JavaScript를 전송하지 않고 클라이언트가 페이지를 렌더링하는 데 걸리는 시간을 줄여 성능을 향상시킵니다.

Next.js를 사용한 클라이언트 측 렌더링

서버측 렌더링을 제공할 뿐만 아니라 Next.js는 클라이언트측 특정 구성 요소를 로드할 수 있습니다. 이를 가능하게 하는 기능을 동적 가져오기라고 합니다. 동적 가져오기 기능을 사용하여 클라이언트 측 렌더링이 필요한 동적 채팅 UI인 Sendbird React UIKit에 로드할 수 있습니다.

Next.js 동적 가져오기

Next.js에서는 동적 가져오기를 사용하여 클라이언트 측에서만 구성 요소를 로드할 수 있습니다. 이를 위해 동적 기능을 사용할 수 있습니다. 예를 들어 클라이언트 측에서만 로드하려는 MyAsyncComponent라는 구성 요소가 있다고 가정해 보겠습니다. 방법은 다음과 같습니다.

주목해야 할 한 가지 중요한 사항은 ssr 옵션이 false로 설정되어 있다는 것입니다. 이렇게 하면 이 구성 요소가 중단될 수 있는 서버 측 환경에서 렌더링되지 않습니다. 대부분 브라우저 API(예: 창 개체)가 없기 때문일 수 있습니다.

Next.js에 UIKit 추가

이제 채팅을 위해 Next.js 앱에 UIKit을 추가하는 방법에 대해 이야기하겠습니다.

Next.js 프로젝트 만들기

새 Next.js 프로젝트를 만들려면 컴퓨터에 Node.js 및 npm(Node.js용 패키지 관리자)이 설치되어 있어야 합니다.

Next.js 프로젝트를 생성하기 위해 다음 명령을 실행하여 create-next-app CLI 도구를 사용합니다.

이 블로그에서 제공하는 샘플 코드는 Javascript를 사용하지만 명령줄 도구에서 프롬프트가 표시되면 TypeScript를 선택해도 됩니다.

새로 생성된 프로젝트로 이동하고 다음을 사용하여 앱을 시작합니다.

이제 브라우저에서 기본 Next.js 13 프로젝트가 실행됩니다.

UIKit 설치

이제 프로젝트가 준비되어 실행 중이므로 Sendbird UIKit 을 설치할 수 있습니다 . 우리는 최신 버전의 라이브러리를 사용할 것입니다. Senbird UIKit V3 의 공식 문서 를 참조하십시오.

채팅 구성 요소 만들기

먼저 프로젝트의 루트에 components라는 새 폴더를 추가하겠습니다. 이 디렉터리에는 채팅 구성 요소가 있습니다. 나중에 이 블로그에서 클라이언트 측에서만 렌더링되도록 이 구성 요소를 페이지에 추가하는 방법을 볼 수 있습니다.

새로 만든 Chat.jsx 파일에서 UIKit을 가져오고 UIKit 채팅 앱 구성 요소를 렌더링하는 다음 코드를 추가해 보겠습니다. 채팅을 전체 화면으로 표시하려면 너비와 높이가 100%인 래핑 div를 추가하세요. Sendbird UIKit에는 사용자 ID와 애플리케이션 ID가 소품으로 전달되어야 합니다. 이 두 가지 정보는 Sendbird 대시보드 를 통해 찾을 수 있습니다 .

페이지에 채팅 구성 요소 추가

이제 작동하는 채팅 앱이 있으므로 렌더링할 위치가 필요합니다. Next.js 라우팅은 페이지의 핵심 개념을 사용합니다. 사용자가 브라우저에서 해당 페이지 경로를 방문하면 페이지가 렌더링됩니다. 기본적으로 create-next-app은 인덱스 페이지를 제공합니다. 채팅 구성 요소를 렌더링하도록 해당 파일을 업데이트하겠습니다.

위의 코드는 다음을 수행합니다.

채팅 구성 요소가 멋지게 보이도록 Sendbird 스타일을 가져옵니다.
Next.js 동적 가져오기 기능을 사용하여 Chat.jsx 구성 요소를 가져옵니다. 클라이언트 측에서만 렌더링하고 서버 측 렌더링 버그를 피하는지 확인하십시오.
<main> 태그 내부의 모든 항목을 제거하고 새로 생성된 <DynamicAppWithNoSSR> 구성 요소로 교체합니다.

최종 결과는 다음과 같습니다.

결론

축하해요! 이제 여전히 정적 및 서버측 렌더링을 사용하고 클라이언트측에서 Sendbird의 대화형 채팅 구성 요소를 렌더링할 수 있는 Next.js 앱이 있습니다.

이 블로그의 자료에 대한 추가 지침이 필요한 경우 문서 를 참조하십시오 . 최종 코드 와 결과의 라이브 데모 를 확인하는 것을 잊지 마십시오 ! 인앱 채팅 의 데모 를 보는 것도 흥미로울 것 입니다. Sendbird 에 관한 모든 것을 묻고 답할 수 있는 포럼인 Sendbird Community 에서도 답을 찾을 수 있습니다 . 도움이 필요하시면 주저하지 마시고 저희에게 연락해 주십시오 . 저희 전문가가 기꺼이 도와드리겠습니다. 행복한 채팅 구축! 💻