Next.js - 기본 동작 2편

 

 

 

 

 

기본 동작 2편에서는 백엔드에 해당하는 부분을 다룰 것이다. api를 통신하기 위하여 포스트맨도 함께 사용할 것이다. 

 

api route handlers

 

페이지의 라우팅하는 방법과 비슷하게 간다.

 

이때에는 app디렉토리 아래에 api라는 폴더를 생성한 후, 라우팅되기위한 폴더와 그 아래에 route.js 단일 파일을 생성하여 엔드포인트를 만든다.

 

 

route.js파일에는 다음과 같이 만들어서 응답한다.

 

 

Postman으로 해당 엔드포인트에 요청을 보내면 아래와 같이 응답이 온다.

 

json형태로의 응답값을 보내고 싶다면 NextResponse를 사용한다.

 

 

다음과 같이 쿼리스트링을 넘길 때에는 어떻게 해야할까? ( http://localhost:3000/api/sample/search?userId=2)

 

지금껏 해왔던 방식대로 search폴더를 만든다음 아래에 route.js 파일을 생성한다. 그 후에 아래와 같이 params를 받아온다.  params를 받아서 원하는 값을 추출하면 될 것이다.

const { searchParams } = new URL(req.url);

const qs = searchParams.get(’userId’)

 

client component

 

React관련 기능을 쓰려면 클라이언트 컴포넌트로 작성되야 한다.

 

Next.js에서 컴포넌트가 클라이언트에서 작동하라고 지정하는 디렉티브를 쓰는데 파일 첫 줄에 ‘use client’ 라고 입력하면 그 파일은 클라이언트 컴포넌트로 취급되고 컴파일 된다.

 

 

---

잘못된 부분이나 보완할 점이 있으면 댓글 달아주시면 감사하겠습니다. 😉

 

현재 내용 추가 중입니다. 

 

 

Next.js 13의 Client Component 살펴보기