Kurulum: Next.js

Ürün uygulamaları Next.js ile değil, Vite ile kurulur (D-05): katı, özet (hash) tabanlı CSP yalnızca istemci tarafında çizilen uygulama için kanıtlanmıştır. Bu rehber, BigBang’i Next.js kullanan bir iç araçta ya da prototipte kullanmak içindir. Genel koşullar React uygulaması sayfasındadır.

Sınırlar

• @bigbang/ui bileşenleri istemci bileşenidir: React durumu ve tarayıcı olayları kullanırlar, 'use client' yönergesi taşımazlar. Onları yalnızca 'use client' ile başlayan dosyalardan içe aktarın.
• Bileşenlerin sunucuda çizilmesi test edilmez. Sayfa iskeletini sunucu bileşeni olarak bırakıp etkileşimli bölümleri istemci bileşenlerine koyun.
• Paketler TypeScript kaynağı olarak gelir; Next.js’in onları derlemesi gerekir (transpilePackages).

1. Paketler

pnpm add @bigbang/tokens@workspace:* @bigbang/ui@workspace:* @fontsource-variable/inter@5.3.0
pnpm add -D tailwindcss@4.3.3 @tailwindcss/postcss@4.3.3

2. Next.js ayarı

next.config.ts

import type { NextConfig } from 'next';

const config: NextConfig = {
  // The packages ship TypeScript source.
  transpilePackages: ['@bigbang/ui', '@bigbang/icons', '@bigbang/tokens'],
};

export default config;

postcss.config.mjs

export default { plugins: { '@tailwindcss/postcss': {} } };

3. Stiller

app/globals.css

@import '@bigbang/ui/styles.css';
@import '@bigbang/tokens/css/neutral-light.css';
@import '@bigbang/tokens/css/neutral-dark.css';

@source '../node_modules/@bigbang/ui/src';

4. Kök düzen ve Provider

app/providers.tsx

'use client';

import { Provider } from '@bigbang/ui';
import type { ReactNode } from 'react';

export function Providers({ children }: { children: ReactNode }) {
  return <Provider locale="tr-TR">{children}</Provider>;
}

app/layout.tsx

import '@fontsource-variable/inter';
import './globals.css';
import type { ReactNode } from 'react';
import { Providers } from './providers';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="tr" data-brand="neutral" data-theme="light">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

data-theme sunucuda sabit yazılır. Kullanıcının mod tercihini uygulamak için değeri bir çerezden okuyup html öğesine sunucuda yazın; tarayıcıda sonradan değiştirmek ilk boyamada bir renk sıçramasına yol açar.

5. İlk bileşen

app/example-card.tsx

'use client';

import { Button, Card } from '@bigbang/ui';

export function ExampleCard() {
  return (
    <Card className="max-w-96">
      <Card.Header>
        <Card.Title>Kart başlığı</Card.Title>
        <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
      </Card.Header>
      <Card.Footer>
        <Button>Birincil buton</Button>
      </Card.Footer>
    </Card>
  );
}

app/page.tsx

import { ExampleCard } from './example-card';

export default function Page() {
  return (
    <main className="p-xl">
      <ExampleCard />
    </main>
  );
}