next.js router 이동할때 보여지는 url 변경

router.push 함수의 두 번째 파라미터인 as를 사용하면 될 것 같아요. next/router 공식문서(https://nextjs.org/docs/api-reference/next/router)를 보면 as 파라미터는 브라우저에서 실제로 보이는 path를 위한 Optional decorator라고 설명 되어있습니다. 사용법은 router.push의 첫 번째 인자에는 full path를 적고, 두 번째 인자로 브라우저에 표시할 path를 작성하면 됩니다. 질문에서 말씀해주신 path를 예로보면 router.push('/books/create?bookId=106?username="john"?keywordId=200', '/books/create)와 같이 작성하면 되겠네요. 위와 같이 라우팅하면 /books/create 페이지에서 router 객체를 콘솔에 찍었을 때 쿼리는 그대로 전달되어 있고 브라우저 url에서는 as값으로 넘겨준 /books/create만 노출되는걸 확인할 수 있을거에요! pathname, query를 이용해서 다음과 같이 더 깔끔하게 작성할 수도 있겠네요! router.push({ pathname: '/books/create', query: { bookId: 106, username: "john", keywordId:200 } }, '/trends')

넥스트에서는 useRouter Hook을 사용하여 쿼리 파라미터를 변경할 수 있습니다. useRouter Hook을 사용하여 페이지의 쿼리 파라미터를 변경하고 URL을 간결하게 만들 수 있습니다. 예를 들어, books 페이지에서 bookId, username, keywordId를 쿼리 파라미터로 전달하고 싶은 경우 다음과 같이 코드를 작성할 수 있습니다. 아래 코드에서 router.push() 메서드를 사용하여 books/create 페이지로 이동하고 query 속성을 사용하여 쿼리 파라미터를 설정합니다. 이 방법을 사용하면 URL이 간결하게 유지됩니다. 즉, books/create?bookId=106&username=john&keywordId=200 이렇게 보여지게 됩니다.

1import { useRouter } from 'next/router';
2
3function Books() {
4  const router = useRouter();
5
6  const handleButtonClick = () => {
7    router.push({
8      pathname: '/books/create',
9      query: { bookId: '106', username: 'john', keywordId: '200' },
10    });
11  };
12
13  return (
14    <div>
15      <button onClick={handleButtonClick}>Create Book</button>
16    </div>
17  );
18}