​
1. Prerequisites

To follow this guide, you will need to:

​
2. Install and initialize the Dub TypeScript SDK

1

Install

Install the Dub TypeScript SDK using your preferred package manager:

npm install dub
2

Initialize

Then, initialize the Dub TypeScript SDK with your API key.

lib/dub.ts
import { Dub } from "dub";

export const dub = new Dub({
  token: process.env.DUB_API_KEY, // optional, defaults to DUB_API_KEY env variable
});

You can now use the dub object to interact with the Dub API.

import { dub } from "./lib/dub";

Let’s create a short link using the Dub TypeScript SDK.

app/api/links/route.ts
export async function POST() {
  try {
    const link = await dub.links.create({
      url: "https://google.com",
    });

    return Response.json(link);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

Optionally, you can also pass an externalId field which is a unique identifier for the link in your own database to associate it with the link in Dub’s system.

app/api/links/route.ts
export async function POST() {
  try {
    const link = await dub.links.create({
      url: "https://google.com",
      externalId: "12345",
    });

    return Response.json(link);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

This will let you easily update the link or retrieve analytics for it later on using the externalId instead of the Dub linkId.

Dub TypeScript SDK provides a method to upsert a link – where an existing link is updated if it exists, or a new link is created if it doesn’t. so you don’t have to worry about checking if the link already exists.

app/api/links/route.ts
export async function PATCH() {
  try {
    const { shortLink } = await dub.links.upsert({
      url: "https://google.com",
    });

    return Response.json({ shortLink }); // will always be the same short link
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

This way, you won’t have to worry about checking if the link already exists when you’re creating it.

Let’s update an existing link using the Dub TypeScript SDK.

You can do that in two ways:

  • Using the link’s linkId in Dub’s system.
  • Using the link’s externalId in your own database (prefixed with ext_).
app/api/links/route.ts
export async function PATCH() {
  try {
    // Update a link by its linkId
    const { shortLink } = await dub.links.update(
      "link_rWOKByP0bRMrstK8e4HPjprJ",
      {
        url: "https://www.google.uk", // new URL
      }
    );

    // Update a link by its externalId
    const { shortLink } = await dub.links.update("ext_12345", {
      url: "https://www.google.uk", // new URL
    });

    return Response.json({ shortLink });
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

Dub allows you to retrieve analytics for a link using the Dub TypeScript SDK.

app/api/analytics/route.ts
import { ClicksTimeseries } from "dub/models/components";

export async function GET() {
  try {
    // Retrieve the timeseries analytics for the last 7 days for a link
    const response = await dub.analytics.retrieve({
      linkId: "clv3o9p9q000au1h0mc7r6l63",
      interval: "7d",
      groupBy: "timeseries",
    });

    const timeseries = response as ClicksTimeseries[];

    return Response.json(timeseries);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

Similarly, you can retrieve analytics for a link using the externalId field.

app/api/analytics/route.ts
// Retrieve the timeseries analytics for the last 7 days for a link
const response = await dub.analytics.retrieve({
  externalId: "ext_12345",
  interval: "7d",
  groupBy: "timeseries",
});

const timeseries = response as ClicksTimeseries[];

​
7. Examples

Next.js Example

See the full example on GitHub.

Was this page helpful?

IntroductionRemix