Next.js Discord

Discord Forum

Confused between Server And Clinet Component

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
hey guys,i'm new to next and building my first project in it.What i want to do is to create a room in database when user clicks on create-room and redirect user to that room.same with join-room but this time join room instead of creating.

this is my app/page.tsx
import RoomComponent from "./components/RoomComponent";

export default function Page() {
  return <RoomComponent />;
}


app/component/RoomComponent.tsx
"use client";
import { getRoomChat, createRoom } from "app/action/room";
import { useRouter } from "next/navigation";
import { useRef } from "react";

const RoomComponent = () => {
  const router = useRouter();
  const createRoomRef = useRef<HTMLInputElement | null>(null);
  const joinRoomRef = useRef<HTMLInputElement | null>(null);
  return (
    <main>
      <section>
        <input ref={createRoomRef} type="text" placeholder="enter room-name" />
        <button
          onClick={async () => {
            try {
              const roomId = await createRoom(createRoomRef.current!.value);
              router.push(`/room/${roomId}`);
            } catch (e) {
              return <p>{e}</p>;
            }
          }}
        >
          Create Room
        </button>
      </section>
      <section>
        <input ref={joinRoomRef} type="text" placeholder="enter room-name" />
        <button
          onClick={async () => {
            try {
              const roomId = await getRoomChat(joinRoomRef.current!.value);
              router.push(`/room/${roomId}`);
            } catch (e) {
              return <p>{e}</p>;
            }
          }}
        >
          Join Room
        </button>
      </section>
    </main>
  );
};

export default RoomComponent;

issue is it says i can't use functions like `create room here since its a client component.My question is what is the correct architecture for such tasks

6 Replies

Asian black bearOP
action/room.ts
"use server";
import { prisma } from "@repo/db";
import { auth } from "app/lib/auth";
import { headers } from "next/headers";

export async function createRoom(roomName: string) {
  const session = await auth.api.getSession({
    headers: await headers(),
  });
  console.log(session);
  if (!session) throw new Error("Not authenticated");
  const roomSlug = roomName.trim().toLowerCase().replace(" ", "-");
  let room = await prisma.room.findUnique({
    where: { roomSlug },
  });
  if (room) {
    throw new Error("room with this name already exists");
  }
  room = await prisma.room.create({
    data: {
      roomSlug,
      roomName,
      adminId: session.user.id,
    },
  });
  return room.id;
}
@Asian black bear hey guys,i'm new to next and building my first project in it.What i want to do is to create a room in database when user clicks on `create-room` and redirect user to that room.same with `join-room` but this time join room instead of creating. this is my `app/page.tsx` ts import RoomComponent from "./components/RoomComponent"; export default function Page() { return <RoomComponent />; } `app/component/RoomComponent.tsx` ts "use client"; import { getRoomChat, createRoom } from "app/action/room"; import { useRouter } from "next/navigation"; import { useRef } from "react"; const RoomComponent = () => { const router = useRouter(); const createRoomRef = useRef<HTMLInputElement | null>(null); const joinRoomRef = useRef<HTMLInputElement | null>(null); return ( <main> <section> <input ref={createRoomRef} type="text" placeholder="enter room-name" /> <button onClick={async () => { try { const roomId = await createRoom(createRoomRef.current!.value); router.push(`/room/${roomId}`); } catch (e) { return <p>{e}</p>; } }} > Create Room </button> </section> <section> <input ref={joinRoomRef} type="text" placeholder="enter room-name" /> <button onClick={async () => { try { const roomId = await getRoomChat(joinRoomRef.current!.value); router.push(`/room/${roomId}`); } catch (e) { return <p>{e}</p>; } }} > Join Room </button> </section> </main> ); }; export default RoomComponent; issue is it says i can't use functions like `create room here since its a client component.My question is what is the correct architecture for such tasks
B33fb0n3
can you share a screenshot of the error? We need the exact details of it, so a screenshot would be perfect
Asian black bearOP
okay something weird.happend.i restarted the server and the i no longer see the issue now
B33fb0n3
yea, your approach in general is correct. If I am allowed to give you a tipp: you can have one single input field to "Create or Join Room" and then you always call the "createRoom" action. Inside that action, you check if there is an existing one (you already doing that) and instead of throwing an error, you just return the ID of the already existing room. For the client the behavior is the same
Asian black bearOP
um that doesn't sounds good. for example if someone wants to join existnig room but has wrong id,he would like to immediately leave the room causing unneccessary creation