Link Your Domain to Mastodon with Next.js

I’ve been on Mastodon since 2017, but recently started spending time there as my Twitter network seeks alternatives. Like any other social media profile, you’re likely already linking your profile from your personal site homepage. For Mastodon, you want to add the rel="me" attribute to the link, as described here, to get the verified checkmark on your website on your profile.

Today Jed Schmidt linked to Maarten Balliauw’s post on linking Mastodon to your domain, so anyone could search @anything@yourdomain.com to find your Mastodon account. The WebFinger file you want to serve on your domain at /.well-known/webfinger is the file you get at this URL (for me):

GET https://mastodon.social/.well-known/webfinger?resource=acct:lachlanjc@mastodon.social

While he suggests copying the file onto your site, I wanted my WebFinger served by mastodon.social’s, so I don’t have to update it if anything changes. My site uses Next.js, and their rewrite functionality (it’s similar for any non-Next project on Vercel) comes in handy here. In my next.config.js, I added:

async rewrites() {
     return [
       {
         source: '/.well-known/webfinger',
         destination:
           'http://mastodon.social/.well-known/webfinger?resource=acct:lachlanjc@mastodon.social',
       },
     ]
   },

This is like wildcard domain email address, so similarly to how you can email hey@lachlanjc.com or any other handle, you can search anything@lachlanjc.com on Mastodon to find my profile.