feature: Add Directus integration with API and Docker setup

This commit introduces Directus SDK for managing collections and a Docker Compose configuration for running Directus locally. It includes an API function to fetch published articles using Directus and updates dependencies to include the SDK.

Author: Y-RyuZU

infra/docker/directus/docker-compose.yaml

@@ -0,0 +1,41 @@
+services:
+  directus:
+    image: directus/directus:latest
+    ports:
+      - "8055:8055"
+    volumes:
+      - ./uploads:/directus/uploads
+      - ./extensions:/directus/extensions
+    environment:
+      KEY: "replace-with-random-32char-string"
+      SECRET: "replace-with-secure-random-value"
+      ADMIN_EMAIL: "ryuzu1006@gmail.com"
+      ADMIN_PASSWORD: "d1r3ctu5"
+      DB_CLIENT: "pg"
+      DB_HOST: "directus-db"
+      DB_PORT: "5432"
+      DB_DATABASE: "directus"
+      DB_USER: "directus"
+      DB_PASSWORD: "directus-db-password"
+      WEBSOCKETS_ENABLED: "true"
+    depends_on:
+      - directus-db
+    restart: unless-stopped
+
+  directus-db:
+    image: postgres:latest
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_DB: "directus"
+      POSTGRES_USER: "directus"
+      POSTGRES_PASSWORD: "directus-db-password"
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U directus"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+volumes:
+  postgres-data:

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@directus/sdk": "^19.0.1",
     "@kuma-ui/core": "^1.5.8",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.1",

src/app/api/collections.ts

@@ -0,0 +1,31 @@
+// app/api/collections.ts などのサーバーコンポーネントでの使用
+import { createDirectus, rest, readItems } from '@directus/sdk';
+
+// 型定義（例）
+interface Article {
+    id: number;
+    title: string;
+    content: string;
+    published_date: string;
+}
+
+async function getArticles() {
+    const directus = createDirectus(process.env.DIRECTUS_URL!).with(rest());
+
+    try {
+        const articles = await directus.request(
+            readItems('articles', {
+                fields: ['id', 'title', 'content', 'published_date'],
+                filter: {
+                    status: {
+                        _eq: 'published'
+                    }
+                }
+            })
+        );
+        return articles;
+    } catch (error) {
+        console.error('Error fetching articles:', error);
+        return [];
+    }
+}

src/lib/directus.ts

@@ -0,0 +1,5 @@
+import { createDirectus, rest } from '@directus/sdk';
+
+const directus = createDirectus('http://localhost:8055').with(rest());
+
+export default directus;

yarn.lock

@@ -869,6 +869,11 @@
     "@babel/helper-string-parser" "^7.25.9"
     "@babel/helper-validator-identifier" "^7.25.9"
 
+"@directus/sdk@^19.0.1":
+  version "19.0.1"
+  resolved "https://registry.yarnpkg.com/@directus/sdk/-/sdk-19.0.1.tgz#06d154a41499b79b068f18992a7e5f310f0b242c"
+  integrity sha512-6KwWedA/vxrMN2aRm5L52TEgB+42vkz0Ae8kwOitHuBPT4VWtUNOXenzaHnZyXyNrEgh/VBLJ36f3UEe3b/Wfw==
+
 "@emnapi/runtime@^1.2.0":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.3.1.tgz#0fcaa575afc31f455fd33534c19381cfce6c6f60"