7 posts tagged with "nextjs"

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 simply sends the feedback data to Upstash Redis database. Also, you will be able to see and manage the submitted data in Upstash Console Integrations Page

When you add the component to your Next.js page, an icon will be displayed on bottom right corner. When clicked, feedback form will be visible. Check the demo to see how it works.

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 applications and websites of every type. And the best thing is, it’s open-source, and you can use it free of charge!

NextAuth is a third-party library for Next.js that helps you integrate different identity providers and databases. You can save your users time at sign up and still have all their essential account information in your chosen database. NextAuth comes with support for over 50 authentication providers, including GitHub, Google, Facebook, Coinbase, and many more.

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.

Waiting Room?​

The waiting room is useful when you want to limit the number of active visitors to your website so as not to overload your resources.

In our implementation, you will be able to set a maximum number of active visitors. There will two parameters to control the traffic:

• Max website capacity: Max number of visitors in the website at the same time?
• Max session timeout: Max number of seconds that a visitor can stay idle

What are Next.js Functions? Why are they important?​

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 location that is closest to your user. You can think of edge functions as the serverless functions which are run at the CDN infrastructure. Edge functions have the following advantages:

• Global low latency: Because the code is replicated to many global locations (PoP: points of presence), a user anywhere in the world will experience low latency. Each client will fetch the response from the nearest server.
• No cold start: Edge infrastructure providers use V8 Isolates which eliminates the cold starts. This means much faster startups.

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 other than Next.js. It will not have any buttons. Besides, minimalism is cool and clean, I love it because I am a lazy developer :)

Why do we avoid database connections?​

Next.js is a modern framework which enables the front-end developers to develop full stack applications. Serverless functions have an important role in simplifying backend development for Next.js developers. As you probably know, serverless functions do not like database connections due to their stateless nature. See here and here as examples of problems of database connections inside serverless functions.

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 and dynamic data.

Server side rendering is a great feature which helps you to write full stack applications. But if you are not careful, the performance of your Next.js website can be affected easily. In this blog post, I will explain how to leverage Redis to speed up your Next.js API calls. Before that I will briefly mention a simpler way to improve your performance.

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 Application. As we started to use it in real life, there were two main problems:

• We started to see spam entries. The application does not have an admin dashboard, so one had to connect to Redis to delete an entry.
• We released some features in the list but there was no way to flag them as released and remove from voting list.