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 ・ 2 min read

#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.🎊