TOMOSHIBI Dev
💡 Next.jsで「コピーボタン」を実装しよう！
Next.jsで「クリップボードにコピーする」機能を実装したいと考えたことはありませんか？
例えば以下のような場面で活用できます。
- 招待コードやURLを簡単にコピーしたい
- SNS共有ボタンでテキストをコピーする
- ユーザーの利便性を向上させたい
本記事では、Next.jsで簡単にクリップボードコピーを実装できるカスタムフックを紹介します。
また、Reactのフォールバック処理付きで、モダンブラウザだけでなく古い環境にも対応しています。
🔍 クリップボードAPIとは？【Next.js & React】
「クリップボードにコピーする」処理は、navigator.clipboard.writeText() を使用するのが一般的です。
これは、HTTPS環境（セキュアコンテキスト）でのみ動作するため、ローカル環境やHTTPサイトでは動かないことがあります。
✅ クリップボードAPIの特徴
navigator.clipboard.writeText(text)でテキストをコピー可能- ただし HTTPS環境でしか動作しない
- 一部の 古いブラウザでは未対応
そのため、**フォールバック処理（document.execCommand('copy')）**を組み込むと、より多くの環境で動作する実装が可能です。
🚀 Next.js対応！クリップボードコピー用のカスタムフック
Next.jsやReactで使い回せる、カスタムフック useClipboardCopy を作成しましょう。
import { useState } from 'react'
export const useClipboardCopy = () => {
const [copied, setCopied] = useState(false)
const handleClipboardCopy = async (text: string) => {
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text)
} else {
const textArea = document.createElement('textarea')
textArea.value = text
textArea.style.position = 'fixed'
textArea.style.opacity = '0'
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
document.execCommand('copy')
document.body.removeChild(textArea)
}
setCopied(true)
setTimeout(() => setCopied(false), 2000)
} catch (err) {
console.error('コピーに失敗しました:', err)
}
}
return {
copied,
handleClipboardCopy,
}
}
📌 ポイント
copiedでコピー成功時のフィードバックを提供- モダンな
navigator.clipboard.writeTextを優先的に使用 - フォールバックとして
document.execCommand('copy')を用意
🖱️ Next.jsで「コピーボタン」を作る（実装例）
作成した useClipboardCopy を使い、Next.jsでコピーボタンを作るコンポーネントを実装します。
import { useClipboardCopy } from '@/hooks/useClipboardCopy'
const CopyButton = () => {
const { copied, handleClipboardCopy } = useClipboardCopy()
const textToCopy = 'https://katari-no-tomoshibi.com/'
return (
<div className="flex items-center space-x-2">
<button
onClick={() => handleClipboardCopy(textToCopy)}
className="px-4 py-2 bg-blue-500 text-white rounded"
>
{copied ? 'コピーしました！' : 'コピー'}
</button>
</div>
)
}
export default CopyButton
✅ ボタンの機能
- クリックするとクリップボードにコピー
- コピー成功時は「コピーしました！」と表示変更
🎨 さらにUIを改善！トースト通知を追加
Tailwind CSSを活用して、「コピーしました！」のトースト通知を表示するデザインにアップグレードしましょう。
import { useClipboardCopy } from '@/hooks/useClipboardCopy'
const CopyWithToast = () => {
const { copied, handleClipboardCopy } = useClipboardCopy()
const textToCopy = 'https://katari-no-tomoshibi.com/'
return (
<div className="relative">
<button
onClick={() => handleClipboardCopy(textToCopy)}
className="px-4 py-2 bg-blue-500 text-white rounded"
>
コピー
</button>
{copied && (
<div className="absolute top-[-40px] left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-3 py-1 rounded shadow">
コピーしました！
</div>
)}
</div>
)
}
export default CopyWithToast
✅ まとめ：Next.jsでクリップボードコピーを実装する方法
本記事では、Next.jsでクリップボードにテキストをコピーする方法を紹介しました。
✔ useClipboardCopy カスタムフックを実装
✔ HTTPS環境では navigator.clipboard.writeText を使用
✔ フォールバック処理として document.execCommand('copy') を実装
✔ Tailwind CSS を活用してボタンのUIを改善
Next.jsアプリに組み込めば、URLコピーやテキスト共有がスムーズになります！
ぜひ実装して、より使いやすいWebアプリを作りましょう！🚀
📢 TOMOSHIBI Dev では、Next.jsやReactの技術記事を発信中！
他の技術記事もぜひチェックしてください 🔥
