실시간 입력폼 만들기(3): Dynamic routes for Next.js

출력된 result들의 상세 페이지를 만들어 봅시다.

Link를 이용하여 자세히보기 버튼을 만들어 줍니다.

import

 

자세히보기가 생겼다.

자세히보기를 누르면 상세페이지로 이동하도록해야하는데, 이 상세페이지를 만들기 위해서는 백엔드를 건드려야 한다.

---

//Backend 

Next.js는 프론트엔드와 백엔드가 같이 혼합된 형태의 프레임워크이다.

 

server side handling 을 위한 framework

-Dynamic routes for Next.js : Next routes (universal)

(어떤 라이브러리는 프론트엔드만, 어떤 라이브러리는 백엔드만 지원한다.

그런데 양쪽을 모두 지원하는 경우가 있고 그런 라이브러리를 "universal"하다고 소개한다.)

설치 : yarn add next-routes

express 도 같이 설치했다.

server.js 작성

파일을 만들고 작성한다.

routes.js작성

next-routes 사용을 위한 파일 설정

routes.js 작성후에 server.js에 아래 하얀 네모안의 내용을 추가한다.

 

Package.json 수정

Before

 

After

배포버전과 개발버전

---