インモビインモビ

$ npx create-jstack-app@latest

┌   jStack CLI 
│
◇  What will your project be called?
│  twitter-clone-app
│
◇  Which database ORM would you like to use?
│  Drizzle ORM
│
◇  Which Postgres provider would you like to use?
│  Neon
│
◇  Should we run 'npm install' for you?
│  Yes

$ npx shadcn@latest init
[email protected]
Ok to proceed? (y) y
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS config. Found v4.
✔ Validating import alias.
✔ Which color would you like to use as the base color? › Neutral
✔ Writing components.json.
✔ Checking registry.
✔ Updating src/app/globals.css
  Installing dependencies.

It looks like you are using React 19. 
Some packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).

✔ How would you like to proceed? › Use --legacy-peer-deps

$ npx shadcn@latest add button
✔ How would you like to proceed? › Use --legacy-peer-deps

"use client"

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { useState } from "react"
import { client } from "@/lib/client"
import { Button } from "@/components/ui/button" // 追加

export const RecentPost = () => {
  const [name, setName] = useStatestring>("")
  const queryClient = useQueryClient()

  const { data: recentPost, isPending: isLoadingPosts } = useQuery({
    queryKey: ["get-recent-post"],
    queryFn: async () => {
      const res = await client.post.recent.$get()
      return await res.json()
    },
  })

  const { mutate: createPost, isPending } = useMutation({
    mutationFn: async ({ name }: { name: string }) => {
      const res = await client.post.create.$post({ name })
      return await res.json()
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["get-recent-post"] })
      setName("")
    },
  })

  return (
    div className="w-full max-w-sm backdrop-blur-lg bg-black/15 px-8 py-6 rounded-md text-zinc-100/75 space-y-2">
      {isLoadingPosts ? (
        p className="text-[#ececf399] text-base/6">
          Loading posts...
        p>
      ) : recentPost ? (
        p className="text-[#ececf399] text-base/6">
          Your recent post: "{recentPost.name}"
        p>
      ) : (
        p className="text-[#ececf399] text-base/6">
          You have no posts yet.
        p>
      )}
      form
        onSubmit={(e) => {
          e.preventDefault()
          createPost({ name })
        }}
        onKeyDown={(e) => {
          if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault()
            createPost({ name })
          }
        }}
        className="flex flex-col gap-4"
      >
        input
          type="text"
          placeholder="Enter a title..."
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="w-full text-base/6 rounded-md bg-black/50 hover:bg-black/75 focus-visible:outline-none ring-2 ring-transparent  hover:ring-zinc-800 focus:ring-zinc-800 focus:bg-black/75 transition h-12 px-4 py-2 text-zinc-100"
        />
        {/* 修正 */}
        Button
          disabled={isPending}
          type="submit"
          variant="destructive"
        >
          {isPending ? "Creating..." : "Create Post"}
        Button>
      form>
    div>
  )
}

DATABASE_URL=あなたのURL

{
  "name": "twitter-clone-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "db:push": "drizzle-kit push",
    "db:studio": "drizzle-kit studio",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },

$ npm run db:push // Neonを更新

[✓] Pulling schema from database...
[✓] Changes applied

$ npm install @clerk/nextjs

DATABASE_URL=あなたのDATABASE_URL
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=あなたのNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
CLERK_SECRET_KEY=あなたのCLERK_SECRET_KEY

$ touch src/middleware.ts

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

import type { Metadata } from "next";
import { ClerkProvider, SignedIn, SignedOut } from "@clerk/nextjs";
import "./globals.css";

export const metadata: Metadata = {
  title: "JStack Twitter Clone",
  description: "Twitter clone created using JStack",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: Readonly{
  children: React.ReactNode;
}>) {
  return (
    ClerkProvider>
      html lang="en">
        body className="antialiased">
          div className="flex min-h-screen">
            main className="flex-1 transition-all duration-300">
              Providers>{children}/Providers>
            /main>
          /div>
        /body>
      /html>
    /ClerkProvider>
  );
}

    ClerkProvider>
      (省略
    /ClerkProvider>

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"; // 追加

const isProtectedRoute = createRouteMatcher(["/"]); // 追加

// 追加
export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) {
    await auth.protect();
  }
});

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    // Always run for API routes
    "/(api|trpc)(.*)",
  ],
};

const isProtectedRoute = createRouteMatcher(["/"]);

import React from "react";

function Home() {
  return div>Homediv>;
}

export default Home;

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) {
    await auth.protect();
  }
});

import { SignOutButton } from "@clerk/nextjs";
import React from "react";

function Home() {
  return (
    div>
      h1>Homeh1>
      SignOutButton />
    div>
  );
}

export default Home;

$ ngrok http 3000

Session Status                online                                                                        
Account                       Watanabe Jin (Plan: Free)                                                     
Update                        update available (version 3.21.0, Ctrl-U to update)                           
Version                       3.20.0                                                                        
Region                        Japan (jp)                                                                    
Web Interface                 http://127.0.0.1:4040                                                         
Forwarding                    https://ad2e-113-43-203-90.ngrok-free.app -> http://localhost:3000    

$ touch src/server/routers/ping-router.ts

import { j, publicProcedure } from "../jstack";

export const pingRouter = j.router({
  ping: publicProcedure.get(({ c }) => {
    return c.json({ message: "Pong!" });
  }),
});

  ping: publicProcedure.get(({ c }) => {
    return c.json({ message: "Pong!" });
  }),

import { j } from "./jstack";
import { pingRouter } from "./routers/ping-router";
import { postRouter } from "./routers/post-router";

/**
 * This is your base API.
 * Here, you can handle errors, not-found responses, cors and more.
 *
 * @see https://jstack.app/docs/backend/app-router
 */
const api = j
  .router()
  .basePath("/api")
  .use(j.defaults.cors)
  .onError(j.defaults.errorHandler);

/**
 * This is the main router for your server.
 * All routers in /server/routers should be added here manually.
 */
const appRouter = j.mergeRouters(api, {
  post: postRouter,
  system: pingRouter,
});

export type AppRouter = typeof appRouter;

export default appRouter;

const api = j
  .router()
  .basePath("/api")
  .use(j.defaults.cors)
  .onError(j.defaults.errorHandler);

const appRouter = j.mergeRouters(api, {
  post: postRouter,
  systems: pingRouter,
});

ping: publicProcedure.get(({ c }) => {

$ curl localhost:3000/api/systems/ping
{"message":"Pong!"}

$ curl あなたのngrokのURL/api/systems/ping
{"message":"Pong!"}

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";

const isProtectedRoute = createRouteMatcher(["/"]);
const isWebhookRoute = createRouteMatcher(["/api/webhook/clerk(.*)"]);
const isPingRoute = createRouteMatcher(["/api/systems/ping(.*)"]);

export default clerkMiddleware(async (auth, req) => {
  if (isWebhookRoute(req) || isPingRoute(req)) {
    return;
  }

  if (isProtectedRoute(req)) {
    await auth.protect();
  }
});

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    // Always run for API routes
    "/(api|trpc)(.*)",
  ],
};

import { pgTable, serial, text, timestamp, index } from "drizzle-orm/pg-core";

export const posts = pgTable(
  "posts",
  {
    id: serial("id").primaryKey(),
    name: text("name").notNull(),
    createdAt: timestamp("createdAt").defaultNow().notNull(),
    updatedAt: timestamp("updatedAt").defaultNow().notNull(),
  },
  (table) => [index("Post_name_idx").on(table.name)]
);

export const users = pgTable(
  "users",
  {
    id: serial("id").primaryKey(),
    clerkId: text("clerkId").notNull(),
    email: text("email").notNull(),
    name: text("name").notNull(),
    handle: text("handle").notNull(),
    avatarUrl: text("avatarUrl"),
    bio: text("bio"),
    createdAt: timestamp("createdAt").defaultNow().notNull(),
    updatedAt: timestamp("updatedAt").defaultNow().notNull(),
  },
  (table) => [index("User_email_idx").on(table.email)]
);

$ npm run db:generate
$ npm run db:push

$ touch src/server/routers/clerk-webhook-router.ts

import { j, publicProcedure } from "../jstack";
import { WebhookEvent } from "@clerk/nextjs/server";
import { Webhook } from "svix";
import { users } from "@/server/db/schema";

export const clerkWebhookRouter = j.router({
  clerk: publicProcedure.post(async ({ c, ctx }) => {
    const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET;
    const { db } = ctx;

    if (!WEBHOOK_SECRET) {
      throw new Error("CLERK_WEBHOOK_SECRET is not set");
    }

    const payload = await c.req.text();
    const headers = c.req.raw.headers;

    const svixHeaders = {
      "svix-id": headers.get("svix-id") || "",
      "svix-timestamp": headers.get("svix-timestamp") || "",
      "svix-signature": headers.get("svix-signature") || "",
    };

    const wh = new Webhook(WEBHOOK_SECRET);
    let evt: WebhookEvent;

    try {
      evt = wh.verify(payload, svixHeaders) as WebhookEvent;
    } catch (err) {
      console.error("Webhook verification failed", err);
      return c.json({ error: "Webhook verification failed" }, 400);
    }

    const eventType = evt.type;

    if (eventType === "user.created") {
      const { id, email_addresses, first_name, last_name } = evt.data;
      console.log(`User ${id} was created`);

      await db.insert(users).values({
        clerkId: id,
        email: email_addresses[0]?.email_address ?? "",
        name: `${first_name || ""} ${last_name || ""}`.trim(),
        avatarUrl: "",
        bio: "",
        handle: email_addresses[0]?.email_address.split("@")[0] ?? "",  
      });
    }

    return c.json({ message: "Webhook received successfully" }, 200);
  }),
});

    const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET;
    const { db } = ctx;

    if (!WEBHOOK_SECRET) {
      throw new Error("CLERK_WEBHOOK_SECRET is not set");
    }

DATABASE_URL=あなたのDATABASE_URL
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=あなたのNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
CLERK_SECRET_KEY=あなたのCLERK_SECRET_KEY
CLERK_WEBHOOK_SECRET=あなたのCLERK_WEBHOOK_SECRET

    const payload = await c.req.text();
    const headers = c.req.raw.headers;

    const svixHeaders = {
      "svix-id": headers.get("svix-id") || "",
      "svix-timestamp": headers.get("svix-timestamp") || "",
      "svix-signature": headers.get("svix-signature") || "",
    };

    const wh = new Webhook(WEBHOOK_SECRET);
    let evt: WebhookEvent;

    try {
      evt = wh.verify(payload, svixHeaders) as WebhookEvent;
    } catch (err) {
      console.error("Webhook verification failed", err);
      return c.json({ error: "Webhook verification failed" }, 400);
    }

      evt = wh.verify(payload, svixHeaders) as WebhookEvent;

    const eventType = evt.type;

    if (eventType === "user.created") {
      const { id, email_addresses, first_name, last_name } = evt.data;
      console.log(`User ${id} was created`);

      await db.insert(users).values({
        clerkId: id,
        email: email_addresses[0]?.email_address ?? "",
        name: `${first_name || ""} ${last_name || ""}`.trim(),
        avatarUrl: "",
        bio: "",
        handle: email_addresses[0]?.email_address?.split("@")[0] ?? "",,
      });
    }

import { j } from "./jstack";
import { clerkWebhookRouter } from "./routers/clerk-webhook-router";
import { pingRouter } from "./routers/ping-router";
import { postRouter } from "./routers/post-router";

/**
 * This is your base API.
 * Here, you can handle errors, not-found responses, cors and more.
 *
 * @see https://jstack.app/docs/backend/app-router
 */
const api = j
  .router()
  .basePath("/api")
  .use(j.defaults.cors)
  .onError(j.defaults.errorHandler);
  
/**
 * This is the main router for your server.
 * All routers in /server/routers should be added here manually.
 */
const appRouter = j.mergeRouters(api, {
  post: postRouter,
  systems: pingRouter,
  webhook: clerkWebhookRouter, // 追加
});

export type AppRouter = typeof appRouter;

export default appRouter;

$ touch src/components/PostForm.tsx
$ touch src/components/PostList.tsx
$ touch src/components/SideMenu.tsx

import React from "react";

function PostForm() {
  return div>PostFormdiv>;
}

export default PostForm;

import React from "react";

function PostList() {
  return div>PostListdiv>;
}

export default PostList;

import { SignOutButton } from "@clerk/nextjs";
import React from "react";

function SideMenu() {
  return (
    div>
      SignOutButton />
    div>
  );
}

export default SideMenu;

import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
import React from "react";

function Home() {
  return (
    div className="max-w-xl mx-auto min-h-screen">
      div>
        PostForm />
      div>
      PostList />
    div>
  );
}

export default Home;

import type { Metadata } from "next";
import { ClerkProvider, SignedIn, SignedOut } from "@clerk/nextjs";
import "./globals.css";
import SideMenu from "@/components/SideMenu";

export const metadata: Metadata = {
  title: "JStack Twitter Clone",
  description: "Twitter clone created using JStack",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: Readonly{
  children: React.ReactNode;
}>) {
  return (
    ClerkProvider>
      html lang="en">
        body className="antialiased">
          div className="flex min-h-screen">
            SideMenu />
            main className="flex-1 transition-all duration-300">
              {children}
            main>
          div>
        body>
      html>
    ClerkProvider>
  );
}

import {
  pgTable,
  serial,
  text,
  timestamp,
  index,
  integer,
} from "drizzle-orm/pg-core";

export const users = pgTable(
  "users",
  {
    id: serial("id").primaryKey(),
    clerkId: text("clerkId").notNull(),
    email: text("email").notNull(),
    name: text("name").notNull(),
    handle: text("handle").notNull(),
    avatarUrl: text("avatarUrl"),
    bio: text("bio"),
    createdAt: timestamp("createdAt").defaultNow().notNull(),
    updatedAt: timestamp("updatedAt").defaultNow().notNull(),
  },
  (table) => [index("User_email_idx").on(table.email)]
);

export const posts = pgTable(
  "posts",
  {
    id: serial("id").primaryKey(),
    content: text("content").notNull(),
    handle: text("handle").notNull(),
    like: integer("like").notNull().default(0),
    image: text("image"),
    createdAt: timestamp("createdAt").defaultNow().notNull(),
    updatedAt: timestamp("updatedAt").defaultNow().notNull(),
  },
  (table) => [index("Post_userId_idx").on(table.handle)]
);

(table) => [index("Post_userId_idx").on(table.handle)]

$ npm run db:generate

~ name › content column will be renamed

+ handle column will be created

+ like column will be created

+ image column will be created
--- all columns conflicts in posts table resolved ---

$ npm run db:push
~ name › content column will be renamed

+ handle column will be created

+ like column will be created

+ image column will be created
--- all columns conflicts in posts table resolved ---

 Warning  Found data-loss statements:
· You're about to add not-null handle column without default value, which contains 3 items

THIS ACTION WILL CAUSE DATA LOSS AND CANNOT BE REVERTED

Do you still want to push changes?
[✓] Changes applied

import { posts, users } from "@/server/db/schema";
import { desc, eq } from "drizzle-orm";
import { j, publicProcedure } from "../jstack";

export const postRouter = j.router({
  all: publicProcedure.query(async ({ c, ctx }) => {
    const { db } = ctx;

    const postsData = await db
      .select({
        id: posts.id,
        content: posts.content,
        handle: users.handle,
        name: users.name,
        like: posts.like,
        image: posts.image,
        createdAt: posts.createdAt,
        avatarUrl: users.avatarUrl,
      })
      .from(posts)
      .innerJoin(users, eq(users.handle, posts.handle))
      .orderBy(desc(posts.createdAt));
    return c.superjson(postsData);
  }),
});

    const postsData = await db
      .select({
        id: posts.id,
        content: posts.content,
        handle: users.handle,
        name: users.name,
        like: posts.like,
        image: posts.image,
        createdAt: posts.createdAt,
        avatarUrl: users.avatarUrl,
      })
      .from(posts)
      .innerJoin(users, eq(users.handle, posts.handle))
      .orderBy(desc(posts.createdAt));
    return c.superjson(postsData);

$ curl localhost:3000/api/post/all
{"json":[]}

$ curl localhost:3000/api/post/all
{"json":[{"id":6,"content":"こんにちは","handle":"jin.watanabe.6g","name":"臣 渡邉","like":200,"image":null,"createdAt":"2025-03-15T06:26:48.272Z","avatarUrl":""},{"id":5,"content":"Hello React","handle":"jin.watanabe.6g","name":"臣 渡邉","like":100,"image":"","avatarUrl":""},{"id":4,"content":"Hello World","handle":"jin.watanabe.6g","name":"臣 渡邉","like":10,"image":null,"createdAt":"2025-03-15T06:25:03.720Z","avatarUrl":""}],"meta":{"values":{"0.createdAt":["Date"],"1.createdAt":["Date"],"2.createdAt":["Date"]}}}

$ mkdir src/domain
$ touch src/domain/Post.ts

export type Post = {
  id: number;
  content: string;
  like: number;
  handle: string;
  image: string | null;
  createdAt: Date | string;
  avatarUrl: string | null;
  name: string;
};

"use client";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { client } from "@/lib/client";
import { Post } from "@/domain/Post";

export default function PostList() {
  const { data: posts, isLoading } = useQueryPost[]>({
    queryKey: ["posts"],
    queryFn: async () => {
      const res = await client.post.all.$get();
      const data = await res.json();
      return data as Post[];
    },
  });

  if (isLoading || !posts) {
    return p>Loading...p>;
  }

  return (
    div className="divide-y divide-gray-100">
      {posts.map((post: Post) => (
        div key={post.id}>
          p>{post.content}p>
          p>{post.like}p>
          p>{post.image}p>
          p>{post.name}p>
          p>{post.handle}p>
        div>
      ))}
    div>
  );
}

  const queryClient = useQueryClient();

  const { data: posts, isLoading } = useQueryPost[]>({
    queryKey: ["posts"],
    queryFn: async () => {
      const res = await client.post.all.$get();
      const data = await res.json();
      return data as Post[];
    },
  });

const res = await client.post.all.$get();

  if (isLoading || !posts) {
    return p>Loading...p>;
  }

$ touch src/components/Provider.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { PropsWithChildren } from "react";

const queryClient = new QueryClient();

export const QueryProviders = ({ children }: PropsWithChildren) => {
  return (
    QueryClientProvider client={queryClient}>{children}QueryClientProvider>
  );
};

import type { Metadata } from "next";
import { ClerkProvider, SignedIn, SignedOut } from "@clerk/nextjs";
import "./globals.css";
import SideMenu from "@/components/SideMenu";
import { Providers } from "./components/providers";

export const metadata: Metadata = {
  title: "JStack Twitter Clone",
  description: "Twitter clone created using JStack",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: Readonly{
  children: React.ReactNode;
}>) {
  return (
    ClerkProvider>
      html lang="en">
        body className="antialiased">
          div className="flex min-h-screen">
            SideMenu />
            main className="flex-1 transition-all duration-300">
              {/* 追加 */}
              Providers>{children}Providers>
            main>
          div>
        body>
      html>
    ClerkProvider>
  );
}

DATABASE_URL=あなたのDATABASE_URL
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=あなたのNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
CLERK_SECRET_KEY=あなたのCLERK_SECRET_KEY
CLERK_WEBHOOK_SECRET=あなたのCLERK_WEBHOOK_SECRET
CLOUDINARY_CLOUD_NAME=あなたのCLOUDINARY_CLOUD_NAME
CLOUDINARY_API_KEY=あなたのCLOUDINARY_API_KEY
CLOUDINARY_API_SECRET=あなたのCLOUDINARY_API_SECRET

$ npm i cloudinary
$ touch src/lib/cloudinary.ts

import { v2 as cloudinary } from "cloudinary";

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME || "",
  api_key: process.env.CLOUDINARY_API_KEY || "",
  api_secret: process.env.CLOUDINARY_API_SECRET || "",
});

export async function uploadImage(file: string): Promisestring> {
  try {
    const result = await cloudinary.uploader.upload(file, {
      folder: "twitter-clone",
    });
    return result.secure_url;
  } catch (error) {
    console.error("Cloudinaryへのアップロードエラー:", error);
    throw new Error("画像のアップロードに失敗しました");
  }
}

    const result = await cloudinary.uploader.upload(file, {
      folder: "twitter-clone",
    });

import { posts, users } from "@/server/db/schema";
import { desc, eq } from "drizzle-orm";
import { j, publicProcedure } from "../jstack";
import { z } from "zod";
import { uploadImage } from "@/lib/cordinary";

export const postRouter = j.router({
  all: publicProcedure.query(async ({ c, ctx }) => {
    const { db } = ctx;

    const postsData = await db
      .select({
        id: posts.id,
        content: posts.content,
        handle: users.handle,
        name: users.name,
        like: posts.like,
        image: posts.image,
        createdAt: posts.createdAt,
        avatarUrl: users.avatarUrl,
      })
      .from(posts)
      .innerJoin(users, eq(users.handle, posts.handle))
      .orderBy(desc(posts.createdAt));
    return c.superjson(postsData);
  }),

  // 追加
  create: publicProcedure
    .input(
      z.object({
        content: z.string().min(1),
        handle: z.string(),
        image: z.string().optional(),
      })
    )
    .mutation(async ({ ctx, c, input }) => {
      const { content, handle, image } = input;
      const { db } = ctx;

      let imageUrl = null;
      if (image) {
        try {
          imageUrl = await uploadImage(image);
        } catch (error) {
          console.error("Error uploading image:", error);
        }
      }

      const post = await db.insert(posts).values({
        content,
        handle,
        image: imageUrl,
      });

      return c.superjson(post);
    }),
});

    .input(
      z.object({
        content: z.string().min(1),
        handle: z.string(),
        image: z.string().optional(),
      })
    )

.mutation(async ({ ctx, c, input }) => {

      if (image) {
        try {
          imageUrl = await uploadImage(image);
        } catch (error) {
          console.error("Error uploading image:", error);
        }
      }

      const post = await db.insert(posts).values({
        content,
        handle,
        image: imageUrl,
      });

$ touch src/domain/User.ts

export type UserProfile = {
  id: number;
  clerkId: string;
  email: string;
  name: string;
  handle: string;
  avatarUrl: string | null;
  bio: string | null;
  createdAt: string;
  updatedAt: string;
};

"use client";
import { useState, useRef } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { client } from "@/lib/client";
import Image from "next/image";
import { UserProfile } from "@/domain/User";

export default function PostForm({ user }: { user: UserProfile }) {
  const [content, setContent] = useState("");
  const [image, setImage] = useStatestring | null>(null);
  const fileInputRef = useRefHTMLInputElement>(null);
  const queryClient = useQueryClient();

  const createPostMutation = useMutation({
    mutationFn: async (newPost: {
      content: string;
      handle: string;
      image?: string;
    }) => {
      const res = await client.post.create.$post(newPost);
      return await res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["posts"] });
      setContent("");
      setImage(null);
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (content.trim()) {
      createPostMutation.mutate({
        content,
        handle: user.handle,
        image: image || undefined,
      });
    }
  };

  const handleImageSelect = (e: React.ChangeEventHTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        const base64String = reader.result as string;
        setImage(base64String);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleImageButtonClick = () => {
    fileInputRef.current?.click();
  };

  return (
    form onSubmit={handleSubmit} className="p-4">
      div className="flex gap-3">
        div className="flex-shrink-0">
          {user.avatarUrl ? (
            Image
              src={user.avatarUrl}
              alt={user.name}
              width={40}
              height={40}
              className="rounded-full"
            />
          ) : (
            div className="w-10 h-10 rounded-full bg-gray-200">div>
          )}
        div>
        div className="flex-grow">
          textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            rows={3}
          />

          {image && (
            Image src={image} alt="Upload preview" width={500} height={300} />
          )}

          div>
            button type="button" onClick={handleImageButtonClick}>
              画像
            button>
            input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              className="hidden"
              onChange={handleImageSelect}
            />
          div>

          button type="submit">投稿するbutton>
        div>
      div>
    form>
  );
}

export default function PostForm({ user }: { user: UserProfile }) {

  const queryClient = useQueryClient();

  const createPostMutation = useMutation({
    mutationFn: async (newPost: {
      content: string;
      handle: string;
      image?: string;
    }) => {
      const res = await client.post.create.$post(newPost);
      return await res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["posts"] });
      setContent("");
      setImage(null);
    },
  });

    mutationFn: async (newPost: {
      content: string;
      handle: string;
      image?: string;
    }) => {
      const res = await client.post.create.$post(newPost);
      return await res.json();
    },

    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["posts"] });
      setContent("");
      setImage(null);
    },
  });

        div className="flex-grow">
          textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            rows={3}
          />

          div>
            button type="button" onClick={handleImageButtonClick}>
              画像
            button>
            input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              className="hidden"
              onChange={handleImageSelect}
            />
          div>

  const fileInputRef = useRefHTMLInputElement>(null);
  
  (省略)
  
  const handleImageButtonClick = () => {
    fileInputRef.current?.click();
  };
  (省略)

            input
              ref={fileInputRef}

  const handleImageSelect = (e: React.ChangeEventHTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        const base64String = reader.result as string;
        setImage(base64String);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (content.trim()) {
      createPostMutation.mutate({
        content,
        handle: user.handle,
        image: image || undefined,
      });
    }
  };

$ touch src/server/routers/profile-router.ts

import { z } from "zod";
import { users } from "../db/schema";
import { j, publicProcedure } from "../jstack";
import { eq } from "drizzle-orm";

export const profileRouter = j.router({
  get: publicProcedure
    .input(
      z.object({
        userId: z.string(),
      })
    )
    .query(async ({ ctx, c, input }) => {
      const { db } = ctx;
      const { userId } = input;

      const user = await db
        .select()
        .from(users)
        .where(eq(users.clerkId, userId))
        .limit(1);

      return c.json(user[0] ?? null);
    }),
});

  get: publicProcedure
    .input(
      z.object({
        userId: z.string(),
      })
    )

     const { userId } = input;

      const user = await db
        .select()
        .from(users)
        .where(eq(users.clerkId, userId))
        .limit(1);

      return c.json(user[0] ?? null);

import { j } from "./jstack";
import { clerkWebhookRouter } from "./routers/clerk-webhook-router";
import { pingRouter } from "./routers/ping-router";
import { postRouter } from "./routers/post-router";
import { profileRouter } from "./routers/profile-router";

/**
 * This is your base API.
 * Here, you can handle errors, not-found responses, cors and more.
 *
 * @see https://jstack.app/docs/backend/app-router
 */
const api = j
  .router()
  .basePath("/api")
  .use(j.defaults.cors)
  .onError(j.defaults.errorHandler);

/**
 * This is the main router for your server.
 * All routers in /server/routers should be added here manually.
 */
const appRouter = j.mergeRouters(api, {
  post: postRouter,
  systems: pingRouter,
  webhook: clerkWebhookRouter,
  profile: profileRouter, // 追加
});

export type AppRouter = typeof appRouter;

export default appRouter;

"use client";
import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
import { client } from "@/lib/client";
import { useAuth } from "@clerk/nextjs";
import { useQuery } from "@tanstack/react-query";
import React from "react";

function Home() {
  const { userId } = useAuth();

  const { data: user } = useQuery({
    queryKey: ["user", userId],
    queryFn: async () => {
      if (!userId) return null;
      const res = await client.profile.get.$get({ userId });
      return await res.json();
    },
  });

  if (!user) {
    return div>Loading...div>;
  }

  return (
    div className="max-w-xl mx-auto min-h-screen">
      div>
        PostForm user={user} />
      div>
      PostList />
    div>
  );
}

export default Home;

      const res = await client.profile.get.$get({ userId });

    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["posts"] });
      setContent("");
      setImage(null);
    },

"use client";
import { useState, useRef } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { client } from "@/lib/client";
import Image from "next/image";
import { UserProfile } from "@/domain/User";

export default function PostForm({ user }: { user: UserProfile }) {
  const [content, setContent] = useState("");
  const [image, setImage] = useStatestring | null>(null);
  const fileInputRef = useRefHTMLInputElement>(null);
  const queryClient = useQueryClient();

  const createPostMutation = useMutation({
    mutationFn: async (newPost: {
      content: string;
      handle: string;
      image?: string;
    }) => {
      const res = await client.post.create.$post(newPost);
      return await res.json();
    },
    onSuccess: () => {
      // 修正
      queryClient.invalidateQueries({ queryKey: ["posts", user.handle] });
      setContent("");
      setImage(null);
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (content.trim()) {
      createPostMutation.mutate({
        content,
        handle: user.handle,
        image: image || undefined,
      });
    }
  };

  const handleImageSelect = (e: React.ChangeEventHTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        const base64String = reader.result as string;
        setImage(base64String);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleImageButtonClick = () => {
    fileInputRef.current?.click();
  };

  return (
    form onSubmit={handleSubmit} className="p-4">
      div className="flex gap-3">
        div className="flex-shrink-0">
          {user.avatarUrl ? (
            Image
              src={user.avatarUrl}
              alt={user.name}
              width={40}
              height={40}
              className="w-10 h-10 rounded-full"
            />
          ) : (
            div className="w-10 h-10 rounded-full bg-gray-200">div>
          )}
        div>
        div className="flex-grow">
          textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            rows={3}
          />

          {image && (
            Image src={image} alt="Upload preview" width={500} height={300} />
          )}

          div>
            button type="button" onClick={handleImageButtonClick}>
              画像
            button>
            input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              className="hidden"
              onChange={handleImageSelect}
            />
          div>

          button type="submit">投稿するbutton>
        div>
      div>
    form>
  );
}

"use client";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { client } from "@/lib/client";
import { Post } from "@/domain/Post";
import { UserProfile } from "@/domain/User";

// 修正
export default function PostList({ user }: { user: UserProfile }) {
  const queryClient = useQueryClient();

  const { data: posts, isLoading } = useQueryPost[]>({
    queryKey: ["posts", user.handle], // 修正
    queryFn: async () => {
      const res = await client.post.all.$get();
      const data = await res.json();
      return data as Post[];
    },
  });

  if (isLoading || !posts) {
    return p>Loading...p>;
  }

  return (
    div className="divide-y divide-gray-100">
      {posts.map((post: Post) => (
        div key={post.id}>
          p>{post.content}p>
          p>{post.like}p>
          p>{post.image}p>
          p>{post.name}p>
          p>{post.handle}p>
        div>
      ))}
    div>
  );
}

export default function PostList({ user }: { user: UserProfile }) {

    queryKey: ["posts", user.handle],

"use client";
import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
import { client } from "@/lib/client";
import { useAuth } from "@clerk/nextjs";
import { useQuery } from "@tanstack/react-query";
import React from "react";

function Home() {
  const { userId } = useAuth();

  const { data: user } = useQuery({
    queryKey: ["user", userId],
    queryFn: async () => {
      if (!userId) return null;
      const res = await client.profile.get.$get({ userId });
      return await res.json();
    },
  });

  if (!user) {
    return div>Loading...div>;
  }

  return (
    div className="max-w-xl mx-auto min-h-screen">
      div>
        PostForm user={user} />
      div>
      
      PostList user={user} />
    div>
  );
}

export default Home;