글작성기능 2 부분 서버로 데이터 넘기기 404에러

post 요청을 넣는데 404 페이지가 뜨는 이슈가 있습니다.
일단 파일 위치는 사진 첨부 하겠습니다. app폴더 밖에 pages폴더가 있는거 같은데 무슨 문제일가요..
콘솔 확인해보니 post 요청 한번 가고 get요청이 계속 갑니다
- new.js -

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

export default async function handler(req, res) {
console.log(req);
if (req.method == "POST") {
let db = (await connectDB).db("forum");
let result = db.collection("post").insertOne(req.body);
return res.redirect(302, "/cafe");
}
}
- pages.js -

export default function Write() {
return (
<div className="w-[828px] m-auto mt-[50px]">
<h4 className="text-[25px] border-b-[1px] pb-[10px] text-[#081910]">
 카페추천
</h4>
<form action="/api/post/new" method="POST">
<input
className="block px-[6px] py-[10px] mt-[20px] w-[828px] border-[1px] rounded-lg"
name="title"
placeholder="제목을 작성해주세요"
/>
<textarea
className="block w-[828px] h-[400px] border-[1px] rounded-lg mt-[10px] px-[6px] pt-[10px] resize-none"
name="content"
placeholder="내용을 작성해주세요"
/>
<button
className="mt-[15px] flex sm:inline-flex justify-center items-center bg-teal-500 hover:bg-teal-600 active:bg-green-700 focus-visible:ring ring-green-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2"
type="submit"
>
 작성완료
</button>
</form>
</div>
 );
}