How to easily copy text to clipboard in Next.js

Copy text to clipboard is an essential operation to let users copy content from an input or a section without missing any content.

In this tutorial, we are going to explain how to put in place this feature in a React based project like Next.js with an example.

Also we are going to see how to integrate the SVG code for the copy clipboard icon, and tweak it a little bit to give it a motion on the Y axle when it is clicked.

Create the copy clipboard icon using Heroicons

First, we start with drawing the copy clipboard icon, in our case, we are using Heroicons which provides some helpful icons with svg code

To use svg code in React, create a React component and return the svg tag as the example below

You can also create a react copy to cliboard icon component. Check this article to learn more

If you would to make a copy clipboard function component, we have made a dedicated article in this link

Under components/copy-clipboard.js

export const CopyClipboard =({content}) => {

 return ( <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 shadow-md shadow-slate-700 active:translate-y-1 hover:cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} onClick={() => navigator.clipboard.writeText(content)}>
 <path strokeLinecap="round" strokeLinejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
 </svg>)
}
}

In order to give the icon the click effect, add shadow, shadow color, and a movement on y axle when the icon clicked To add shadow and shadow color in tailwindcss, use _shadow shadow-slate-700_ for a gray shadow below the component.

To let the component move or translate on the Y axle when it is clicked, use active:translate-y-1

If you like tailwind and you would like to configure it with Next.js, you can check my tutorial on this link, or tailwind official documentation here

Copy text to clipboard page example

Now let's create our page.

In this page, we are going to import our component, render it , and define the onClick method

pages/page2

import dynamic from "next/dynamic"

export default function Page2() {

 const textToCopy = "hello Ali"

 const CC = dynamic(() => import("../components/copy-clipboard").then(mod => mod.CopyClipboard), { ssr: false })

 return (<div className="flex justify-end w-1/2 h-screen items-center">
 <CC content={textToCopy} />
 </div>)
}

Since Next.js is mostly used for server rendering, we want to make sure that _navigator_ object will be executed on client side only. To do it, we are going to import our component dynamically and set the ssr to false.

The config above is for disabling server side rendering that we have addressed in more details in this link

Whatever text we put on textToCopy will be copied and we got that nice click effect when we click on the copy to clipboard icon as the image below show

Conclusion

We have seen how to use a SVG icon on React to import a copy clipboard icon, and we implement the copy clipboard function on Next.js page