Nx Monorepo: توسيع مشاريع Next.js وTypeScript بالمكتبات المشتركة

npx create-nx-workspace@latest myorg --preset=empty --pm=pnpm
cd myorg

pnpm add -D @nx/next @nx/react @nx/js

npx nx generate @nx/next:app web \
  --directory=apps/web \
  --style=css \
  --appRouter=true

npx nx generate @nx/next:app admin \
  --directory=apps/admin \
  --style=css \
  --appRouter=true

npx nx serve web    # يعمل على http://localhost:3000
npx nx serve admin  # يعمل على http://localhost:4200

npx nx generate @nx/react:library ui \
  --directory=libs/ui \
  --unitTestRunner=vitest \
  --bundler=vite \
  --importPath=@myorg/ui

// libs/ui/src/lib/button/button.tsx
import React from 'react';
 
export interface ButtonProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'danger';
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}
 
export function Button({
  children,
  variant = 'primary',
  onClick,
  disabled,
  className = '',
}: ButtonProps) {
  const base = 'px-4 py-2 rounded font-medium transition-colors focus:outline-none focus:ring-2';
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
    secondary: 'bg-gray-100 text-gray-800 hover:bg-gray-200 focus:ring-gray-400',
    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
  };
 
  return (
    <button
      className={`${base} ${variants[variant]} ${className}`}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

// libs/ui/src/lib/card/card.tsx
import React from 'react';
 
export interface CardProps {
  title: string;
  description?: string;
  children?: React.ReactNode;
  className?: string;
}
 
export function Card({ title, description, children, className = '' }: CardProps) {
  return (
    <div className={`rounded-lg border border-gray-200 bg-white p-6 shadow-sm ${className}`}>
      <h3 className="mb-1 text-lg font-semibold text-gray-900">{title}</h3>
      {description && <p className="mb-4 text-sm text-gray-600">{description}</p>}
      {children}
    </div>
  );
}

// libs/ui/src/index.ts
export * from './lib/button/button';
export * from './lib/card/card';

npx nx generate @nx/js:library utils \
  --directory=libs/utils \
  --unitTestRunner=vitest \
  --bundler=tsc \
  --importPath=@myorg/utils

// libs/utils/src/lib/format.ts
export function formatDate(date: Date, locale = 'ar-TN'): string {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }).format(date);
}
 
export function formatCurrency(
  amount: number,
  currency = 'TND',
  locale = 'ar-TN'
): string {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency,
  }).format(amount);
}
 
export function slugify(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^\w\s-]/g, '')
    .replace(/[\s_-]+/g, '-')
    .replace(/^-+|-+$/g, '');
}
 
export function truncate(text: string, maxLength: number): string {
  if (text.length <= maxLength) return text;
  return text.slice(0, maxLength).trimEnd() + '…';
}

// libs/utils/src/lib/types.ts
export interface PaginatedResponse<T> {
  data: T[];
  total: number;
  page: number;
  pageSize: number;
  hasMore: boolean;
}
 
export interface ApiError {
  code: string;
  message: string;
  details?: Record<string, string[]>;
}
 
export interface SelectOption<T = string> {
  label: string;
  value: T;
  disabled?: boolean;
}

// libs/utils/src/index.ts
export * from './lib/format';
export * from './lib/types';

// apps/web/app/page.tsx
import { Button, Card } from '@myorg/ui';
import { formatDate, formatCurrency } from '@myorg/utils';
 
export default function HomePage() {
  const today = new Date();
  const price = 149.99;
 
  return (
    <main className="mx-auto max-w-4xl p-8">
      <h1 className="mb-6 text-4xl font-bold">متجري</h1>
 
      <div className="mb-8 grid gap-4 sm:grid-cols-2">
        <Card title="تاريخ اليوم" description={formatDate(today)}>
          <Button variant="secondary">عرض التقويم</Button>
        </Card>
 
        <Card title="منتج مميز" description={`السعر: ${formatCurrency(price)}`}>
          <Button variant="primary">أضف إلى السلة</Button>
        </Card>
      </div>
    </main>
  );
}

// apps/admin/app/page.tsx
import { Button, Card } from '@myorg/ui';
import { formatDate } from '@myorg/utils';
 
export default function AdminDashboard() {
  return (
    <main className="p-8">
      <h1 className="mb-4 text-2xl font-bold">لوحة الإدارة</h1>
      <p className="mb-6 text-gray-600">آخر مزامنة: {formatDate(new Date())}</p>
 
      <div className="flex gap-3">
        <Button variant="primary">تصدير البيانات</Button>
        <Button variant="danger">مسح التخزين المؤقت</Button>
      </div>
    </main>
  );
}

npx nx graph

# تشغيل مشروع واحد
npx nx build web
npx nx test ui
npx nx lint utils
 
# تشغيل مهمة عبر جميع المشاريع
npx nx run-many -t build
npx nx run-many -t test
npx nx run-many -t lint
 
# تشغيل مهام متعددة بالتوازي
npx nx run-many -t build,test,lint

# ما الذي تغيّر مقارنةً بـ main؟
npx nx affected -t build --base=main --head=HEAD
 
# اختبار المشاريع المتأثرة فقط
npx nx affected -t test --base=main
 
# lint وtest وbuild للمتأثرة فقط
npx nx affected -t lint,test,build --base=main

# .github/workflows/ci.yml
name: CI
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  main:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0  # السجل الكامل ضروري لـ nx affected
 
      - uses: pnpm/action-setup@v4
        with:
          version: 8
 
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
 
      - run: pnpm install --frozen-lockfile
 
      - name: تحديد NX_BASE للـ PR
        if: github.event_name == 'pull_request'
        run: echo "NX_BASE=origin/${{ github.base_ref }}" >> $GITHUB_ENV
 
      - name: تحديد NX_BASE للـ push
        if: github.event_name == 'push'
        run: echo "NX_BASE=HEAD~1" >> $GITHUB_ENV
 
      - run: npx nx affected -t lint,test,build --base=$NX_BASE

npx nx connect

{
  "nxCloudAccessToken": "YOUR_TOKEN_HERE",
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "test", "lint", "e2e"]
      }
    }
  }
}

npx nx generate @nx/react:component badge \
  --project=ui \
  --directory=src/lib/badge \
  --export

npx nx generate @nx/next:page pricing \
  --project=web \
  --directory=app/pricing

# 1. تثبيت جميع التبعيات
pnpm install
 
# 2. بناء المكتبات المشتركة
npx nx build ui
npx nx build utils
 
# 3. تشغيل تطبيق الويب — يجب أن يعرض Button وCard المشتركين
npx nx serve web
# افتح http://localhost:3000
 
# 4. تشغيل تطبيق الإدارة
npx nx serve admin
# افتح http://localhost:4200
 
# 5. تشغيل جميع الاختبارات
npx nx run-many -t test
 
# 6. التحقق من سلامة TypeScript
npx nx run-many -t typecheck
 
# 7. عرض رسم بيان التبعيات
npx nx graph

{
  "compilerOptions": {
    "paths": {
      "@myorg/ui": ["libs/ui/src/index.ts"],
      "@myorg/utils": ["libs/utils/src/index.ts"]
    }
  }
}

git fetch origin main
npx nx affected -t build --base=origin/main

npx nx reset
npx nx build web

{
  "pnpm": {
    "peerDependencyRules": {
      "allowedVersions": {
        "react": "19"
      }
    }
  }
}