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

Screenshot of Unkey

GitHub · Website

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

Screenshot of Cal.com

GitHub · Website

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

Screenshot of Documenso

GitHub · Website

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:

  • marketing - marketing website, landing page, blog, etc.
  • web - main application

Stack: Turborepo, Tailwind, tRPC, Prisma, Kysely Auth.js, React Hook Form, Zod, Resend, Stripe


TypeHero

Screenshot of TypeHero

GitHub · Website

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:

  • web - main application
  • admin - admin panel for the main application

Stack: Turborepo, Tailwind, Prisma, Auth.js, React Hook Form, Zod, Zustand, Tanstack Query, Resend


Dify

Screenshot of Dify

GitHub · Website

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

Screenshot of Dub

GitHub · Website

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

Screenshot of Noodle

GitHub · Website

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

Screenshot of Midday

GitHub · Website

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

Screenshot of Morphic

GitHub · Website

An AI-powered search engine with a generative UI.

Stack: Bun, Tailwind, Vercel AI SDK, OpenAI, Tavily AI, Serper, Jina AI, Upstash


Supabase

Screenshot of Supabase

GitHub · Website

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

Screenshot of OpenStatus

GitHub · Website

OpenStatus is an open-source synthetic and frontend performance monitoring service.

The repository is a monorepo managed via Turborepo. It contains several apps:

  • web - main application, landing page
  • docs - documentation website

Stack: Turborepo, Tailwind, tRPC, Upstash, Tinybird, Turso, Drizzle ORM, Auth.js, React Hook Form, Zod, Stripe, Resend, Mintlify


Skateshop

Screenshot of Skateshop

GitHub · Website

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

Screenshot of Feedbase

GitHub · Website

An open-source solution for collecting feedback and communicating updates.

The repository is a monorepo managed via Turborepo. It contains several apps:

  • web - main application, landing page
  • docs - documentation website

Stack: Turborepo, Tailwind, Supabase, Tinybird, React Hook Form, Zod, SWR, Resend, Mintlify


Plane

Screenshot of Plane

GitHub · Website

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

Screenshot of egghead.io

GitHub · Website

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.