Articles tagged nextjs.
From Prompt to Production: Build a Full-Stack App With Stripe Projects
Build, provision, and deploy a real app with `stripe projects` from one terminal — and reproduce the whole thing from a single Claude Code prompt.
Building an autonomous AI Twitter Agent
In this article, we'll build a completely autonomous AI agent that: finds the latest top story generates a summary and cover image tweets about the story using one of the most modern, convenient…
Building Email Analysis Agent with DeepSeek
Imagine having an AI assistant that could automatically analyze incoming emails, understand attached documents and suggest professional responses - all while maintaining the context of the…
RAG Chatbot for Instagram with Upstash Workflow and Hono
In this guide, you'll learn how to create a RAG chatbot using Upstash Workflow and Hono without making your users wait long for a response on Instagram. You'll need the following: Node.js 18 or later…
Working with Server Actions
See the clap count at the bottom left ↙? That’s Claps. In this tutorial, we will understand Server Actions and build a similar component for your app together. Feel free to jump to Project Setup if…
Session Management in Next.js Using Redis
In this guide, we will walk through session management in a Next.js app using Upstash Redis by learning what a “session” means in a web application, why Redis is a go-to choice for session…
Working with React Server Components
In this tutorial, we will understand React Server Components and with that knowledge, build a simple view counter for your app together. Feel free to jump to Project Setup if you want to go ahead…
Building a Newsletter App with Upstash Workflow and Redis
In this blog, we will build a newsletter app where users will be able to subscribe and select how often they want to recieve their newsletters. We will use Upstash Redis to store the subscription…
Using Server-Sent Events (SSE) to stream LLM responses in Next.js
AI-powered applications that respond quickly enhance the user experience by making them feel heard and seen, instantly. With streaming, you can create such chatbots that instantly address queries or…
Semantic Search Engine for Docs Using Upstash
Welcome to a new blog post. In this blog, we will create a semantic search engine applicable to any repository on Github using Upstash Vector. Semantic search basically means "searching with…
Building a Tweet Scheduler using Upstash
In this step-by-step guide, I talk about how I built a Tweet Scheduler using Upstash QStash, Upstash Redis, Next.js Server Actions and Vercel. Scheduling Twitter posts helps you maintain a consistent…
Building an Article Recommendation System with Upstash
Have you used Google or Perplexity.ai? Do you wonder how they are able to show search results that are latest and include links to online articles? Well, in this guide you'll learn how to create such…
Build a Subscription Service for your NextJS & Prisma App with QStash
The most common business model in building a Saas is a subscription model where users pay a certain fee to use your service in a specified time interval. In this article, we will go through the…
Building your own RAG chatbot with Upstash
In this post, I talk about how I built an open-source Custom Content RAG Chatbot with Upstash Vector, Upstash Redis, Hugging Face Inference API, Replicate LLAMA-2-70B Chat model, and Vercel. Upstash…
Build your own Message Queue with Redis and Typescript
Learn to build a high-performance message queue with Redis. Discover key steps for setup, message handling, and best practices in this concise guide.
Building Real-Time Notifications with Upstash Redis, Next.js Server Actions and Vercel
In this post, I talk about how I built real time notifications using Server-Sent Events with Upstash Redis, Next.js Server Actions and Vercel. Leveraging message channels in Upstash Redis can significantly enhance the communication architecture of your applications, making them more responsive and dynamic
Make your own HackerNews summarizer with OpenAI, NextJS and Upstash
Craft your own HackerNews summarizer using OpenAI, NextJS and Upstash Redis/Qstash. Let's hack it!
Building an AI Chatbot trained on custom content with LangChain, Faiss and Next.js
In this post, I talk about how I built an open-source Custom Content AI Chatbot with Upstash, Next.js, LangChain and Fly.io. Upstash helped me to schedule model training, offered way of generous rate…
Would You Rather Game with LangChain, Redis, and the Query SDK
Redis is often used to speed up IO-based operations by providing a cache layer that stores data in-memory. Compared to traditional, relational databases, Upstash Redis boasts significantly faster…
Decouple Webhook Processing with QStash on Next.js
In this article I will show you how to decouple the processing of incoming webhook data on your Next.js webapp. We will be using QStash to act as our message queue. By implementing this decoupling,…
Scheduling emails in the user's timezone using QStash
At docsly, we launched a new feature to send email notifications to users with a summary of all the feedback they received in the last week or month. Sending emails isn't a new problem, but we wanted…
Building a Chat Application using Upstash Kafka, Redis and Next.js
In this blog post, we will be creating a messaging application that allows users to create message clients and chat room. Additionally, users will be able to access past messages. The project…
Build a Comment Section for your NextJS blog using Redis and NextAuth
We will build a comment section for your blog in this tutorial️. The tech stack we will be: NextJS 13 (in App dir) NextAuth (for Authentication) Upstash Redis (for storing comments) SWR (for Caching…
Adding a View Counter to your Next.js Blog
Inspired by Lee's blog, where every blog post is showing the number of views it has, I wanted to do something similar for my page. I'm also using Next.js 13 with the new app router but instead of…
AI Powered Text Generator using Next.js, Replicate and Redis®
With AI becoming more accessible, companies like Replicate have made it easier to integrate machine learning models into projects seamlessly. In this article, I'm going to discuss how I built…
Serverless Event Sourcing and CQRS with Next.js and Upstash
Microservices are a widespread software architecture, and with serverless technologies that allow for granular deployments, they have become even more critical. Event sourcing and command query…
Protecting your mailbox with @upstash/ratelimit
In today's digital age, email has become an essential part of our daily lives. From personal communication to business marketing campaigns, email is an effective way to reach out to your audience.…
Sync Redis state to your database using QStash
In a previous article, we discussed how we can use Redis to store the state of your user's quota on a full-stack Next.js app. Doing this allows us to improve the performance of our application, as…
Building Reminders for WhatsApp (GPT Online) using QStash
QStash is a task scheduler and message queue system designed for serverless environments. It's a valuable tool for developers as it allows them to set up automated workflows that run at specific…
Traffic Management for Next.js Apps Using Vercel Edge and Upstash Edge Flags
In this post, we will show how to block the traffic to your web app from a country. You can apply the same logic to manage traffic with other filters (IP address, user-agent etc). We aim a decoupled,…
Realtime Code Sharing with Upstash Redis
Did you ever wonder how platforms like Codeshare are built? Did you ever try to tackle the challenges of scaling a service like that while maintaining a good developer experience for yourself? When I…
Using Edge Flags in Next.js Middleware
Edge-Flags allow you to easily manage feature flags for your serverless applications. It's built on top of Upstash Redis with powerful geolocation rules. Today I'll show you a very simple example of…
Build a Photo Restoration App Using Replicate, Next.js and Upstash
For this blog post, we'll make a few assumptions before continuing, but you should ideally have: An Upstash account where you have a Redis instance created An Replicate account with access to your…
How Upstash is powering EnvShare
envshare.dev is an open source project allowing developers to share environment variables securely with anyone. You can upload your file or type in your environment variables and they will be…
Rate Limiting Your Next.js App with Vercel Edge
In this article, I will guide you through the process of implementing rate limiting in your web application utilizing Vercel Edge Middleware and the @upstash/ratelimit library. The latter makes use…
Announcing Edge Flags
Whether you want to ship without breaking things, run A/B tests or just want to test in production, feature flags are a great way to dynamically change the behaviour of your app without redeploying.…
Using Machine Learning to Bring Your Stories to Life (with OpenAI and Next.js)
For this blog post, we'll make a few assumptions before continuing, but you should ideally have: An Upstash account where you have a Redis and QStash instance created An OpenAI account with access to…
Serverless Realtime Analytics for Next.js with Vercel Edge, Upstash Kafka and Tinybird
In this article, we will build an end to end pipeline to analyze our web site traffic on real time. At the end we will be able to query the traffic coming to our Next.js application. We will run a…
Build an authenticated API with Next.js API Routes and Upstash Redis
In this article we will build a minimal but fully functional authenticated Rest API service, leveraging Next.js API Routes and Upstash Redis, that we will use as a superfast storage/cache system both…
Periodic Data Updates with Next.js and Vercel Serverless Functions
For many applications, there is a need to insert or update data in your database regularly. For example fetching metrics from somewhere or tracking the price of items. You might want to update these…
Next.js Edge API Routes and Serverless Redis on Vercel
Recently, the Next.js team has announced Next 12.2. The most exciting news for me is the Edge API Routes. Edge API Routes enable developers to run their APIs at edge locations. This is great news if…
Rate Limiting Next.js API Routes using Upstash Redis
In this article, we will show how to rate limit your Next.js API routes using the Upstash Rate limit SDK Create a Redis database using Upstash Console or Upstash CLI. Copy the and for the next steps.…
Preference Storage for DApps using Metamask with Next.js
Web3 applications such as DAOs and DApps are getting more and more popular. By the premises of Web3, these platforms are supposed to provide a more personal and customized experience for their users…
Serverless Rate Limiting
Maintaining your system's availability is one of the most critical tasks for any product. Unfortunately, people might abuse it by overwhelming your resources, or you want to limit the usage and…
Announcing Upstash Chatbox
Instant, interactive communication is crucial for satisfactory user experience. This is why many companies provide a live chatbox widget on their websites. This is a chatbox widget, alongside with…
Feedback Widget for Next.js Applications
User feedback is important to guide product decisions. We built a widget to help you get feedback from your users. It is a React component which calls Next.js API as its backend. The backend API…
Next.js Authentication with NextAuth and Serverless Redis
Next.js is one of the most popular frontend frameworks with React at its core. It can generate static HTML or render dynamically on the client and server. This makes it a versatile tool for…
Waiting Room for your Next.js App Using Edge Functions
In this post, we will create a waiting room for your Next.js application using Vercel Edge functions and Upstash Redis. You can check the source code and the demo app. The waiting room is useful when…
Getting started with Next.js Edge Functions
Today, the Vercel team announced the Next.js Edge functions. Edge functions allow developers to run their code at the servers distributed globally. This means your code will be executed at the…
The Most Minimalist Next.js TODO app
In this article, we will build a Serverless Next.js based TODO application. We will try our best to make it minimalist. It will not have any database connection. It will not have any extra dependency…
Speed up your Next.js application with Redis
Next.js is a very successful web framework which brings together server side rendering and static site generation. SSG speeds up your web site thanks to CDN caching meanwhile SSR helps you with SEO…
Roadmap Application with Next.js, Redis and Auth0
We have been developing example applications to showcase how easy and practical to develop serverless applications with Redis. So far, the most popular of those examples is the Roadmap Voting…