Next.js 13 - 9. backend

Backend

이제 애플리케이션에 생명력을 불러넣어보자.

지금 애플리케이션은 하드코딩 되어 있는 상태이다. 이제 백엔드를 구축해서 백엔드에 있는 데이터를 가지고 와서 동적으로 내용을 표시하도록 처리하자.

 

Next.js를 순수하게 백엔드로도 사용하고 싶다면 매뉴얼의 라우팅 쪽에 Route Handlers 부분을 참고하면 next.js로 api를 구축하는 방법도 공부할 수 있다.

 

우리는 json server라는 것을 통해 빠르게 백엔드를 구축해보자.

npx json-server --port 9999 --watch db.json

 

json-server를 9999 포트에서 실행시킬 것이고 db.json이라는 파일에 내용 정보를 저장하고 그 정보가 바뀌면 바로 반영하기 위해 watch 옵션을 주자. 

 

  Resources
  http://localhost:9999/posts
  http://localhost:9999/comments
  http://localhost:9999/profile

  Home
  http://localhost:9999

위의 명령어를 실행하면 db.json이 생성되고 터미널에서 위와 같이 resources 부분의 주소를 확인할 수 있다. 해당 주소로 가면 데이터를 확인할 수 있다.

 

원하는 데이터를 보여주기 위해서 db.json 파일을 수정하면 된다. 예를 들어 topics라는 데이터를 추가하고 싶다면 아래와 같이 작성하면 되는데 watch 옵션을 사용했기 때문에 아래와 같이 실시간으로 변경되는 주소를 확인할 수 있다.

{
  "topics":[
    {"id":1, "title":"html","body":"html is ..."},
    {"id":2, "title":"css","body":"css is ..."}
  ],
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

  Resources
  http://localhost:9999/topics
  http://localhost:9999/posts
  http://localhost:9999/comments
  http://localhost:9999/profile

  Home
  http://localhost:9999

 

이 데이터는 파일에 있는 데이터를 json 형태로 응답한다.

개발자 도구를 열고 네트워크 탭을 열고 esc키를 누르면 console 창이 나온다. 

 

아래 코드는 데이터에 접근하고 데이터를 json 형태로 바꿔 콘솔에 출력하는 코드이다. 실행하면 서버와 통신이 이뤄지고 아래와 같은 결과가 나온다.

fetch('http://localhost:9999/topics')
    .then((resp)=>{
        return resp.json();
    }).then(result => {
        console.log(result);
    });

---

참고자료

생활코딩 - Next.js 13

https://opentutorials.org/course/5098

Next.js 13 - 생활코딩