anor ‘Build A Chat App With Sentiment Analysis Using Nex!js Images haven't loaded yet. Please exit printing, wait for images to load, and try to a print again. low me el m oe SS hun 12. 13 min read Build A Chat App With Sentiment Analysis Using Next.js Build a realtime chat application with Pusher ‘This eutorial was written by Chris Nwamba and originally appeared on the Pusher Blog. Realtime applications have been around for quite a long time as we can see in contexts such as multi-player games, realtime collaboration services, instant messaging services, realtime data analytics tools, to ‘mention a few. As a result, several technologies have been developed over the years to tackle and simplify some of the most challenging aspects of building apps that are sensitive to changes in realtime. In this tutorial, we'll build a very simple realtime chat application with sentiments, With sentiment analysis, we will be able to detect the mood of a person based on the words they use in their chat messages. Prerequisites Before you begin, ensure that you have Node and npm or Yarn installed on your machine. Here is a run-down of the core technologies we will be using. hitps:icodeburst obits chat-app-with-sentiment-analysis-using-nextjs-c43ebt3ea643 snoanor Build A Chat App With Sentiment Analysis Using Next js 1. Nextis—A framework for building server-side rendered(SSR) React applications with ease. It handles most ofthe challenges that come with building SSR React apps. 2. Pusher Pusher is a technology for building apps with varying realtime needs like push notifications and pub/sub messaging. It is the engine behind the realtime ability of our comments widget. 3. Sentiment—Sentiment is a module that uses the AFINN-165 ‘wordlist and Emoji Sentiment Ranking to perform sentiment analysis on arbitrary blocks of input text. 4. React—A very popular JavaScript DOM rendering framework for building scalable web applications using a component-based architecture. 5. Afew other libraries will be used as we will see in a moment. Also ensure that you have Node installed on your machine. Installing dependencies Create a new directory for the application and run the following command to install the required dependencies for the app. + create a new directory mkdir realtime-chat~app + Initiate a new pact and install app depend pm ie ppm i 1 react rea: npm install express hod! Setting environment variables Create a new application on your Pusher Dashboard to get your application credentials. Create a .env file in the root directory of your application and add your application credentials as follows. hitpsicodeburstiovbulle chatapp-with-sentiment-analysis-using anaanor hitpsicodeburstiovbulle chatapp-with-sentiment-analysis-using Build A Chat App With Sentiment Analysis Using Next js PUSHER APP_SECRET=YOUR_APP_SECRET Ensure that you use the same variable names as specified in the above snippet. We will make reference to them at several points in our code. Next create a Next,js configuration filenamed nex:.config.js inthe root directory of your application with the following content: (+ next config.2 */ const webpai require (‘webpack') require (*dotenv") .config(}? nodule-exports = { webpack: config => { const env = Object-keys (process env} «reduce ( (acc, curr) > env.${eurs}*) = cel ‘proces: JSON. string! fy (process.env{curr]}; One config.plugins.pu: (now webpack.DefinePlugin (env) Since Next.js uses Webpack in the background for module loading and bundling, we are simply configuring Webpack to be able to provide the environment variables we have defined and make them available to our React components by accessing the process.env object. Getting started Seti ‘We will go ahead to set up a simple server using Next js to wrap an Express application server. We will also load the necessary ‘middlewares for the Express server and then we will configure Pusher g up the server using the credentials we added to our environment variables. Create a server. file in the root directory of your application and add the following code snippet to it to set up the server: anaanor ‘Build A Chat App With Sentiment Analysis Using Nex!js (+ serverje */ const cors = require(*cors"): const next = require(next"): const Pusher = require (*pusher"); const express ~ raquire('express') const bodyParser ~ require (‘bady-parser'); const dotenv = require (*dotenv") .configt) const Sentinent = require(*sentiment'): const dev = process.env.NODE_ENV [== *production'; const port = process env.PORT || 3009; const app = next ({ dev 12 const handler = app.getRequestiandlez ()7 const sentiment = new Sentiment (); // Ensure that your pusher credentials are properly set an the venv file 1/ Using the specified variables const pusher = new Pusher ( appld: process.env. PUSHER APP_1D, key: process. env. PUSHER APP KEY, Jecret: process.env.PUSHER APP_SECREZ, env. PUSHER_APP_CLUSTER, cluster: process: encrypted: ve ape-prepare() then (() => ( ver = express (); server use (cors ()) + server.use (bodyParser. json (1); server.use (body2arser-urlencoded(( extended: true server.get("*", (req, res) => { return handler(reg, res); ne sorver.listen(port, ex => { if (err) chrow err; console,log(*> Ready on /Locathost:$ (port) "): ne » teh(ex => 4 console.error (ex.stack) process.exit (1); ne Modify npm scripts Finally, we will modify the scripts section of the package.j0n file to look like the following snippet: hitps:icodeburst obit chat-app-with-sentiment-analysis-using-nextjs-c430bt3ea643 anaanor Build A Chat App With Sentiment Analysis Using Next js 7 package.jzon */ sscripte": { je severe", wild": “next build”, are": "NODE_EAV-production node server.je" We have gotten all we need to start building our app components. If you run the command npn -un dev on your terminal now, it will start up the application server on port 3000 if tis available. However, nothing happens on the browser yet, because we have not built any index page component. Let’s start building the app components. Building the index page Next js requires that you create the page components of your app in a pages directory. We will go ahead and create a pages directory in our app root directory and create anew incex.is file inside it for the index page of our application. Before we add content to the index page, we will build a tayeut component that can be used in our app pages as a kind of template. Go ahead and create a components directory in your app root. Create a new teyout.is file inside the just created components directory with the following content: ponents/Layour.j */ nport React, ( Fragment } from 'xeact!? smport Head from ‘next /nead"; const Layout = props = rink-to-£i { Le (evt keycode === 13) ( const user = evt.target.valuer this.setscate({ user })7 render () { const {us } = thie.state: const nameInputstyles = ( background: ‘transparent’, color: "#935", border: 0, bordexBoltom: ‘1px solid #666", borderRadius: 0, fontsize: ‘3ren', FontWeight: 500, boxshadow: ‘none important? return (

ontainer-fluid position

Hellal (user) ) What is ye , { fuser & |