Approach to create Joke Generator
- In this Next.js application, the initial step involves defining a state through the utilization of useState. This allows for the management of three crucial elements: joke, error, and copySuccess.
- The process of retrieving a random joke from an external API is handled by the getJoke function. It effectively resets any existing errors and clears the copy success message. In case there is a failure in making an API request, it will establish an error message accordingly.
- On the other hand, the handleCopyClick function utilizes the clipboard API to enable copying of the joke text. Upon successful completion, it exhibits a “Copied!” message to confirm this action.
- To enhance user experience and promote usability, this application offers a clean and responsive user interface incorporating both a “Get a Joke” button as well as a “Copy” button. For enhanced SEO optimization purposes, appropriate page title and description have been duly set.
Build a Jokes Generator With Next JS and API
Jokes generator application using Next Js is an application where we are using the external API to fetch the jokes. This application has features to copy the jokes and when the user clicks on “Get a Joke” new jokes will be generated.
Preview of final output: Let us have a look at how the final output will look like.