next.js에서 현재 url의 정보를 가져오고 싶어요

가져올 수 있습니다. 일단 useRouter나 withRouter를 이용해서 router 객체를 받을 수 있습니다. url의 문자 그대로 string만 필요하시면 asPath를 이용하시면 됩니다. const router = useRouter() const nowUrl = router.asPath 이렇게 하면 nowUrl에는 현재 url 값이 string으로 들어있습니다. 만약 pages/project/[projectId] 이런식으로 생성되어 있는 동적인 url이라면 router.query를 이용하시면 { projectId: 1, target: 1, } 이런식으로 정보를 얻을 수 있습니다.

React 애플리케이션에서 현재 URL의 정보를 가져오기 위해서는, ' window.location ' 객체를 사용하면 됩니다. ' window.location ' 객체에는 현재 URL의 정보를 포함한 여러 가지 프로퍼티들이 있습니다. 다만, Next.js에서는 ' window ' 객체를 사용하기보다는 ' useRouter() ' 훅을 사용하는 것이 권장됩니다. 이를 사용하면 Next.js의 라우터 정보를 사용할 수 있으며, 서버 측에서 렌더링되는 경우에도 문제없이 동작합니다. 예를 들어, 현재 URL의 정보를 한 번에 가져오고 싶은 경우에는 다음과 같이 ' useRouter() ' 훅을 사용할 수 있습니다. 아래 코드에서는 ' useRouter() ' 훅을 사용하여 ' router ' 객체를 가져온 뒤, ' pathname ' 프로퍼티를 통해 현재 URL의 경로 정보를 가져오고, ' query ' 프로퍼티를 통해 URL 쿼리 파라미터 정보를 가져올 수 있습니다. 이렇게 가져온 정보를 이용하여 컴포넌트를 렌더링하거나 다른 로직을 수행할 수 있습니다.

1import { useRouter } from "next/router";
2
3function MyComponent() {
4  const router = useRouter();
5  const { pathname, query } = router;
6
7  console.log(pathname); // "/project/3"
8  console.log(query); // { target: "1" }
9
10  return <div>...</div>;
11}