How To Build A High-Performance Serverless App In Under Two Hours

Serverless architecture allows developers to build and scale applications without managing any infrastructure. In this 2600+ words expert guide, you will learn how to develop a fully-functional link shortener app using Next.js and deploy it on Vercel‘s serverless platform.

Introduction to Serverless Computing

Before we start building, it‘s important to understand what serverless is and how it compares to traditional hosting models:

Serverless describes the concept where the cloud provider manages infrastructure dynamically based on usage. Key properties:

No need to provision hosts/VMs upfront
Auto-scales to handle any traffic peaks
Pay-per-execution pricing model
Event-driven and asynchronous

This contrasts with containers and virtual machines:

Property	Containers	VMs	Serverless
Host provisioning	Manual	Manual	Fully automated
Scalability	Manual	Auto-scale groups	Auto-scale inherently
Resource control	High	High	None (managed)
Latency	Low	Medium	Low during execution
Pricing model	Always-on	Always-on	Per-execution

As this comparison shows, serverless simplifies app deployment by automating hosting, scaling, and infrastructure concerns. The pay-per-execution model also minimizes costs for infrequent workloads.

Our link shortener app fits nicely into the serverless paradigm because traffic is often sporadic based on user inputs. Backends for many modern web and mobile apps tend to have similarly bursty execution patterns.

Project Setup

We will build the application using Next.js, TypeScript, and Ant Design React UI library. Let‘s get them installed:

npx create-next-app yals
cd yals

npm install typescript @types/react @types/node
npm install antd

Next we need to update file extensions for TypeScript support:

mv pages/index.js → index.tsx
mv pages/_app.js → _app.tsx

The tsconfig.json file enables strict type checking:

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true, 
    "jsx": "preserve",
    "lib": ["dom", "es2017"]
  }
}

And finally importing Ant Design in pages/_app.tsx:

import { Layout } from "antd"
import "../styles/globals.css"
import "antd/dist/antd.css"

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} /> 
    </Layout>
  )
}

This completes the foundation for building our React application. Next let‘s set up the database before developing the main app functionality…

// truncated for length