Quote Generator App using NextJS
Last Updated :
02 Aug, 2024
In this article, we will build an quote generator using NextJS. The user will be given a button that, when clicked, will retrieve a random quote from the API and display it on the screen. By clicking the button again, users can generate a large number of advices.
Technologies Used/Prerequisites
Approach / Functionalities:
The provided code defines a React component known as App. This component imports necessary dependencies, such as useState and useEffect from the 'react' library, as well as styles from 'Home.module.css'. Inside the component, the useState hook is utilized to manage state variables for quote text, author information, and a indicating copied status. Additionally, there is a function called generateQuote which fetches a random quote asynchronously from an API and updates the state accordingly. To ensure this behavior occurs upon initial rendering, the useEffect hook triggers the generateQuote function. Lastly, there is another function named copyToClipboard that creates a temporary textarea and facilitates copying of the quote to the clipboard while managing its copied status.
Steps to create the NextJS Application:
Step 1: Create a new Next.js project using the following command
npx create-next-app QuoteGenerator
Step 2: Change to the project directory:
cd QuoteGenerator
Project Structure:
package.json
{
"name": "quote-generator",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^13.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}Example: In this example, we will see the Quote Generator App using Next.js
CSS
/* Home.module.css */
.boxSize {
margin: 40px auto;
padding: 20px;
border-radius: 10px;
width: 800px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 10px 0px grey;
background-color: rgba(255, 255, 255, 0.9);
}
.QuoteText {
text-align: center;
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
color: #333;
}
.author {
text-align: right;
font-size: 20px;
font-style: italic;
font-family: cursive;
color: #666;
}
.QuoteBtn {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.GenerateQuote_next {
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 12px 20px;
font-weight: bold;
color: white;
background-color: #2c5e1a;
transition: background-color 0.3s;
box-shadow: 0px 0px 10px 0px grey;
}
.GenerateQuote_next:hover {
background-color: #1d3e12;
}
.copyButton {
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 12px 20px;
font-weight: bold;
color: white;
background-color: #007acc;
transition: background-color 0.3s;
box-shadow: 0px 0px 10px 0px grey;
}
.copyButton:hover {
background-color: #005aaf;
}
.copyButton:disabled {
background-color: #ccc;
cursor: not-allowed;
}
// index.js
import { useState, useEffect } from 'react';
import styles from '../styles/Home.module.css';
const App = () => {
const [quote, setQuote] = useState('');
const [author, setAuthor] = useState('');
const [copied, setCopied] = useState(false);
const generateQuote = async () => {
try {
const response = await fetch(
'https://type.fit/api/quotes');
const quoteList = await response.json();
const randomIdx = Math.floor(
Math.random() * quoteList.length);
const quoteText = quoteList[randomIdx].text;
const auth =
quoteList[randomIdx].author || 'Anonymous';
setQuote(quoteText);
setAuthor('~ ' + auth);
} catch (error) {
console.error('Error fetching quote:', error);
}
};
useEffect(() => {
generateQuote();
}, []);
const copyToClipboard = () => {
const textArea = document.createElement('textarea');
textArea.value = quote;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<div className={styles.container}>
<div className={styles.boxSize}>
<h1 className={styles.QuoteText}>{quote}</h1>
<p className={styles.author} id="author">
{author}
</p>
<hr />
<div className={styles.QuoteBtn}>
<button
className={styles.copyButton}
onClick={copyToClipboard}
disabled={copied}
>
{copied ? 'Copied!' : 'Copy'}
</button>
<button
className={styles.GenerateQuote_next}
onClick={generateQuote}>
Next quote
</button>
</div>
</div>
</div>
);
};
export default App;
Step 3: To run the next.js application use the following command and then go to this URL http://localhost:3000
npm run dev
Output:
Similar Reads
Quote Generator App Using Angular
A Quote Generator App is a simple application that displays random quotes to users. It is a great project for practising Angular basics such as components, services, data and API integration.Here we develop a simple Quote Generator App using Angular. This application can able to display a new Quote
6 min read
Recipe Generator using Next.js
In this tutorial, we'll create a Recipe Generator App using Next.js, a React framework that allows users to generate random recipes. This type of application can be useful for people looking for new meal ideas or wanting to explore different cuisines. application fetches recipe data from API and dis
4 min read
Random Quote Generator App using ReactJS
In this article, we will create an application that uses an API to generate random quotes. The user will be given a button which on click will fetch a random quote from the API and display it on the screen. Users can generate many advices by clicking the button again. The button and the quotes are d
3 min read
How to Create Todo App using Next.js ?
In this article, we will create a to-do application and understand the basics of Next.js. This to-do list can add new tasks we can also delete the tasks by clicking on them.Next.js is a widely recognized React framework that eÂnables server-side rendering and enhanceÂs the developmeÂnt of interacti
4 min read
NextJS Jest Testing
Jest is a delightful JavaScript testing framework with a focus on simplicity. It's widely used with React applications and integrates well with Next.js to provide robust testing capabilities. This article explores how to set up and use Jest for testing in a Next.js application.Steps to Create an App
2 min read
Create a Random Quote Generator using React-Native
React Native is the most flexible and powerful mobile application development framework, which has various features embedded into it. Using this framework, we can create different interactive applications. Creating a Random Quote Generator using React Native is one of the interactive project which u
4 min read
How to Submit NextJS Form to API Using FormData ?
Submitting forms is a common requirement in web applications. Next.js, a powerful React framework, simplifies the process of handling form submissions and interacting with APIs. In this article, we'll explore how to submit a form in a Next.js application using the FormData object to an API.To submit
3 min read
Create a Calculator App Using Next JS
Creating a Calculator app is one of the basic projects that clears the core concept of a technology. In this tutorial, we'll walk you through the process of building a calculator app using Next.js. Output Preview: Let us have a look at how the final output will look like. Prerequisites:NPM & Nod
3 min read
Build Random Quote Generator using VueJS
We are going to build a Random Quote Generator using Vue.js. This application will fetch random quotes from an API and display them on the screen. Users will have the option to copy the quote to their clipboard or generate a new random quote. Prerequisites:Node.jsVue.jsApproachWe'll create a Vue.js
4 min read
How to Create a Simple Counter App using Next.js ?
This article explains the process of creating a simple counter application using Next.js. We will see how to build a functional counter with increment and decreÂment buttons. In a typical scenario, imagine the need to create a user-friendly counteÂr application. The application would require buttons
3 min read