Next.js에서 현재 URL 클립보드에 복사하기

 

✔️ 현재 URL 가져오기

현재 URL을 가져올 때에는 asPath가 좋다

import { useRouter } from "next/router";

const copyURL = () => {
 const {asPath} = useRouter();
}

 

✔️ 문제 확인

그런데 현재 URL을 클립보드에 복사하고 알릴 때에는 아래 코드가 최고다. 아래 블로그를 그대로 사용하였으며 나중에 다시 쓸 때 잊지않기 위해 기록용으로 내 블로그에 포스팅해둔다. 

// 현재 URL을 클립보드에 복사하고 알림
export const copyURL = () => {
  let currentUrl = window.document.location.href;
  let t = document.createElement("textarea");
  document.body.appendChild(t);
  t.value = currentUrl;
  t.select();
  document.execCommand("copy");
  document.body.removeChild(t);

  alert("링크가 복사되었습니다.");
};

 

현재 URL 클립보드로 복사하기(라이브러리X)

 

 

✔️ 문제 해결

하지만 alert가 안 예쁜데, alert를 꾸미기 위해서는 MUI와 같은 다른 라이브러리를 사용하는 것이 좋다.

Alert API - MUI