OnURL is an open-source URL shortener template built with Next.js, TypeScript, and Tailwind CSS that lets you shorten and share long URLs from your own deployed web app.
What is OnURL?
OnURL is a URL shortener web application built on the Next.js React framework and written in TypeScript, with a Tailwind CSS–styled interface. It takes a long URL as input and outputs a short, shareable link stored in a PostgreSQL database via Drizzle ORM. The project is open source and has a live demo deployed to Vercel at onurl.vercel.app.
The template bundles an entire tech stack: Zod for schema validation, React Icons for iconography, react-share for social media sharing buttons, and unDraw illustrations for the UI. Code quality tooling includes ESLint and Prettier, and deployment is handled through Vercel.
Key Features
- Short link generation — Accepts a destination URL and creates a shortened link that redirects to it, with records persisted in PostgreSQL.
- Next.js framework — Provides server-side rendering, routing, and API routes within a single TypeScript project.
- Tailwind CSS styling — Utility-first CSS for rapid custom styling of the front end.
- Zod schema validation — Validates form input URLs before submission, reducing invalid entries.
- Social share buttons — Uses react-share to allow visitors to share shortened links directly to Facebook, Twitter, and other platforms.
- PostgreSQL + Drizzle ORM — Typed SQL queries and a migration workflow using
pnpm db:generateandpnpm db:migrate. - Vercel deployment — Configured for zero-config deployment to Vercel, with a live demo available.
Who is it for?
- Developers who want a customizable, self-hosted URL shortener to deploy for their own projects.
- Teams and marketers needing a branded short link service they control, with sharing capabilities built in.
- Learners who want a full-stack Next.js reference app demonstrating Drizzle ORM, PostgreSQL, and Tailwind integration.
What can you do with OnURL?
- Self-host your own shortener: Deploy the app on Vercel or any Node.js host and manage your own short links without relying on third-party fee-based services.
- Share links on social media: Use the built-in react-share buttons to post shortened links to popular platforms.
- Explore a modern Next.js codebase: Study how the project wires up Next.js, TypeScript, Tailwind, Zod, Drizzle, and PostgreSQL in a production-style structure.
How does OnURL work?
Set a PostgreSQL connection string as POSTGRES_URL in your .env.development or .env.production file. Then run pnpm install, generate migrations with pnpm db:generate, apply them with pnpm db:migrate, and launch in development with pnpm dev. For production, run pnpm build followed by pnpm start. The app then accepts a long URL and returns a short link, with social sharing as a one-click action.
Alternatives
- Bitly — Adds link analytics, branded domains, and an enterprise feature set.
- TinyURL — A free, simple shortener with no account required.
FAQ
Is OnURL free?
OnURL is open source, so the code is free to use. You only pay for your own infrastructure, such as a Vercel deployment and a PostgreSQL database.
What database does OnURL use?
OnURL uses PostgreSQL, accessed through Drizzle ORM. Database schema changes are managed by generating and running SQL migrations with pnpm scripts.
How do I deploy OnURL?
Create a production build with pnpm build after setting POSTGRES_URL in .env.production, then start it with pnpm start. The project is also configured for Vercel deployment.
Does OnURL offer link analytics?
The README does not list any analytics or click-tracking features. OnURL focuses on shortening and sharing URLs, with the tech stack adding validation, styling, and social share buttons.
