Nextjs 에서 API Routes 사용하기

db 를 connect 해서 사용하지 말고 API 를 호출해서 사용하기 위한 EndPoint 를 만들어주는 역할을 한다.

루트에서 pages/api 폴더를 생성하면 endpoint 가 만들어지게 되며 이를 이용하여 api 를 만들 수 있다.

 

/pages/api/post/write 라는 api 를 만들어서 사용해보자!

 

별도의 백엔드서버를 구축하도록 합니다. 위치는 루트에서 pages/api 폴더를 만드시면 Endpoint 가 생성되며 /api 로 접근이 가능해집니다. 아래 구성을 보면, pages/api 폴더 밑에 각 js 파일들이 만들어진 것을 볼 수 있습니다.

우리는 이제 /api/post/write 를 생성해서 사용해보겠습니다.

• 몽고 db 커넥트 후, 단일 객체를 insert 해줍니다.
• 잘 완료시 redirect 를 사용하여 페이지가 이동될 것입니다.
• 실패시 catch 로 잡히며 db error 가 노출될 것 입니다.

// write.js
import { connectDB } from "@/util/db"

export default async function writeHandler(req, res) {
  try {
    const db = (await connectDB).db('forum')
    const result = await db.collection('post').insertOne(req.body)
	console.log('success', result)

    res.redirect(302, '/')
  } catch (error) {
    return res.status(500).json('db error')
  }
}

다음과 같이 insertOne 을 사용해서 단일객체를 추가할 수 있습니다.

만약, 다수객체를 넣고 싶으면 insertMany([ { … },{ … } ]) 를 사용하시면 됩니다.

이제 아래와 같이 write/page.tsx 를 만들어서 form 객체를 이용해 submit 을 날리면, 위에서 만든 백엔드 서버에서 로직이 실행될 것 입니다. 잘되면, 루트 페이지로 이동할 것 입니다.

export default async function Write() {
  return (
    <div className="p-20">
      <form action="/api/post/write" method="POST">
        <input name="title" placeholder="글제목"/>
        <input name="content" placeholder="글내용"/>
        <button type="submit">전송</button>
      </form>
    </div>
  )
}