Turborepo Nextjs Example

Efficient Monorepo Development: Next.js, Turborepo & Shared UI

This repository offers a practical demonstration, linked to a blog post, on incorporating Turborepo into an existing project. It illustrates a monorepo structure where multiple Next.js applications (named 'website' and 'dashboard') utilize shared UI elements from a distinct 'ui' package. This setup, featuring shadcn/ui and Tailwind CSS, is designed to guide developers in implementing effective component sharing and constructing scalable applications, drawing insights from converting the Novel website into an npm package.

Features:

• Monorepo Architecture: Showcases a standard monorepo layout with 'apps' (website, dashboard) and 'packages' (ui) for organized code management.
• Shared UI Component Library: Implements a central 'ui' package from which components, such as a 'SignIn' component, are shared across different applications.
• Multiple Next.js Applications: Contains two Next.js applications, 'website' and 'dashboard', both consuming components from the shared 'ui' package.
• Turborepo Integration: Utilizes Turborepo for efficient monorepo management, including build optimization and caching.
• shadcn/ui for UI Elements: Incorporates components from shadcn/ui to build user interfaces.
• Tailwind CSS for Styling: Employs Tailwind CSS for utility-first styling throughout the project.
• tsup for Package Bundling: Uses tsup for compiling and bundling the shared 'ui' library.
• Educational Resource: Serves as a concrete example supporting a blog post on adopting Turborepo.

Summary:

This project provides a clear illustration of a monorepo utilizing Turborepo to manage Next.js applications that share a common UI library built with shadcn/ui and Tailwind CSS. It acts as an excellent resource for developers seeking to understand component sharing strategies and enhance their development workflows within a multi-package environment. The example is based on practical experience, making it a valuable guide for similar implementations.