How to Share Components Between NextJS Projects (Easily)

In this post, I'll show you how to share components between NextJS projects with pnpm workspaces.

This approach can use alongside Turborepo for more complex projects, but it's not necessary.

Our goal is to keep things simple and easy to understand, with no build steps or type aliases.

Setting up the project

Here's a typical project structure with two NextJS projects and a shared components package.

Copy
project/
├─ apps/
│  ├─ web/ # 1st NextJS project
|  |  └─ package.json
|  ├─ docs/ # 2nd NextJS project
├─ packages/
│  └─ ui/ # Shared components
└─ package.json

In the root directory (project/) initialize via pnpm:

Copy
pnpm init

The root package.json should have this at the very least:

Copy
{
    "name": "project",
    "version": "0.1.0",
    "private": true,
    "packageManager": "[email protected]",
}

Configure workspaces

Create a pnpm-workspace.yaml file in the root directory and add the following:

Copy
packages:
    - "apps/*"
    - "packages/*"

This defines the packages that are part of the workspace.

Configure the shared components package

In packages/ui, initialize a new pnpm package:

Copy
cd packages/ui
pnpm init

The package.json should look something like:

Copy
{
    "name": "@project/ui",
    "version": "0.1.0",
    "private": true,
    "exports": {
        "./Button": "./src/components/Button.tsx" // we'll soon create this file
        // ... more components as needed
    },
    "peerDependencies": {
        "react": "^19.2.3",
    },
    "packageManager": "[email protected]",
}

Now let's make a simple Button component in packages/ui/src/components/Button.tsx:

Copy
import React from "react";

export const Button: React.FC = () => {
    return <button>Click me</button>;
}

We can now re-use this component in the NextJS projects.

Install the shared package in NextJS projects

In apps/web and apps/docs, install the shared package by modifying their package.json files:

Copy
{
    "dependencies": {
        // ... rest of dependencies
        "@project/ui": "workspace:*",
    }
}

Then run pnpm install in both projects to install the shared package.

Now we can use the Button component in the NextJS projects.

Copy
import { Button } from "@project/ui/Button";

export default function Home() {
    return <Button />;
}

And in apps/docs/pages/index.tsx:

Copy
import { Button } from "@project/ui/Button";

export default function Home() {
    return <Button />;
}

We're now using the Button component in both the web and docs NextJS projects.

Wrapping Up

That's it! We have successfully shared a component between two NextJS projects.

• No type aliases
• No build step

Hope this short tutorial helps someone.