NextJS-chat-app - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #go #golang #android #deep-learning #linux #awesome #vue #pytorch #ios #open-source

NextJS-chat-app

(★ 101)

A chat app built using Ably and Next JS and hosted with Vercel

파일 탐색기

최종 버전 다운로드 (.zip)

- - format-check.yml
- launch.json
- - route.js
- globals.css
- layout.js
- page.js
- Chat.jsx
- ChatBox.jsx
- ChatBox.module.css
- ably-logo.svg
- vercel.svg
.editorconfig
.eslintrc.json
.gitignore
.nvmrc
.prettierrc.json
LICENSE
next.config.mjs
package-lock.json
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/ably-labs/NextJS-chat-app

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd NextJS-chat-app

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Building a realtime chat app with Next.js, Ably Chat, and Vercel

Live example at: <https://next-js-chat-app.vercel.app>

Step by step guide at: <https://ably.com/blog/realtime-chat-app-nextjs-vercel>

This is a demo chat application with [Next.js](https://nextjs.org/) using [Ably](https://ably.com) as the messaging platform.

## Description

It demonstrates the use of:

- [Ably Chat SDK](https://github.com/ably/ably-chat-js) for messaging
- [Ably Chat React hooks](https://ably.com/docs/chat/setup?lang=react) (`useMessages`, `useChatClient`)
- Token authentication with Ably

## Tech stack

The project uses the following components:

- [Next.js](https://nextjs.org/) is a React framework from [Vercel](https://vercel.com/). It is used to build static web applications with server side rendering, serverless functions and seamless hosting. It's a framework that takes the React knowledge you already have, and puts some structure and conventions in place.

- [Ably Chat](https://ably.com/docs/chat) is a set of SDKs built on top of Ably's realtime platform, designed for building chat experiences with minimal setup.

- [Vercel](https://vercel.com/) is a hosting platform, built from the ground up to host Next.js apps, and Serverless Functions with them.

- [React](https://reactjs.org/) is a JavaScript library for building user interfaces with encapsulated components that manage their own state.

## What are we going to build?

![The UI of the chat app we'll build. It is a window with speech bubbles for text.](https://cdn.glitch.com/0cb30add-c9ef-4c00-983c-e12deb0d4080%2Fchatapp.png?v=1612279601157)  
*The UI of the app we'll build with this walkthrough*

We'll build a realtime chat app that runs in the browser. It will be built upon the Next.js [create-next-app](https://nextjs.org/docs/api-reference/create-next-app) template, it will contain a React component which will use the Ably Chat SDK to send and receive messages. We'll also write a Next.js [Route Handler](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) which will be used to authenticate with Ably.

## Building & running locally

### Prerequisites

In order to build and deploy this app, you will need:

- **An Ably account** for sending messages: [Create an account with Ably for free](https://ably.com/signup).
- **A Vercel Account** for hosting on production: [Create an account with Vercel for free](https://vercel.com/signup).
- **Node 20** or greater: [Install Node](https://nodejs.org/en/).

You'll also need an API key from Ably to authenticate with the Ably Service. To get an API key, once you have [created an Ably account](https://ably.com/signup):

1. Visit your [app dashboard](https://ably.com/accounts/any) and click on "Create new app".
2. Give the new app a name.
3. Copy the Private API key once the app has been created. Keep it safe, this is how you will authenticate with the Ably service.

### Building the project

1. To run this project locally, fork this repo and create a file called `.env` in the root of the project containing your Ably API key:

```sh
ABLY_API_KEY=your-ably-api-key:goes-here
```

2. Run `npm install`.
3. Run `npm run dev`.

The Next.js dev server will spin up and you'll see a demo chat application.

## Hosting on Vercel

We're using `Vercel` as our development server and build pipeline.

> The easiest way to deploy Next.js to production is to use the Vercel platform from the creators of Next.js. Vercel is an all-in-one platform with Global CDN supporting static & Jamstack deployment and Serverless Functions.
<cite>-- [The Next.js documentation](https://nextjs.org/docs/deployment)</cive>

In order to deploy your new chat app to Vercel you'll need to:

1. Create a [GitHub account](https://github.com/) (if you don't already have one)
2. [Push your app to a GitHub repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository)
3. [Create a Vercel account](https://vercel.com/signup)
4. Create a new Vercel app and import your app from your GitHub repository. (This will require you to authorise Vercel to use your GitHub account)
5. Add your `ABLY_API_KEY` as an environment variable
6. Watch your app deploy
7. Visit the newly created URL in your browser!

## Make it your own

There are a few ways that this example could be extended:

### Add message history

There is currently no chat history in this demo, you'll only see messages that come in after you join the chat. You could expand this demo by using [Ably's rewind feature](https://ably.com/docs/storage-history/history) for up to two minutes of history for free, or with a paid account, for up to ~48 hours.

### Add user names

There aren't any usernames sent with the chat messages. This demo could be extended to introduce a username input box, and to add the current username to messages as they're sent.

The demo uses the randomly generated Ably client Id as a unique identifier - which is how it can detect if it is "me" or "someone else" who sent the message.

## More info

- [Join our Discord server](https://discord.gg/q89gDHZcBK)
- [Follow us on Twitter](https://twitter.com/ablyrealtime)
- [Use our SDKs](https://github.com/ably/)
- [Visit our website](https://ably.com)

---
[![Ably logo](https://static.ably.dev/badge-black.svg?ably-next-vercel-news)](https://ably.com)