shadcn/ui is not a component library in the traditional sense. Instead of installing a package and importing components, you copy the source code directly into your project. This means you own every component and can customize it freely.

## Why shadcn/ui

- No version lock-in — components live in your codebase
- Built on Radix UI primitives for accessibility out of the box
- Styled with Tailwind CSS, fully themeable via CSS variables
- Works seamlessly with Next.js and TypeScript

## Installation

Initialize shadcn/ui in a Next.js project:

```bash
npx shadcn@latest init
```

This sets up Tailwind, adds a `components/ui/` directory, and configures the `cn()` utility.

## Adding Components

Add only what you need — each component is added individually:

```bash
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add input
```

Each command writes the component source into `components/ui/`.

## Usage

Components are used like any local React component:

```typescript
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export function LoginForm() {
  return (
    <form>
      <Input placeholder="Email" type="email" />
      <Button type="submit">Sign In</Button>
    </form>
  )
}
```

## Theming

Colors, radius, and fonts are controlled via CSS variables in `globals.css`. Switching between light and dark mode is a single class toggle on the root element.

## Conclusion

shadcn/ui shifts the ownership model — you get production-ready, accessible components without sacrificing control. It pairs especially well with Next.js and TypeScript projects where long-term maintainability matters.

Building UI Components with shadcn/ui

Next.js offers multiple data-fetching strategies. Choosing the right one significantly impacts performance, SEO, and user experience.

## getServerSideProps

Runs on every request — ideal for dynamic, user-specific, or frequently updated data:

```typescript
export const getServerSideProps: GetServerSideProps = async (context) => {
  const data = await fetchFromAPI();
  return { props: { data } };
};
```

## getStaticProps

Runs at build time — ideal for content that rarely changes:

```typescript
export const getStaticProps: GetStaticProps = async () => {
  const posts = await fetchPosts();
  return { props: { posts }, revalidate: 60 };
};
```

## When to Use Which

- **getServerSideProps**: authenticated pages, real-time data, personalized content
- **getStaticProps**: blogs, docs, marketing pages — anything cacheable
- **Client-side fetch**: user interactions, dashboards, data that loads after render

## CORS Consideration

When using getServerSideProps, the fetch runs on the Node.js server — not the browser. This means CORS headers are irrelevant for server-side calls, and you can hit internal APIs directly without exposing them publicly.

## Conclusion

Combining SSR and SSG in the same Next.js app lets you optimize each page independently — static where possible, dynamic where necessary.

Server-Side Rendering with Next.js

JWT (JSON Web Token) is a compact, stateless authentication mechanism widely used in REST APIs. NestJS makes it straightforward to implement with its built-in Guards and Passport integration.

## Installation

```bash
npm install @nestjs/jwt @nestjs/passport passport passport-jwt
npm install -D @types/passport-jwt
```

## Setting Up the Auth Module

Configure JwtModule with a secret and expiration:

```typescript
JwtModule.register({
  secret: process.env.JWT_SECRET,
  signOptions: { expiresIn: '7d' },
})
```

## JWT Strategy

The strategy validates the token and extracts the payload on every protected request:

```typescript
@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      secretOrKey: process.env.JWT_SECRET,
    });
  }

  async validate(payload: { sub: string; email: string }) {
    return { id: payload.sub, email: payload.email };
  }
}
```

## Protecting Routes

Apply the JwtAuthGuard to any controller or route that requires authentication:

```typescript
@UseGuards(JwtAuthGuard)
@Get('profile')
getProfile(@Request() req) {
  return req.user;
}
```

## Conclusion

NestJS + JWT provides a clean, decorator-driven authentication layer that scales well across large APIs.

JWT Authentication with NestJS

Using Docker Compose to set up PostgreSQL in a development environment greatly simplifies version management and portability.

## docker-compose.yml

```yaml
version: '3.8'
services:
  postgres:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: myapp
    ports:
      - '5432:5432'
    volumes:
      - postgres_data:/var/lib/postgresql/data
volumes:
  postgres_data:
```

## Advantages

- Different PostgreSQL versions for different projects
- Start/stop with a single command
- Data persistence with volumes

## Connection

While the container is running, you can connect via `localhost:5432`.

Setting Up PostgreSQL with Docker

NestJS is a powerful backend framework for Node.js. Combined with TypeORM, database operations become extremely clean and type-safe.

## Installation

```bash
npm install @nestjs/typeorm typeorm pg
```

## Defining Entities

In TypeORM, an entity represents a table in the database. Thanks to decorators, schema definition is done directly on TypeScript classes.

## Repository Pattern

In NestJS, you use TypeORM repositories by injecting them. This isolates the service layer from database details and makes testing easier.

## Conclusion

The NestJS + TypeORM combination provides a solid foundation for large-scale backend applications.

Blog

Building UI Components with shadcn/ui

Server-Side Rendering with Next.js

JWT Authentication with NestJS

Setting Up PostgreSQL with Docker

Using TypeORM with NestJS