Deploy your own short URL to Vercel Edge Middleware

A year ago, I created a vercel shorturl project that used Vercel serverless.

Deploy your own short URL to Vercel

Thew ・ Dec 1 '20

#showdev #news #vercel

This year, I updated it to use Vercel Edge Middleware! Deploying the redirect function globally to the edge will result in a reduction of latency.

To get started, just clone the template repository, edit redirects.yml and deploy to Vercel. You don't need to edit middleware.js, install dependencies, or run build command.🎉

Or click the below button to deploy to Vercel immediately!😊

For the record, the version of the underlying vercel-shorturl library is v0.3.x.

Features

The main features remain the same. Here is an example redirects.yml showing all of the features.

- from: /me to: https://github.com/ThewBear status: 308 # Change status code ex. 301, 302, 307 (Default), 308 - from: /google/:q # Match exactly one ex. /google/recursion to: https://google.com/search?q=:q - from: /vercel/:slug* # Match zero or more ex. /vercel /vercel/docs /vercel/solutions/nextjs to: https://vercel.com/:slug - from: /twitter/:slug? # Match Zero or one ex. /twitter /twitter/thewdhanat to: https://twitter.com/:slug - from: /github/:slug+ # One or more ex. /github/ThewApp github/ThewApp/vercel-shorturl to: https://github.com/:slug - from: /dev/:slug1/:slug2 # Multiple match ex. /dev/p/information to: https://dev.to/:slug1/:slug2 - from: /google to: https://google.com/search?q=:q query: action: search # Must have this exact query q: :q # And this match in query ex. /google?action=search&q=recursion - from: /dev to: https://dev.to/:user query: u: :user? # Optional match ex. /dev /dev?u=thewbear 

Custom page

You can override home page and 404 page by placing index.html and 404.html in project root.

Analytics

vercel-shorturl can automatically send an event to Amplitude, just set Amplitude environment variable to your HTTP API key.

Demo

Demo is deployed with the example redirects.yml.

Here is some route you can try:

• /me
• /google/path-parameters
• /google?action=search&q=some-query
• /dev?u=thewdhanat

See more supported routing features in the example redirects.yml.

Migration guides

For v0.1.x user, just clone the latest template repository, and paste your old redirects.yml. It should just work.🎊