How to Create Custom Short Links with Referrer Tracking Using Next.js

If you're selling digital products on platforms like Gumroad or LemonSqueezy, having control over your marketing and traffic data is crucial. Tracking sales from specific referrers is essential to ensure that your data is accurate. However, using short links from your own website instead of the product link directly can sometimes compromise this accuracy.

In this post, I'll show you how to use custom short links with Next.js while still preserving the original referrer information.

Why Use Custom Short Links?

Before diving into the code, let's go over some of the benefits of using custom short links with referrer tracking:

• Branding: A branded short link on your own domain (e.g., https://yourdomain.com/product) looks professional and gives you more control over the user experience.
• Tracking: By attaching referrer data to the short link, you can analyze traffic sources more accurately. For example, if you share different versions of the link for the same product, you can override the referrer to gain more insights.
• SEO: Hosting the short link on your domain helps build backlinks, which can improve your website's SEO. Even though users are ultimately redirected to Gumroad, search engines still recognize the link as part of your website.
• Control: Having control over the link you share allows you to change the destination in the future if needed, without breaking existing links.

The Code: Dynamic Referrer Tracking

Here’s a simple Next.js page component that creates a customizable short link for your Gumroad product. It tracks referrers and allows custom referrer data to be passed through query parameters.

Place it in your Next.js app router directory, for example under app/v2e/page.tsx:

How It Works

The short link URL using the code above would be something like https://hilars.dev/v2e?r=optional-referrer.

Here’s a breakdown of what happens when a user opens the link:

1. Headers and Referrer: The headers object captures the request headers, including the Referer header, which contains the URL of the page the user visited before landing on this page. If no referrer is found, the code defaults to a specific fallback URL (https://hilars.dev/v2e).
2. Custom Referrer: If the referrer is overridden by a query parameter (e.g., ?r=optional-referrer), this takes precedence over the browser's Referer header. This feature is useful for creating custom links for different marketing campaigns.
3. URL Validation: The code ensures that the referrer starts with http:// or https://. This format is required by Gumroad for tracking. In my tests, even arbitrary text works as long as it begins with http(s)://.
4. Redirect: After processing the referrer, the user is redirected to the specified Gumroad product page. The referrer information is passed along as a query parameter to Gumroad, enabling accurate tracking of the traffic source.

Conclusion

I use short links like these to make my products easier to share on social media. It’s much simpler to share a short link like https://hilars.dev/v2e compared to a long Gumroad URL such as https://builditn0w.gumroad.com/l/chrome-manifest-v2-phaseout/BUILD.

One of the hidden advantages of hosting these short links on your own domain is the SEO benefit. Every time someone shares your link or a search engine crawls it, they’re effectively pointing back to your domain. Over time, these backlinks help improve your website’s authority and search engine ranking.

Additionally, by controlling the URL, you ensure that you have the flexibility to update the destination of the short link in the future. If you ever switch platforms from Gumroad or update the product page, you can simply update the redirect target without losing traffic.