next.js server

DB에 위험을 낮추기 위해서 바로 DB로 데이터를 전송하지 않고 서버에 저장하고 나서 DB에 넣는다.

next는 자동 라우팅 기능이 있어서 쉽게 서버를 다룰 수 있다.

(즉, 누군가가 api/test로 데이터를 GET/POST/...등을 요청하면 파일안의 코드를 실행해준다.)

 

파일부터 생성하자. 사용자가 요청하면 데이터를 보여줄 서버가 필요하다.

src파일 아래 page/api/test.js파일을 만들어 준다.(기존에 생성된 api파일 아래 만들어도 된다.)

DBmongo를 사용하고 있으므로 거기에 맞게 데이터를 요청해야한다.

 

먼저 html,

      <h4>글 불러오기</h4>
                     // action URL로 POST를 한다. (GET,POST)만 가능하다.
      <form action="/api/test" method="GET">
        <button type="submit">버튼</button>
      </form>

/api/test로 데이터를 GET요청 한다.

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

export default async function handler(req, res) {
  let client = await connectDB;
  const db = client.db('forum');
  let result = await db.collection('post').find().toArray();

  if (req.method === 'GET') {
    return res.status(200).json(result);
  }
}

DBmongo에서 가져온 데이터를 변수 result에 담아서 json형태로 바꾼 다음 보여준다.

만약 return 이 없다면 무한로딩이 돌아갈 수 있다. 요청이 완료 되었으면 그에 해당하는 응답은 있어야한다.

---

그럼 이제 입력값을 POST 해본다.

//html

<h4>글 작성</h4>
 <form action="/api/post/new" method="POST">
  <input name="title" placeholder="글 제목" />
  <input name="content" placeholder="글 내용" />
  <button type="submit">버튼</button>
 </form>

input의 입력값을 서버에서 받기위해선 요청.body를 하면된다.

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

export default async function newList(req, res) {
  if (req.method === 'POST') {
    const db = (await connectDB).db('forum');
    let result = await db.collection('post').insertOne(req.body); //데이터 넣기
    return {
      status: res.status(200).redirect('/list'), //성공하면 list페이지로 다시가기
    };
  }
}

데이터도 잘 들어오는 것을 확인할 수 있었다.

list page에 글 목록을 미리 뿌려주고 있었어서 글 목록을 작성하고 나서 list로 가면 출력이 잘 되고 있다.

다음에는 수정, 삭제하는 기능을 정리해야겠다.

여기까지 끝