채팅용 Next.js 앱 빌드: Sendbird UIKit을 Next.js 앱에 추가
![Nextjs blog cover](https://sendbird.imgix.net/cms/nextjs-blog-cover.jpg?auto=format,compress&crop=faces)
인앱 채팅 을 구축하는 데는 많은 복잡성이 있습니다. 기능이 풍부한 채팅을 구축하는 동안 사용할 준비가 된 미리 디자인된 채팅 UI 구성 요소 집합이 있는 경우 도움이 되는 경우가 많습니다. Sendbird UIKit은 인앱 채팅 구축 과정을 단순화하는 UI 구성 요소 를 제공합니다. 이 튜토리얼에서는 Sendbird React UIKit V3 를 Next.js 13 앱에 추가하는 방법을 배웁니다.
이 블로그를 마치면 채팅 메시징을 위한 Next.js 앱을 빌드하게 됩니다. 다음은 어떻게 표시되는지에 대한 스크린샷입니다.
최종 코드 와 최종 결과의 라이브 데모 를 확인하는 것이 좋습니다 . 아래 동영상을 보시는 것도 도움이 될 수 있습니다.
![nextjs 블로그 이미지](http://sendbird.sfo3.digitaloceanspaces.com/cms/nextjs-blog-image-1.jpg)
전제 조건
시작하기 전에 Sendbird 계정에 가입 했는지 확인하십시오 . 이 자습서에서는 시스템에 설치된 Node.js (버전 12.22.0 이상)가 필요합니다.
시작하자!
![U Ikit Mobile content offer background](https://sendbird.imgix.net/cms/UIkit-content-offer-background.jpg?auto=format,compress&crop=faces)
The only UIKit you need.
채팅용 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를 선택해도 됩니다.
![nextjs 블로그 이미지](http://sendbird.sfo3.digitaloceanspaces.com/cms/nextjs-blog-image-2.jpg)
새로 생성된 프로젝트로 이동하고 다음을 사용하여 앱을 시작합니다.
이제 브라우저에서 기본 Next.js 13 프로젝트가 실행됩니다.
![nextjs 블로그 이미지](http://sendbird.sfo3.digitaloceanspaces.com/cms/next-js-blog-image-3.jpg)
UIKit 설치
이제 프로젝트가 준비되어 실행 중이므로 Sendbird UIKit 을 설치할 수 있습니다 . 우리는 최신 버전의 라이브러리를 사용할 것입니다. Senbird UIKit V3 의 공식 문서 를 참조하십시오.
채팅 구성 요소 만들기
먼저 프로젝트의 루트에 components라는 새 폴더를 추가하겠습니다. 이 디렉터리에는 채팅 구성 요소가 있습니다. 나중에 이 블로그에서 클라이언트 측에서만 렌더링되도록 이 구성 요소를 페이지에 추가하는 방법을 볼 수 있습니다.
![nextjs 블로그 이미지](http://sendbird.sfo3.digitaloceanspaces.com/cms/next-js-blog-image-4.jpg)
새로 만든 Chat.jsx 파일에서 UIKit을 가져오고 UIKit 채팅 앱 구성 요소를 렌더링하는 다음 코드를 추가해 보겠습니다. 채팅을 전체 화면으로 표시하려면 너비와 높이가 100%인 래핑 div를 추가하세요. Sendbird UIKit에는 사용자 ID와 애플리케이션 ID가 소품으로 전달되어야 합니다. 이 두 가지 정보는 Sendbird 대시보드 를 통해 찾을 수 있습니다 .
페이지에 채팅 구성 요소 추가
이제 작동하는 채팅 앱이 있으므로 렌더링할 위치가 필요합니다. Next.js 라우팅은 페이지의 핵심 개념을 사용합니다. 사용자가 브라우저에서 해당 페이지 경로를 방문하면 페이지가 렌더링됩니다. 기본적으로 create-next-app은 인덱스 페이지를 제공합니다. 채팅 구성 요소를 렌더링하도록 해당 파일을 업데이트하겠습니다.
위의 코드는 다음을 수행합니다.
- 채팅 구성 요소가 멋지게 보이도록 Sendbird 스타일을 가져옵니다.
- Next.js 동적 가져오기 기능을 사용하여 Chat.jsx 구성 요소를 가져옵니다. 클라이언트 측에서만 렌더링하고 서버 측 렌더링 버그를 피하는지 확인하십시오.
- <main> 태그 내부의 모든 항목을 제거하고 새로 생성된 <DynamicAppWithNoSSR> 구성 요소로 교체합니다.
최종 결과는 다음과 같습니다.
![nextjs 블로그 이미지](http://sendbird.sfo3.digitaloceanspaces.com/cms/nextjs-blog-image-5.jpg)
결론
축하해요! 이제 여전히 정적 및 서버측 렌더링을 사용하고 클라이언트측에서 Sendbird의 대화형 채팅 구성 요소를 렌더링할 수 있는 Next.js 앱이 있습니다.
이 블로그의 자료에 대한 추가 지침이 필요한 경우 문서 를 참조하십시오 . 최종 코드 와 결과의 라이브 데모 를 확인하는 것을 잊지 마십시오 ! 인앱 채팅 의 데모 를 보는 것도 흥미로울 것 입니다. Sendbird 에 관한 모든 것을 묻고 답할 수 있는 포럼인 Sendbird Community 에서도 답을 찾을 수 있습니다 . 도움이 필요하시면 주저하지 마시고 저희에게 연락해 주십시오 . 저희 전문가가 기꺼이 도와드리겠습니다. 행복한 채팅 구축! 💻