Start here. Build anything.

Vercel Examples

Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.

A/B Testing with Google Optimize

Google Optimize experiments at the Edge

ab-testing

A/B Testing Simple

Run A/B tests with Edge Functions

ab-testing

Add Header

Adding a header with Edge Functions

basic

API Rate Limit

Use Upstash to rate limit your API at the Edge

rate-limitupstash

API Rate Limit and Tokens

IP blocking and rate limiting using API keys

rate-limit

Basic Auth

Password protection for your pages using Edge Functions

authbasic

Bot Detection with Botd

Use the browser library Botd to enable bot detection

bot-protection

Bot Protection with Datadome

Real-time security protections at the edge with DataDome

bot-protection

Cookies

An example on how to get and set cookies in the edge

basic

CORS : Cross-Origin Resource Sharing

Simple example using Cross-Origin Resource Sharing

basic

Crypto Web API

An example demonstrating how to utilize Crypto Web APIs at the Edge

basic

Feature Flags Apple Store

feature-flag-apple-store

feature-flag

Feature Flag with Configcat

Unlock Feature Flag capabilities with Configcat at the Edge

feature-flag

Feature Flag with Split.io

Unlock Feature Flag capabilities with Configcat at the Edge

feature-flag

Geolocation

Access the user's location through the event.request.geo object

geo

Geolocation with Country Block

Block certaing requests based on their country of origin

geo

Hostname Rewrites

Support a multi-tenant infrastructures using Edge Functions

basic

I18n Example

This example shows how to redirect users based on i18n configuration

geo

Image Response

An example generating images through the Edge

basic

IP Blocking with Datadome

Use DataDome's real-time security protections for your website

ip-blocking

JSON Response Example

An example middleware that returns a simple JSON response

basic

JWT Authentication

Example using JWT authentication at the Edge

auth

Next News - Rewrites

This is an example showing a hacker news clone using Next.js. Edge functions are used to show how a rewrite from `/` to `/news/1` works.

demo

Power Parity Pricing

PPP strategies using request geolocation object at the Edge

commerce

Power Parity Pricing Strategies

PPP strategies using request geolocation object at the Edge

commerce

Filtering Query Parameters

Remove query params from request paths

basic

Edge Redirects with Upstash

Examples of how redirects that get evaluated at the Edge using Upstash

basic

Rewriting at the edge using Upstash

How to avoid calling several services by pre-checking stock at the edge using a redis cache

best-practices

user-agent based rendering

How to render a different page based on the user-agent header

best-practicesbasic

Add Auth with Open Source Ory

This example shows how to add authentication to your Lambda functions using the open source Ory Kratos project.

auth

ContentStack Commerce

This examples shows how to use ContentStack SDK to create apps with Next.js and Vercel.

demo

Combining data fetching strategies

How to use different data fetching strategies to avoid switching from static pre-rendering

best-practices

Vercel Domains API

How you can leverage Vercel's Domains API to add and remove domains programmatically from your Platforms on Vercel project.

best-practices

Using next/image fallback

How to use a fallback image while using the next/image component.

best-practices

Lazy Loading Images with next/image

How to use lazy loading with next/image.

basicbest-practices

Loading web fonts

How to load custom web fonts without compromising performance.

best-practices

Mint an NFT

How to mint an NFT using Next.js and Moralis.

web3

Turborepo monorepo

Monorepo example with one app and the packages

basicbest-practices

On-demand ISR

How to use on demand ISR to revalidate content when a user clicks a button or a webhook calls an API route.

best-practices

Pagination with SSG

How to implement page based pagination with SSG.

best-practices

Reduce next/image bandwidth usage

How to reduce bandwidth and processing costs when using different layouts.

best-practices

Static methods fetching data cache

How to use file system cache to share responses on pre-render static methods at build time

best-practices

Ads with next/script

How to lazy load ads using next/script.

best-practices

loading script strategies

How to use different strategies for next/script.

basicbest-practices

Static Tweets (Tailwind)

How to generate static tweets using Tailwind CSS & getStaticProps in Next.js

demo

Sub-domain authentication

How to secure sub domains using next-auth

auth

Data fetching in web 3

How to fetch data from the blockchain in Next.js.

web3

Sessions in web 3

How create sessions in Next.js with Metamask and next-auth

web3