Next.js 사용 방법 및 DynamoDB 연결

Next.js란?

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링 server-side rendering(SSR), 정적 사이트 생성 static site generation(SSG), 증분 정적 재생성 incremental static regeneration(ISR)과 같은 다양하고 풍부한 기능을 제공한다.

 

express 프레임워크와 다르게 next.js는 req.method 형식을 쓰며,

DynamoDB 테이블에 데이터를 넣기 위해서 put형식을 쓴다.

 

 

▶ Next.js POST 방식

---

import AWS from 'aws-sdk';				

const docClient = new AWS.DynamoDB.DocumentClient({
  region: 'ap-northeast-2',
  endpoint: "http://dynamodb.ap-northeast-2.amazonaws.com"
});

# http 메소드가 POST일 때
if (req.method === 'POST') {     	
      if(resultdynamo.length !== 0) {
        var params = {
       	  # dynamodb 테이블 이름
          TableName: "mission_link_dynamodb_table",
          # dynamodb에 들어갈 키 : 속성
          Item: { 				    
            "id": req.body.transactionId,
            "mission_id" : missionId,
            "user_id": userId,
            "streamer_id" : req.body.streamer_id,
            "action": "bet",
            "amount": req.body.amount,
          }
        }
      }

    console.log(params);
    
	# dynamodb에 데이터를 넣는다.
    docClient.put(params).promise()	  	   
    .then(data => {
      res.status(200).json({message: '배팅 성공!!'})
    })
    .catch(err => {
      res.status(400).json({message: 'mission is undifiend'});
    });
  }

 

 

다음은, 리팩토링하면서 바꾼 PUT 방식이다.

 

▶ Next.js PUT 방식

---

import { TYPES, container } from '../../../../utils/container';

export default async function handler(req, res) {
  const METHOD = req.method;

  switch(METHOD) {
    # PUT일 때
    case 'PUT': 			
      # handlePut 함수 호출
      await handlePut(req, res);
      break;
  }
}

export const handlePut = async (req, res) => {
  const { missionId } = req.query;

  const {
    user_id, 
    amount 
  } = req.body

  try {
    const missionService = container.get(TYPES.MissionService);

    const mission = await missionService.betOnMission(user_id, missionId, amount);

    const data = {
      message: 'Successful mission betting',
      data: mission
    }

    return res.status(200).json(data);
  } catch (error) {
    console.error(error.stack);
    const errorMessage = 'error fail on mission';
    return res.status(500).json({ error: errorMessage });
  }
}