Next.js Installation

Complete setup guide for integrating DinachiUI with Next.js projects including App Router and Server Components.

Prerequisites

Next.js 13.4+

App Router support

React 18+

Server Components ready

TypeScript

Recommended for best experience

Tailwind CSS

Required for styling

Create Next.js Project

Start with a new Next.js project or use an existing one

Create new project:

bash

1npx create-next-app@latest my-app --typescript --tailwind --eslint --app

Or use existing project:

bash

1cd my-existing-nextjs-app

Initialize DinachiUI

Set up DinachiUI configuration and install dependencies

Initialize DinachiUI:

bash

1npx @dinachi/cli@latest init

What this does: Creates a components.json config file with Next.js-specific settings:

• Sets RSC (React Server Components) to true
• Configures TypeScript support
• Sets up Tailwind config path as tailwind.config.ts
• Points CSS to src/app/globals.css
• Installs required dependencies

Add Components

Install the components you need for your project

Add individual components:

bash

1npx @dinachi/cli@latest add button input card

Or add all components:

bash

1npx @dinachi/cli@latest add --all

Start Using Components

Import and use DinachiUI components in your Next.js app

Server Component example:

typescript

1// app/page.tsx (Server Component)
2import { Button } from '@/components/ui/button';
3import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
4
5export default function HomePage() {
6  return (
7    <Card>
8      <CardHeader>
9        <CardTitle>Welcome to DinachiUI</CardTitle>
10      </CardHeader>
11      <CardContent>
12        <p>This is a server component with DinachiUI components.</p>
13        <Button>Static Button</Button>
14      </CardContent>
15    </Card>
16  );
17}

Client Component example:

typescript

1// components/interactive-demo.tsx
2'use client';
3
4import { useState } from 'react';
5import { Button } from '@/components/ui/button';
6import { Input } from '@/components/ui/input';
7import { Toast } from '@/components/ui/toast';
8
9export function InteractiveDemo() {
10  const [count, setCount] = useState(0);
11
12  return (
13    <div className="space-y-4">
14      <Input placeholder="Enter something..." />
15      <Button onClick={() => setCount(count + 1)}>
16        Clicked {count} times
17      </Button>
18    </div>
19  );
20}

Common Issues

Hydration Errors

If you see hydration errors, ensure you're using 'use client' for interactive components.

typescript

1// Add this to the top of interactive components
2'use client';
3
4import { useState } from 'react';
5import { Button } from '@/components/ui/button';

CSS Variables Not Working

Make sure CSS variables are imported in your globals.css:

css

1/* src/app/globals.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5
6@layer base {
7  :root {
8    --background: 0 0% 100%;
9    --foreground: 222.2 84% 4.9%;
10    /* ... other variables */
11  }
12}