Use Next.js and Vercel to build a link-sharing app using serverless WebSockets

In this tutorial, you will learn how to implement realtime functionality in a Next.js application and deploy it to Vercel. Along the way, you'll learn some best practices about authentication and publishing and also how to use Ably’s Presence, History, and Channel Rewind features. 1. Create the Next.js app: Start by creating a new Next.js project using create-next-app. 2. Architecture: Plan out your application's architecture. You will need two Ably API keys (one for server operations and one for client operations), an environment variable file, and several components to handle user authentication, publishing articles, listing participants, and displaying article previews. 3. Build the basic UI: Create a simple web page with a header, a form for submitting news article URLs, and a list of users connected to the messaging channel. 4. Create your Ably API keys: Log in to your Ably account and create two new API keys (one for server operations and one for client operations). Save these keys in a .env file in your project's root directory. 5. Configure your .env file: Install the dotenv NPM package, which will allow you to load environment variables from your .env file into your application at runtime. 6. Authentication with Ably: Create an API endpoint that will perform the authentication step using Vercel Serverless functions. This is a perfect use case for one. 7. Build the list of participants: Next up is the first bit of Ably functionality: a list of users connected to a specific messaging channel, which you will retrieve using Ably’s Presence feature. 8. Publish articles: By electing to publish from the server, you can validate and pre-process what clients send to the channel. For instance, you might want to implement a profanity filter, which is trivial to do server-side. 9. Implement a UI for publishing: You will create a new component called Articles for this. In a file called Articles.js in the components directory, enter the following code. 10. Retrieve the latest messages: When the user first visits the page, you don't want them to see just an empty page. You also want them to see recent messages published to the channel before they subscribed to it. 11. Generate the article previews: Create a new component for this, called ArticlePreview (/components/articlePreview.js), with the following code. 12. Test your creation: Ensure that your server is running and then open two or more tabs at https://localhost:3000. Find an article online, and submit its URL. If the site in question has OpenGraph data associated with it you’ll see a preview of the article appear simultaneously in all the open app tabs. 13. Deploy your app to Vercel: Before you push your code to GitHub, add your .env file to .gitignore, by executing the following code in your terminal in your project's root directory. Then, commit and push your local repository to GitHub. Visit your Vercel dashboard and import your repository into Vercel. Resources: - Learn more about Ably’s React Hooks - Engage Your Users with Live Updates - Visualize your commits in realtime with Ably and GitHub webhooks - Building a realtime chat app with Next.js and Vercel - Find out more about Ably - Learn more about Next.js and Vercel - Introducing Vercel and Next.js to implement realtime functionality