Monorepo

Yarn workspace

• Add packages folder configs to package.json.

{
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": []
  },
}

• Create package folder

mkdir packages/core

• Config pacakge.json of workspace

{
  "name": "@my-workspace/core",
  "version": "1.0.0"
}

• Add sample function to ensure it works

index.js

function foo() {
  console.log("hello workspace");
}

export default foo;

index.d.ts

declare function foo(): void;
export default foo

• Install worksapce pacakge in main project

yarn -W add @my-workspace/core@1.0.0

{
  "dependencies": {
+    "@my-workspace/core": "1.0.0"
  }
}

• Import package in apps.

import foo from "@my-workspace/core"

foo()

Nx

To start a development environment using Docker, run:

sudo docker run -it --rm -w /app -v ./:/app -p 3000:3000 node:20 bash

To create a new Nx workspace with Next.js using Yarn as the package manager, run:

npx create-nx-workspace@latest --preset=next --packageManager=yarn

To generate a new shared component library in your Nx workspace, run:

nx g @nx/react:lib libs/ui

To support multiple entry points for the library, add the following settings (e.g., import { useHooks } from '@test/ui/hooks';)

./libs/ui/package.json

{
  "exports": {
+   "./hooks": {
+     "development": "./src/hooks.ts",
+     "types": "./dist/hooks.d.ts",
+     "import": "./dist/hooks.js",
+     "default": "./dist/hooks.js"
+   }
  }
}

libs/ui/vite.config.ts

export default defineConfig(() => ({
    lib: {
      // Could also be a dictionary or array of multiple entry points.
-     entry: 'src/index.ts',
+     entry: ['src/index.ts', 'src/hooks.ts'],
    },
    rollupOptions: {
+     output: {
+       entryFileNames: () => `[name].js`,
+     },
    },
  },
}));

To generate an individual storybook project for components, run:

nx g @nx/react:application apps/docs
nx add @nx/storybook
nx g @nx/storybook:configuration @test/docs

To enable SSR support for Next.js components, use the source code of the library instead of the built version by modifying libs/ui/package.json.

{
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "development": "./src/index.ts",
-     "types": "./dist/index.d.ts",
-     "import": "./dist/index.js",
-     "default": "./dist/index.js"
+     "types": "./src/index.ts",
+     "import": "./src/index.ts",
+     "default": "./src/index.ts"
    }
  }
}