NextJS chat app
1.0.0
Exemplo ao vivo em: https://next-js-chat-app.vercel.app
Guia passo a passo em: https://aility.com/blog/realtime-chat-app-nextjs-vercel
Este é um aplicativo de bate -papo de demonstração com o Next.js usando habilmente como a plataforma de mensagens.
Demonstra o uso de:
O projeto usa os seguintes componentes:
Next.js é uma estrutura de reação da vercel. É usado para criar aplicativos estáticos da Web com renderização do lado do servidor, funções sem servidor e hospedagem perfeita. É uma estrutura que toma o conhecimento do React que você já possui e coloca alguma estrutura e convenções em vigor.
O habilmente é a plataforma de pub/sub-mensagens em tempo real, com um conjunto de serviços integrados para fornecer funcionalidade completa em tempo real diretamente aos usuários finais.
O Vercel é uma plataforma de hospedagem, construída desde o início para o Host Next.js Apps e funções sem servidor com eles.
O React é uma biblioteca JavaScript para criar interfaces de usuário com componentes encapsulados que gerenciam seu próprio estado.
A interface do usuário do aplicativo que construiremos com este passo a passo
Vamos criar um aplicativo de bate -papo em tempo real que é executado no navegador. Ele será criado no próximo. Também escreveremos uma função Next.js Serverless, que será usada para se conectar ao habilmente.
Para construir e implantar este aplicativo, você precisará:
Você também precisará de uma chave de API de habilmente para autenticar com o serviço habilmente. Para obter uma chave da API, depois de criar uma conta habilmente:
.env na raiz do projeto que contém sua chave de API habilmente: ABLY_API_KEY=your-ably-api-key:goes-herenpm install .npm run dev .O NEXT.JS Dev Server girará e você verá um aplicativo de bate -papo de demonstração.
Estamos usando Vercel como nosso servidor de desenvolvimento e construa o pipeline.
A maneira mais fácil de implantar o Next.js para a produção é usar a plataforma vercel dos criadores do Next.js. A Vercel é uma plataforma tudo-em-um, com CDN global que suporta funções estáticas e Jamstack e funções sem servidor. - A documentação Next.js
Para implantar seu novo aplicativo de bate -papo no vercel, você precisará:
ABLY_API_KEY como uma variável de ambienteExistem algumas maneiras pelas quais este exemplo pode ser estendido:
Atualmente, não há histórico de bate -papo nesta demonstração, você verá apenas mensagens que entram depois de participar do bate -papo. Você pode expandir essa demonstração usando o recurso Rewind da Ibly por até dois minutos de história gratuitamente ou com uma conta paga por até ~ 48 horas.
Não há nomes de usuário enviados com as mensagens de bate -papo. Essa demonstração pode ser estendida para introduzir uma caixa de entrada de nome de usuário e adicionar o nome de usuário atual às mensagens conforme enviado.
A demonstração usa o ID de cliente habilmente gerado aleatoriamente como um identificador exclusivo - e é assim que ele pode detectar se é "eu" ou "outra pessoa" que enviou a mensagem.
