Next.js 실시간 채팅 애플리케이션을 구축하는 방법
Published: 2024-01-24 16:29:54

Next.js와 PubNub을 사용하여 실시간 채팅 애플리케이션을 구축하는 방법에 대한 튜토리얼에 오신 것을 환영합니다. 이 가이드에서는 원활한 사용자 경험을 제공하는 고도의 대화형 채팅 앱을 만드는 방법을 보여드립니다. 다음 프레임워크 위에 구축된 인기 프레임워크인 Next.js의 강력한 기능을 활용하여 [Node.js](https://nodejs.org/en/)의 실시간 기능과 함께 PubNub의 강력한 기능을 활용하여 풀스택 채팅 앱을 쉽게 개발할 수 있습니다. 시작해 보세요!

**Next.js를 사용하여 채팅 앱을 구축해야 하는 이유**
----------------------------------

Next.js는 [오픈 소스](https://nextjs.org/)기반의 강력한 자바스크립트 프레임워크로, 서버 렌더링 React 애플리케이션의 개발을 간소화합니다. 채팅 애플리케이션을 구축하는 데 이상적이며, 개발 프로세스를 간소화하는 여러 가지 이점을 제공합니다.

### **실시간 채팅에 Next.js를 사용할 때의 이점**

1.  **서버 측 렌더링**: Next.js는 기본적으로 서버 측 렌더링(SSR)을 지원하여 채팅 앱의 성능과 SEO를 개선합니다. SSR을 사용하면 느린 연결에서도 앱을 빠르고 효율적으로 로드할 수 있습니다.
    
2.  **자동 코드 분할**: Next.js는 코드를 더 작은 덩어리로 분할하여 채팅 앱을 자동으로 최적화하므로 사용자는 애플리케이션에서 필요한 부분만 로드할 수 있습니다. 이를 통해 더 빠르고 반응이 빠른 경험을 보장합니다.
    
3.  **통합 개발 환경**: Next.js를 사용하면 CSS-in-JS, TypeScript 또는 GraphQL과 같이 선호하는 도구를 사용할 수 있습니다. 이러한 유연성 덕분에 필요에 가장 적합한 채팅 앱을 만들 수 있습니다.
    
4.  **실시간 업데이트**: PubNub와 함께 사용하면 Next.js를 통해 지연 시간이 짧은 실시간 채팅 기능을 구현하여 사용자가 즉시 채팅 메시지를 주고받을 수 있습니다. PubNub의 [채팅 API](https://www.pubnub.com/guides/the-complete-guide-to-chat-apis/) 를 사용하면 알림, 메시지 기록 및 현재 상태와 같은 기능을 쉽게 구현할 수 있습니다.
    
5.  **간편한 배포**: 최소한의 구성으로 Next.js 앱을 AWS, Vercel 또는 Netlify와 같은 다양한 플랫폼에 배포할 수 있습니다. 배포가 간편하기 때문에 인프라에 대한 걱정 없이 채팅 앱 구축에만 집중할 수 있습니다.
    

채팅 앱에 Next.js를 사용하면 강력한 기능과 PubNub과의 원활한 통합을 활용할 수 있습니다. 이 두 가지를 함께 사용하면 성능과 확장성을 모두 갖춘 실시간 채팅 애플리케이션을 구축할 수 있는 훌륭한 토대를 마련할 수 있습니다.

**Next.js 실시간 채팅 애플리케이션을 구축하는 방법**
----------------------------------

Next.js 프로젝트를 설정합니다: 먼저 `create-next-app을` 사용하여 새 Next.js 애플리케이션을 만들어야 합니다.

**PubNub SDK를 설치합니다**: PubNub의 실시간 기능을 채팅 앱에 통합하려면 npm을 사용하여 PubNub JavaScript SDK를 설치해야 합니다. 다음 명령을 실행하여 프로젝트에 추가합니다:

```js
npm install pubnub
```

**PubNub 구성**: 다음으로 PubNub 계정을 설정하여 API 키를 받습니다. 다음과 같이 할 수 있습니다. [여기에서 무료 계정에 가입](https://admin.pubnub.com/#/register). API 키를 받으면 .env 파일에 저장합니다:

```js
PUBNUB_PUBLISH_KEY=your-publish-key
PUBNUB_SUBSCRIBE_KEY=your-subscribe-key
```

**PubNub 객체를 초기화합니다:** 이제 나중에 채널 간에 메시지를 주고받을 수 있도록 PubNub 객체를 초기화합니다.

```js
// pubnub.js

import PubNub from 'pubnub';

const pubnub = new PubNub({
  publishKey: process.env.NEXT_PUBLIC_PUBNUB_PUBLISH_KEY,
  subscribeKey: process.env.NEXT_PUBLIC_PUBNUB_SUBSCRIBE_KEY,
  uuid: "yourUniqueUserId" // Unique identifier for each user
});

export default pubnub;
```

**채팅 컴포넌트 만들기**: 이제 채팅 앱의 프론트엔드 컴포넌트를 구축할 차례입니다. React Hook과 CSS를 사용하여 채팅 입력과 메시지 목록을 위한 컴포넌트를 만들 것입니다. 사용 상태와 사용 효과 훅은 컴포넌트의 상태 관리와 부작용을 처리합니다.

**채팅 입력 컴포넌트**: 사용자가 메시지를 입력하고 보낼 수 있는 컴포넌트입니다.

```js
// ChatInput.js

import React, { useState } from 'react';
import pubnub from './pubnub';

const ChatInput = () => {
  const [message, setMessage] = useState('');

  const sendMessage = () => {
    if (message) {
      pubnub.publish({
        channel: 'chat-channel',
        message: { sender: pubnub.getUUID(), content: message }
      });
      setMessage('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Type your message here"
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

export default ChatInput;
```

**채팅 메시지 컴포넌트**: 수신 메시지를 표시합니다.

```js
// ChatMessages.js

import React, { useEffect, useState } from 'react';
import pubnub from './pubnub';

const ChatMessages = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    pubnub.subscribe({ channels: ['chat-channel'] });
    pubnub.addListener({
      message: (event) => {
        setMessages((msgs) => [...msgs, event.message]);
      }
    });

    return () => {
      pubnub.unsubscribeAll();
    };
  }, []);

  return (
    <div>
      {messages.map((msg, index) => (
        <div key={index}>{msg.content}</div>
      ))}
    </div>
  );
};

export default ChatMessages;
```

**실시간 채팅 기능을 구현합니다**: 이러한 컴포넌트가 준비되었다면 이미 PubNub SDK를 사용하여 메시지를 보내고 채널을 구독하는 PubNub의 실시간 채팅 기능을 통합한 것입니다.

**인증(인증)을 구현합니다**: 채팅 앱을 보호하려면 사용자 인증을 구현해야 합니다. JWT 토큰이나 Google 또는 Facebook과 같은 OAuth 공급자와 같은 다양한 인증 방법을 사용할 수 있습니다. 적절한 인증 검사를 통해 서버 측 엔드포인트와 클라이언트 측 구성 요소를 보호해야 한다는 점을 잊지 마세요.

**채팅 앱 스타일** 지정하기: 마지막으로 CSS 또는 선호하는 스타일링 방식을 사용하여 채팅 앱의 모양을 사용자 지정할 수 있습니다. Material-UI나 부트스트랩과 같은 컴포넌트 라이브러리를 사용하여 프로세스 속도를 높일 수도 있습니다.

이 단계를 완료하면 Next.js를 기반으로 구축되고 PubNub로 구동되는 모든 기능을 갖춘 실시간 채팅 애플리케이션이 완성됩니다. 추가 리소스, 소스 코드 및 예제는 다음 문서에서 확인할 수 있습니다. [문서](https://www.pubnub.com/docs/) 에서 더 많은 기능을 추가하고 채팅 앱을 다듬는 데 도움이 되는 추가 리소스 및 예제를 찾을 수 있습니다.

**Next.js 채팅 앱 예제**
-------------------

채팅 앱 프로젝트에 영감을 줄 수 있도록 Next.js와 PubNub를 사용하여 구축된 실시간 채팅 앱의 몇 가지 예시를 소개합니다. 이 예시들은 PubNub의 실시간 메시징 기능과 결합했을 때 Next.js의 다양성과 확장성을 보여줍니다.

1.  **그룹 채팅 앱**: 사용자가 여러 채팅방에 참여하고, 메시지를 보내고, 누가 온라인 상태인지 확인할 수 있는 그룹 채팅 애플리케이션입니다. Node.js와 PubNub를 사용하여 유사한 앱을 만드는 방법에 대한 튜토리얼을 찾을 수 있습니다. [을 사용하여 유사한 앱을 만드는 방법에 대한 튜토리얼](https://www.pubnub.com/blog/building-chat-application-using-node-js/).
    
2.  **웹 기반 채팅 앱**: 사용자가 다른 사람들과 메시지를 보내고 파일을 공유할 수 있는 웹 기반 채팅 애플리케이션입니다. 이 앱은 PubNub을 사용하여 실시간 채팅 기능을 웹 앱에 통합하는 방법을 보여줍니다. 튜토리얼 확인 [튜토리얼을](https://www.pubnub.com/blog/web-based-chat-application/).
    
3.  **챗봇 앱**: 사용자 질문에 답변하고 지원을 제공하기 위해 OpenAI의 GPT-3와 같은 AI 기반 챗봇을 통합하는 채팅 앱입니다. GPT-3 및 PubNub로 챗봇 앱을 구축하는 방법에 대한 튜토리얼을 찾을 수 있습니다. [챗봇 앱 구축 튜토리얼](https://www.pubnub.com/blog/building-a-chatbot-with-openai-gpt3-and-pubnub/).
    
4.  **고객 지원 채팅 앱**: 사용자와 지원 상담원을 실시간으로 연결하여 문제를 빠르고 효율적으로 해결할 수 있는 고객 지원 채팅 애플리케이션입니다. 이 앱은 고객 지원 맥락에서 PubNub의 실시간 메시징 및 프레즌스 기능을 보여줍니다.
    

이 예제는 자체 Next.js 채팅 애플리케이션의 출발점이 됩니다. Next.js와 PubNub을 사용하면 간단한 메시징 플랫폼부터 정교한 AI 기반 챗봇에 이르기까지 다양한 사용 사례에 맞는 다양한 채팅 앱을 만들 수 있습니다.

**채팅 앱용 PubNub 시작하기**
---------------------

실시간 채팅 애플리케이션을 위한 PubNub을 시작하려면 다음 단계를 따르세요:

1.  **PubNub 계정에 가입**합니다: 먼저 [무료 PubNub 계정](https://dashboard.pubnub.com/signup) 에 가입하여 API 키를 받습니다. API 키는 PubNub의 실시간 메시징 서비스를 채팅 앱에 통합하는 데 필수적입니다.
    
2.  **PubNub 설명서를 살펴**보세요: 숙지하기 [PubNub의 문서](https://www.pubnub.com/docs/) 를 숙지하여 사용 가능한 다양한 기능, 서비스 및 SDK를 더 잘 이해하세요. 이 문서에는 포괄적인 가이드와 튜토리얼이 제공되어 PubNub을 채팅 앱에 성공적으로 통합하는 데 도움이 됩니다.
    
3.  **PubNub SDK를 선택합니다**: PubNub은 JavaScript, Node.js, React, Angular 등 다양한 언어와 플랫폼을 위한 SDK를 제공합니다. Next.js 채팅 앱의 경우 다음을 사용하는 것이 좋습니다. [PubNub 자바스크립트 SDK](https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk).
    
4.  **채팅 앱에 PubNub을 통합합니다**: 적절한 SDK를 선택한 후에는 다음 [빠른 시작 가이드](https://www.pubnub.com/docs/web-javascript/quick-start-guide) 에 따라 PubNub을 채팅 앱에 통합하세요. API 키로 PubNub 인스턴스를 초기화한 다음 메시지 보내기, 채널 구독, 사용자 현재 상태 관리 등 필요한 기능을 구현해야 합니다.
    
5.  **채팅 앱 테스트하기**: 채팅 앱을 구축할 때 철저하게 테스트하여 실시간 메시징 기능이 예상대로 작동하는지 확인하세요.
    
6.  **채팅 앱을 배포합니다**: 채팅 앱을 구축하고 테스트했으면 원하는 호스팅 플랫폼에 배포하세요. Next.js 앱은 Vercel, Netlify 또는 AWS와 같은 다양한 플랫폼에 배포할 수 있습니다.
    

이 단계를 수행하면 Next.js 및 PubNub로 구동되는 강력한 실시간 채팅 애플리케이션을 만들 수 있습니다. 다음을 참조하세요. [PubNub 문서](https://www.pubnub.com/docs/) 또는 [github](https://github.com/PubNubDevelopers) 를 참조하여 개발 여정 전반에 걸쳐 추가적인 안내와 지원을 받으세요.

펍넙이 어떤 도움을 줄 수 있나요?
===================

이 문서는 원래 [PubNub.com에](https://www.pubnub.com/blog/how-to-build-a-next-js-real-time-chat-application/) 게시되었습니다.

저희 플랫폼은 개발자가 웹 앱, 모바일 앱, IoT 기기를 위한 실시간 인터랙티브를 구축, 제공, 관리할 수 있도록 지원합니다.

저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 8억 명의 월간 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한, 트래픽 급증으로 인한 지연 시간 문제를 걱정할 필요가 없습니다.

PubNub 체험하기
-----------

[라이브 투어를](https://www.pubnub.com/tour/introduction/) 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.

설정하기
----

PubNub [계정에](https://admin.pubnub.com/signup/) 가입하여 PubNub 키에 무료로 즉시 액세스하세요.

시작하기
----

사용 사례나 [SDK에](https://www.pubnub.com/docs) 관계없이 [PubNub 문서를](https://www.pubnub.com/docs) 통해 바로 시작하고 실행할 수 있습니다.