Next.jsでクリップボードにコピー
Next.jsでクリップボードにコピーする方法を説明します。 Reactでも動作します。
2025-5-28
Clipboard APIを利用します。
関数を定義
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
} catch (err) {
console.error(err);
}
};
Note
Next.jsのapp directoryで利用する場合は、"use client"を追加する必要があります。
関数を呼ぶ
<button onClick={() => copyToClipboard('Copy')}>Copy</button>
コピー時に文言を変える
よくありそうなユースケースとしては、コピーしたことをユーザーに伝えるために、コピー後に文言を変えることがあります。
const [isCopied, setIsCopied] = useState(false);
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 1000);
} catch (err) {
console.error(err);
}
};
return (
<button onClick={() => copyToClipboard('Copy')}>
{isCopied ? 'Copied!' : 'Copy'}
</button>
);