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
A/B Testing Simple
Run A/B tests with Edge Functions
Add Header
Adding a header with Edge Functions
API Rate Limit
Use Upstash to rate limit your API at the Edge
API Rate Limit and Tokens
IP blocking and rate limiting using API keys
Basic Auth
Password protection for your pages using Edge Functions
Bot Detection with Botd
Use the browser library Botd to enable bot detection
Bot Protection with Datadome
Real-time security protections at the edge with DataDome
Cookies
An example on how to get and set cookies in the edge
CORS : Cross-Origin Resource Sharing
Simple example using Cross-Origin Resource Sharing
Crypto Web API
An example demonstrating how to utilize Crypto Web APIs at the Edge
Feature Flags Apple Store
feature-flag-apple-store
Feature Flag with Configcat
Unlock Feature Flag capabilities with Configcat at the Edge
Feature Flag with Split.io
Unlock Feature Flag capabilities with Configcat at the Edge
Geolocation
Access the user's location through the event.request.geo object
Geolocation with Country Block
Block certaing requests based on their country of origin
Hostname Rewrites
Support a multi-tenant infrastructures using Edge Functions
I18n Example
This example shows how to redirect users based on i18n configuration
Image Response
An example generating images through the Edge
IP Blocking with Datadome
Use DataDome's real-time security protections for your website
JSON Response Example
An example middleware that returns a simple JSON response
JWT Authentication
Example using JWT authentication at the Edge
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.
Power Parity Pricing
PPP strategies using request geolocation object at the Edge
Power Parity Pricing Strategies
PPP strategies using request geolocation object at the Edge
Filtering Query Parameters
Remove query params from request paths
Edge Redirects with Upstash
Examples of how redirects that get evaluated at the Edge using Upstash
Rewriting at the edge using Upstash
How to avoid calling several services by pre-checking stock at the edge using a redis cache
user-agent based rendering
How to render a different page based on the user-agent header
Add Auth with Open Source Ory
This example shows how to add authentication to your Lambda functions using the open source Ory Kratos project.
ContentStack Commerce
This examples shows how to use ContentStack SDK to create apps with Next.js and Vercel.
Combining data fetching strategies
How to use different data fetching strategies to avoid switching from static pre-rendering
Vercel Domains API
How you can leverage Vercel's Domains API to add and remove domains programmatically from your Platforms on Vercel project.
Using next/image fallback
How to use a fallback image while using the next/image component.
Lazy Loading Images with next/image
How to use lazy loading with next/image.
Loading web fonts
How to load custom web fonts without compromising performance.
Mint an NFT
How to mint an NFT using Next.js and Moralis.
Turborepo monorepo
Monorepo example with one app and the packages
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.
Pagination with SSG
How to implement page based pagination with SSG.
Reduce next/image bandwidth usage
How to reduce bandwidth and processing costs when using different layouts.
Static methods fetching data cache
How to use file system cache to share responses on pre-render static methods at build time
Ads with next/script
How to lazy load ads using next/script.
loading script strategies
How to use different strategies for next/script.
Static Tweets (Tailwind)
How to generate static tweets using Tailwind CSS & getStaticProps in Next.js
Sub-domain authentication
How to secure sub domains using next-auth
Data fetching in web 3
How to fetch data from the blockchain in Next.js.
Sessions in web 3
How create sessions in Next.js with Metamask and next-auth