Next.jsでWindowの位置を動かす

今回やること

Next.jsで、window.openを使い新規ウィンドウを作成し、
moveByメソッドでウィンドウを相対的に移動させる。

コード

コード説明

const [childWindow, setChildWindow] = useState<Window | null>(null);

ここで子ウィンドウを入れるためのStateを作っています。

function moveChildWindow(x: number, y: number) {
    childWindow?.moveBy(x, y);
}

ウィンドウを動かす関数はこれです。

<button onClick={() => moveChildWindow(0, -100)}>🔼</button>
<button onClick={() => moveChildWindow(0, 100)}>🔽</button>
<button onClick={() => moveChildWindow(-100, 0)}>◀️</button>
<button onClick={() => moveChildWindow(100, 0)}>▶️</button>

この部分でボタンを作っています。

---

ウインドウを扱う場合はクライアント側でレンダリングが必要です。
ウィンドウが動かせると色々できそうですね！
最後まで読んでいただきありがとうございます！