Real-world open-source projects built with Next.js 14 and App Router
Thanks datarockets for giving me an opportunity to write this blog post. You can read this article on their website.
Discover how others build real-world Next.js applications by examining their codebase.
Learning from others' codebases can help you grow as a developer, gain inspiration for organizing your codebase, develop a certain feature, manage CI/CD, and much more. You can learn both best practices and some practices to avoid in real-world scenarios. You can find new technologies that might better solve certain cases.
In this article, you will find a selection of open-source projects built using Next.js and App Router.
Unkey
Unkey is an open-source API management platform for scaling APIs. Unkey provides API key management and standalone rate limiting.
The repository is a monorepo managed via Turborepo. It contains several apps:
- www - marketing website, landing page, blog, etc.
- dashboard - main application
- docs - documentation website
Stack: Turborepo, Tailwind, tRPC, Planetscale, Drizzle ORM, Clerk, React Hook Form, Zod, Resend, Stripe, Mintlify
Cal.com
An open-source Calendly alternative. A scheduling solution that gives you a full-control of your events and data.
They are still in the process of migrating to App Router, which is a good example of how a large-scale app can be migrated to App Router incrementally.
The repository is a monorepo managed via Turborepo. The
main app is located in
apps/web. There, you can
find that it has both app and pages folder. And many routes from pages are
available in app/future folder.
Stack: Turborepo, Tailwind, tRPC, Prisma, Kysely Auth.js, React Hook Form, Zod, Zustand, Tanstack Query, Stripe
Documenso
An open-source DocuSign alternative. A service for signing documents digitally.
The repository is a monorepo managed via Turborepo. It contains several Next.js apps:
Stack: Turborepo, Tailwind, tRPC, Prisma, Kysely Auth.js, React Hook Form, Zod, Resend, Stripe
TypeHero
TypeHero is a platform for enhancing your TypeScript skills via interactive code challenges.
The repository is a monorepo managed via Turborepo. It contains several Next.js apps:
Stack: Turborepo, Tailwind, Prisma, Auth.js, React Hook Form, Zod, Zustand, Tanstack Query, Resend
Dify
Dify is an open-source LLM app development platform. Dify's interface combines AI workflow, RAG pipeline, agent capabilities, model management, observability features and more.
Stack: Tailwind, React Hook Form, Zod, Zustand, SWR
Dub
Dub.co is an open-source URL shortening service and a link management platform. An open-source alternative to Bitly.
The repository is a monorepo managed via Turborepo. The main app is located in apps/web.
Stack: Turborepo, Tailwind, Planetscale, Prisma, Auth.js, Zod, SWR, Upstash, Tinybird, Stripe, Mintlify
Noodle
Noodle is a platform for managing everything to do with students education like note-taking, calendar, task management, grade calculator, flashcards and more.
It's an indie project and still not released yet. But it's a good example of an app built using modern technologies.
Stack: Bun, Tailwind, tRPC, Drizzle ORM, Clerk React Hook Form, Zod, Tanstack Query, Resend
Midday
An all-in-one tool for freelancers, contractors, consultants, and solo entrepreneurs to manage their finances, track projects, store files, and send invoices.
The repository is a monorepo managed via Turborepo. It contains several apps:
- website - marketing website, landing page, blog, etc.
- dashboard - main application, dashboard
- docs - documentation website
Stack: Bun, Turborepo, Tailwind, Supabase, Upstash, React Hook Form, Zod, Zustand, Resend, Mintlify
Morphic
An AI-powered search engine with a generative UI.
Stack: Bun, Tailwind, Vercel AI SDK, OpenAI, Tavily AI, Serper, Jina AI, Upstash
Supabase
Supabase is an open source Firebase alternative.
Supabase doesn't use fully App Router but their new apps uses it. The repository is a monorepo managed via Turborepo. It contains several Next.js apps:
- database-new - some new app by Supabase. It uses App Router.
- www - marketing website, landing page, blog, etc. It doesn't use App Router yet.
- studio - main application. It doesn't use App Router yet.
- docs - documentation website. It doesn't use App Router yet. There is PR for migrating it to App Router - link.
Stack: Turborepo, Tailwind, OpenAI, React Hook Form, Zod, Tanstack Query, Stripe
OpenStatus
OpenStatus is an open-source synthetic and frontend performance monitoring service.
The repository is a monorepo managed via Turborepo. It contains several apps:
Stack: Turborepo, Tailwind, tRPC, Upstash, Tinybird, Turso, Drizzle ORM, Auth.js, React Hook Form, Zod, Stripe, Resend, Mintlify
Skateshop
An open source e-commerce skateshop built with modern approaches and technologies.
It's not a real-world application but a good example of how to develop modern Next.js application.
Stack: Tailwind, Clerk, Upstash, OpenAI, Drizzle ORM, React Hook Form, Zod, Stripe, Resend
Feedbase
An open-source solution for collecting feedback and communicating updates.
The repository is a monorepo managed via Turborepo. It contains several apps:
Stack: Turborepo, Tailwind, Supabase, Tinybird, React Hook Form, Zod, SWR, Resend, Mintlify
Plane
An open Source JIRA, Linear and Asana alternative. Plane helps you track your issues, epics, and product roadmaps.
The repository is a monorepo managed via Turborepo. It contains several Next.js apps:
- admin - admin panel. It uses App Router.
- web - main application. It doesn't App Router yet.
- space - some application. It uses App Router.
Stack: Turborepo, Tailwind, React Hook Form, SWR, MobX
egghead.io
egghead a learning platform for front-end developers.
They are still in the process of migrating to App Router, which is a good example of how a large-scale app can be migrated to App Router incrementally.
Stack: Tailwind, tRPC, Prisma, Sanity, Formik, Zod, SWR, Tanstack Query, Upstash, Stripe
Conclusion
In this article, we explored several open-source projects built with Next.js 14 and App Router. These open-source projects serve as excellent learning resources, offering practical examples of how to leverage Next.js 14 and App Router to build robust, scalable applications. Whether you are looking to enhance your skills, find inspiration, or discover new tools, delving into these codebases will undoubtedly contribute to your growth as a developer.
Want to find more real-world projects? You can find more projects built with different technologies in my collection on GitHub.