Next.js에서 URL에 데이터를 담는 두 가지 방법

 Next.js에서 URL에 데이터를 담는 두 가지 방법이 있다. 그것은 바로 query string, URL Parameter이다. 

 

1. Query string / URL Parameter

/post?id=12345
/search?name=홍길동&location=서울
/api/delete?id=${item._id}

 Query string이란 대략 이런 형태이다. url path 뒤에 물음표로 시작한다. 그리고 데이터이름=값 형태로 데이터를 전송할 수 있다. 만약 데이터를 여러개 보내고 싶다면 &를 이용해 데이터를 더할 수 있다.

 

/search/name/홍길동
/api/delete/${item._id}

 URL Parameter는 그냥 /뒤에 데이터를 넣은 것이다. 

 

2. 서버에서 데이터를 확인하는 법

query string의 경우

URL Parameter의 경우

 각 방법의 마지막 예시를 보자. 우선, query string은 /api/delete?id=${item._id}이다. 이 경우, 위의 첫 번째 사진과 같이 pages/api 경로(폴더)의 delete.js 파일에서 확인할 수 있다. 그리고 URL Parameter의 경우, /api/delete/${item._id}이다. 이는 두 번째 사진과 같이 pages/api/delete 경로(폴더)의 [id].js 파일에서 확인할 수 있다. 그리고 두 경우, 아래와 같이 모두 같은 코드를 이용하여 값을 확인할 수 있다. Query string과 URL Parameter의 예시와 아래 코드는 실제로 공부를 하며 작성했었던 코드이다.

 

export default async function handler(req, res) {
  const db = (await connectDB).db("forum");
  const { id } = req.query;
  
  console.log(req.query);
  console.log(id);
}

결과 사진