외부 URL에 새창으로 이동하기 (useRouter, window.location, window.open)

 

✔️ 필요성

Next.js에서 어떤 버튼을 눌렀을 때 외부 URL에 새 창(new tab)으로 이동하고 싶다.

 

 

 

 

✔️ 문제 확인

처음에는 next/router의 useRouter를 사용했는데 새 창으로 이동이 안 된다.

 import { useRouter } from "next/router";
 
 const href = '이동하고자 하는 URL'

 const router = useRouter();
  const onPress = () => {
    router.push(href);
  };

 

공식 문서를 보니 external URL에는 router.push 보다 window.location이 적절하다고 한다.

https://nextjs.org/docs/api-reference/next/router

next/router | Next.js

 

 

 

시킨대로 window.location.href 를 사용했는데 이번에도 새 창으로 띄워지지는 않는다.

const onPress = () => {
    window.location.href = href;
};

 

 

 

✔️ 문제 해결

좀 더 찾아보니 새 창을 띄울 때에는 window.open을 사용하면 된다고 한다.

const onPress = () => {
    window.open(href);
};

훨씬 코드도 깔끔한 것 같다!