Next.js 15 URL Shortener with App Router and Shadcn UI

Live Link: url-shortner-time-based-zia-unkey.vercel.app/

This project showcases a URL shortener service built with Next.js 15, leveraging the new App Router and the shadcn/ui component library. Additionally, it integrates with Unkey.com for enforcing rate limits and API key validation. It also provides tiered access to shortened URLs and introduces a time-based expiration feature, where URLs are automatically deleted one minute after creation.

Key Features

• Next.js 15 with the new App Router
• URL shortening with variable short URL lengths based on user tier
• Rate limiting and API key validation based on Unkey configurations
• Tiered access (basic and premium users)
• UI components from the shadcn/ui library
• Time-based URL expiration (1 minute after creation)

Setup and Configuration

1. Install project dependencies:

   Copy

   1npm install

   or

   Copy

   1yarn install

   or

   Copy

   1bun install

2. Configure environment variables: Create a .env file in the project root with the following content:

   Copy

   1NEXT_PUBLIC_BASE_URL=http://localhost:3000
   2UNKEY_API_KEY=unkey_some_token
   3UNKEY_API_ID=api_some_id
   4REDIS_URL=https://some-redis-url.upstash.io
   5REDIS_TOKEN=some-redis-token

3. Set up Unkey:

   • Register at unkey.com
   • Create a new API.
   • Add the API key and API ID to the .env file.

4. Set up Upstash:

   • Register at upstash.com
   • Create a new Redis database.
   • Add the Redis URL and token to the .env file.

5. Launch the development server:

   Copy

   1npm run dev

   or

   Copy

   1yarn dev

   or

   Copy

   1bun dev

Using the URL Shortener

• Head over to http://localhost:3000 and enter the URL you want to shorten.
• Select your tier.
• Copy the generated short URL and share it with others.
• Access the original URL by navigating to http://localhost:3000/{shortCode}.
• Note: URLs will expire and be automatically deleted one minute after creation.

Tiered Access and Rate Limiting

• Basic users receive 8-character short codes
• Premium users receive 5-character short codes

Rate limiting can be configured differently for each tier in the code.