Adding a “copy to clipboard” functionality to your Next.js application streamlines user experience by allowing them to easily copy text snippets. While third-party plugins offer solutions, we can achieve this using the browser’s built-in Clipboard API, providing a lightweight, secure, and well-supported approach.

Understanding the Clipboard API

The Clipboard API offers a standardized way for web applications to interact with the system clipboard. This allows you to programmatically copy and paste text or other data to and from the clipboard. Here’s a breakdown of its key aspects:

• Security: Unlike older methods like document.execCommand('copy'), the Clipboard API prioritizes security. It restricts access to clipboard data only in secure contexts, meaning your web app needs to be served over HTTPS to utilize it.
• Asynchronous Nature: The Clipboard API methods (writeText and potentially future methods for reading) are asynchronous. This means they return a Promise object, allowing your code to handle successful completion or potential errors.
• Browser Support: The Clipboard API enjoys good support in modern browsers. However, it’s always a good practice to check for browser compatibility before relying solely on this API. You can find resources online to determine compatibility across different browsers.

Implementing Copy to Clipboard Functionality

1. Import necessary hooks: import { useState } from "react";
2. Define the text to be copied: const textToCopy = "This is the text you can copy.";
3. Create a state variable for “copied” status: const [isCopied, setIsCopied] = useState(false);
4. Implement the copyToClipboard function:

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(textToCopy);
    setIsCopied(true);
    setTimeout(() => setIsCopied(false), 2000); // Reset copied state after 2 seconds
  } catch (err) {
    console.error("Failed to copy to clipboard:", err);
  }
};

Explanation of copyToClipboard

• async: This keyword signifies the asynchronous nature of the function.
• navigator.clipboard.writeText(textToCopy): This line utilizes the writeText method of the navigator.clipboard object. It attempts to write the provided text (textToCopy) to the system clipboard.
• Promise Handling: Since writeText is asynchronous, we use try...catch to handle successful completion (updating isCopied state) or potential errors (logged to the console).
• setTimeout: This function provides a temporary visual cue to the user by setting isCopied to true for a brief period (2 seconds in this example).

• Render the component:

return (
  <div>
    <p>{textToCopy}</p>
    <button onClick={copyToClipboard}>
      {isCopied ? "Copied!" : "Copy to Clipboard"}
    </button>
  </div>
);

Additional Considerations

• Reusable Hook: Consider creating a reusable hook to encapsulate the copy logic for better code organization and maintainability.
• Error Handling and Fallbacks: Explore error handling strategies and potentially implement fallback mechanisms (e.g., displaying a message) for browsers that don’t support the Clipboard API.

By leveraging the Clipboard API, you gain a secure and efficient way to add “copy to clipboard” functionality to your Next.js applications, enhancing user experience without external dependencies.

Code Snippet link

https://stackblitz.com/~/github.com/PandiyanCool/nextjs-clipboard?view=editor

Live Demo

Happy Coding!