회원가입 구현 숙제를 해보았는데요

Q. 연습삼아서 회원가입기능을 만들어옵시다. 

- 유저가 회원가입페이지에서 아이디, 비번을 입력하고 전송버튼 누르면 그 데이터를 DB의 컬렉션에 보관해두면 그게 회원가입기능 아니겠습니까.

- 물론 비번은 암호화해서 저장하는게 좋지만 지금은 무시하고 기능만 만들어봅시다. 

- 이미 존재하는 아이디로는 가입할 수 없게 막아야합니다.

export default function Join() {
  return (
    <div>
      <h2>회원가입</h2>
      <form method="post" action="/api/join">
        <div>
          id:
          <input name="id" />
        </div>
        <div>
          password:
          <input name="password" />
        </div>
        <button type="submit">회원가입</button>
      </form>
    </div>
  );
}

join.js

import { connectDB } from "@/util/database";

export default async function handler(request, response) {
  if (request.method === "POST") {
    const client = await connectDB;
    const db = client.db("forum");
    let result = await db
      .collection("userinfo")
      .findOne({ id: request.body.id });
    console.log(result);
    if (result === null) {
      await db.collection("userinfo").insertOne(request.body);
      response.status(200).json("회원가입성공");
    } else {
      response.status(400).json("중복된 아이디가 있습니다.");
    }
  }
}

이렇게 구현을 하였는데요 
중복된 아이디가 있는 경우 api/join 으로 이동이 아닌 
기본 회원가입 페이지 join 에서 중복된 아이디가 있다는 메세지를 받을수 잇는 방법을 잘 모르겠습니다.
send 를 사용해보았지만 .. 제 구글링 실력이 모자란지 검색을 어떻게 해야하는지 모르는것인지 방법이 없을까요?