LINEでURLを共有した時に、外部ブラウザからリンクを開くように設定する

WebアプリやWebサイトのURLを
LINEや、Instagramとかで共有すると
そのアプリのブラウザでリンクが開かれてしまいます。
（LINEであればLINEのブラウザ、InstagramならInstagramのブラウザ）

でも、できれば、ユーザーがいつも使っているブラウザで開いてもらいたい。
そうすれば、ブックマークへの登録も簡単になるし。。。

というときのやり方がこちらです！

共有するURLのクエリにopenExternalBrowserを追加する

共有するURLのクエリの部分に
openExternalBrowser=1
を追加することで、
LINEなどで共有しても、ChromeやSafariなどで開かれることになります♪
https://sakidesign.com/line-browser/ を参照

・普通のURLで共有したら、LINEブラウザで開かれること
・クエリにopenExternalBrowser=1を追加したら、Chromeで開いてくれること
を確認できました！(≧▽≦)

openExternalBrowser=1
をURLのクエリ部分に追加すれば、LINEで共有しても、外部ブラウザで開いてくれる。 pic.twitter.com/GUQwCyGnc8

— ナイスガイ (@Skz3Px7cebZBn0a) January 10, 2021

JSで実装しようかと思ってたんですが、結構楽にできました。(笑)

openExternalBrowserがクエリにあったら、ルートに戻すようルーティングする。

「～/?openExternalBrowser=1」でURLを共有すると、ユーザーはたぶん「～/?openExternalBrowser=1」をブックマークしてしまうことになります。
なので、
・クエリに「～/?openExternalBrowser=1」があれば、「～/」に遷移する。
というロジックを組んでおくと、すっきりすると思います。

Next.jsだとこんな感じですね。

index.js

import React from "react";
import { useRouter } from "next/router";

export default function Home() {
  const router = useRouter();
  const OPEN_EXTERNAL_BROWSER = router.query.openExternalBrowser
    ? router.query.openExternalBrowser
    : null;
  React.useEffect(() => {
    if (OPEN_EXTERNAL_BROWSER) {
      router.push("./");
    }
  });
  return <div>Hello world</div>
}