add example routes for Dub SDKs

Author: devkiran

typescript/next/.env.example

@@ -0,0 +1,2 @@
+DUB_API_KEY=
+DUB_WORKSPACE_ID=

typescript/next/.gitignore

@@ -0,0 +1,2 @@
+.next
+.env

typescript/next/README.md

@@ -1,36 +1,49 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Dub with Next.js
+
+This example shows how to use Dub with [Next.js](https://nextjs.org/).
 
 ## Getting Started
 
-First, run the development server:
+1. Add your Dub API key and Workspace ID to your `.env` file:
+
+```shell
+cp .env.example .env
+```
+
+```
+DUB_API_KEY=p4z...
+DUB_WORKSPACE_ID=ws_clrei...
+```
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+2. Install dependencies:
+
+```shell
+pnpm install
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+3. Run the Next.js development server:
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```shell
+pnpm run dev
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## Resources
 
-## Learn More
+- [Dub API Reference](https://dub.co/docs/api-reference)
+- [Create API Key](https://app.dub.co/settings/tokens)
+- [Get Workspace ID](https://dub.co/help/article/how-to-get-workspace-id)
 
-To learn more about Next.js, take a look at the following resources:
+## Contributing
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Thanks for taking the time to contribute! Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody and are very appreciated.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+Please try to create bug reports that are:
 
-## Deploy on Vercel
+- _Reproducible._ Include steps to reproduce the problem.
+- _Specific._ Include as much detail as possible: which version, what environment, etc.
+- _Unique._ Do not duplicate existing opened issues.
+- _Scoped to a Single Bug._ One bug per report.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+MIT License

typescript/next/app/api/analytics/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from "next/server";
+import { dub } from "@/dub";
+import { ClicksTimeseries } from "dub/models/components";
+
+export async function GET(req: NextRequest) {
+  try {
+    const result = await dub.analytics.retrieve({
+      linkId: "clv3o9p9q000au1h0mc7r6l63",
+      interval: "7d",
+      event: "clicks",
+      groupBy: "timeseries",
+    });
+
+    const timeseries = result as ClicksTimeseries[];
+
+    return NextResponse.json(timeseries);
+  } catch (error: any) {
+    console.error(error);
+    return NextResponse.json({ error: error.message }, { status: 400 });
+  }
+}

typescript/next/app/api/create-link/route.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from "next/server";
+import { dub } from "@/dub";
+
+export async function POST(req: NextRequest) {
+  try {
+    const result = await dub.links.create({
+      url: "https://www.google.com",
+      externalId: "12345", // Optional
+    });
+
+    return NextResponse.json(result);
+  } catch (error: any) {
+    console.error(error);
+    return NextResponse.json({ error: error.message }, { status: 400 });
+  }
+}

typescript/next/app/api/update-link/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from "next/server";
+import { dub } from "@/dub";
+
+export async function POST(req: NextRequest) {
+  try {
+    // Update a link by its linkId
+    let result = await dub.links.update("clv3o9p9q000au1h0mc7r6l63", {
+      url: "https://www.google.uk",
+    });
+
+    // Update a link by its externalId
+    result = await dub.links.update("ext_12345", {
+      url: "https://www.google.uk",
+    });
+
+    return NextResponse.json(result);
+  } catch (error: any) {
+    console.error(error);
+    return NextResponse.json({ error: error.message }, { status: 400 });
+  }
+}

typescript/next/app/api/upsert-link/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest, NextResponse } from "next/server";
+import { dub } from "@/dub";
+
+export async function POST(req: NextRequest) {
+  try {
+    const result = await dub.links.upsert({
+      url: "https://www.google.com",
+    });
+
+    return NextResponse.json(result);
+  } catch (error: any) {
+    console.error(error);
+    return NextResponse.json({ error: error.message }, { status: 400 });
+  }
+}

typescript/next/dub.ts

@@ -0,0 +1,6 @@
+import { Dub } from "dub";
+
+export const dub = new Dub({
+  token: process.env.DUB_API_KEY,
+  workspaceId: process.env.DUB_WORKSPACE_ID,
+});

typescript/next/package.json

@@ -9,16 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "dub": "^0.30.1",
+    "next": "14.2.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.2.4"
+    "eslint-config-next": "14.2.4",
+    "typescript": "^5"
   }
 }