Build the future of web development with Next.js Edge Rendering and globally distributed database

Next.js allows you to build React applications. Recently, it gained a lot of popularity because of the great developer experience and many other features that make it a joy to use.

In this article, we will build a state-of-the-art web application with Next.js Edge and Upstash Redis. With the recent developments in Edge computing, we will use the newest features from Next.js (Edge SSR and Edge API Routes) to build an application that is blazing fast, fully distributed and scalable. And, the good news is that it's 100% serverless with no server management.

To illustrate the power of edge computing, we will create a simple URL shortener application. A URL shortener is a service that takes a URL and converts it into a shorter URL. This is useful when you want to share a URL on Twitter or other social media platforms. It's also useful when you want to hide the actual URL from the user.

Edge Computing

In the past, Static Site Generation (SSG) in Next.js was served from the edge with the help of CDN. The static HTML content is deployed around the world and the user gets the content from the nearest edge location. It is a great way to reduce the latency and improve the performance of the application.

For dynamic content, Next.js provides Server Side Rendering (SSR). The content is generated on the server and sent to the client. In the past, compared to SSG, SSR was only deployed in a single location for an easy setup.

With the latest version of Next.js (Next.js 12.2), we have access to the Edge Rendering. The feature is still in experimental mode, but you can already try it out. This allows to deploy SSR and API routes at the edge. So, the dynamic content can now be served from multiple locations in one configuration.

After moving to the edge, there is a bottleneck with the database. Due to the complexity and operational cost, it was hard to deploy the database in multiple locations. But, with recent and modern database providers like Upstash, we can now deploy a global Redis database in one click. The perfect match for the Edge Rendering/Computing. On top of that, Upstash is a serverless database, so you don't have to worry about the infrastructure.

Edge Server-Rendering

We'll use Next.js Boilerplate as a starting point. It's a great way to start with Next.js with TypeScript and Tailwind CSS. It's also configured with ESLint, Prettier, Husky, Jest and Cypress. You can find the source code on GitHub at Next.js Boilerplate.

First, let's create a new admin folder with a new Page named src/pages/admin/index.tsx:

import type { InferGetServerSidePropsType } from 'next';const Index = (  props: InferGetServerSidePropsType<typeof getServerSideProps>) => <div>{props.runtime}</div>;export const getServerSideProps = async () => {  const runtime = process.env.NEXT_RUNTIME || '';  return {    props: { runtime },  };};export const config = {  runtime: 'experimental-edge',};export default Index;

The runtime configuration can be set on all pages when you want to deploy at the edge. By default, the runtime is set to nodejs. But, for Edge Rendering, we need to set it to experimental-edge.

After deploying the application, you can see that the page is rendered at the edge. You can check it out by opening the page in the browser and the server should return edge.

Read the rest on Medium