Skip to content

Courses
Tutorials
Practice
Contests

Next.js Tutorial
Next.js Components
Next.js Functions
Next.js Deployment
Next.js Projects
Next.js Routing
Next.js Styles
Next.js Server-Side Rendering
Next.js Environment Variables
Next.js Middleware
Next.js Typescript
Next.js Image Optimization
Next.js Data Fetching

How to add ESLint in Next.js ?

How to add a Digital Clock in Next.js ?

Last Updated : 24 Jul, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

Adding a digital clock to your Next.js application can enhance the user experience by providing real-time updates in an aesthetically pleasing manner. We can simply add it with packages available on NPM. In this article, we are going to learn how we can add Clock in Next.js

Approach

To add our Clock we are going to use the react-live-clock package. The react-live-clock package helps us to add a clock anywhere in our app. So first, we will install the react-live-clock package and then we will add a clock on our homepage.

Steps to Create Next.js App

Step 1: Initialize a new next.js project using the below command

npx create-next-app gfg

Step 2: Move to the Project directory

cd gfg

Step 3: Install the required package react-live-clock using the below command:

npm i react-live-clock

Project Structure:

The updated dependencies in the package.json file:

"dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "react-live-clock": "^6.1.23-beta"
}

Example: This example demonstrate adding a digital clock in next.js application using react-live-clock npm package.

JavaScript

// pages/index.js  import React from "react"; import Clock from 'react-live-clock';  export default function MyQuotesSlider() {   return (     <div>       <h3>GeeksforGeeks Digital Clock</h3>       <Clock           format={'h:mm:ssa'}           style={{fontSize: '1.5em'}}           ticking={true} />     </div>   ); }

Explanation: In the above example first, we are importing the Clock component from the installed package. After that, we are adding the format, style, and other parameters in our clock component.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output:

Conclusion

Integrating a digital clock into your Next.js app is straightforward. By installing a suitable package, creating a clock component, and adding it to your pages, you enhance your app's functionality and user experience with real-time updates.

How to add ESLint in Next.js ?

I

imranalam21510

Improve

Article Tags :

JavaScript
Web Technologies
ReactJS
Next.js
Next.js - Questions

Similar Reads

How to add CodeBlock in Next.js ?

In this article, we are going to learn how we can add CodeBlock in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditiona

How to add Calendar in Next.js ?

Adding a calendar to a Next.js application enhances scheduling and event management. We can just install and use the available npm package. In this article, we are going to learn how we can add a calendar loader in NextJS. ApproachTo add our calendar we are going to use the react-calendar package. T

How to add ESLint in Next.js ?

ESLint is a popular linting tool for identifying and fixing issues in JavaScript code. Adding ESLint to your Next.js project ensures that your code follows best practices and maintains a consistent style. This enhances code quality, helps catch errors early, and makes the codebase easier to maintain

How to Add a Background Image in Next.js?

Next.js is a powerful React framework that allows for server-side rendering and the generation of static websites. Adding a background image to your Next.js application can enhance the visual appeal of your web pages. This article will guide you through the process of adding a background image to a

How to Add Custom Local Fonts in Next.js ?

Adding custom fonts in Next.js project enhances the typography. It also improves the performance as the fonts are loaded directly from project assets. They can be integrated by importing font files into a project, defining @font-face rules in CSS, and applying them across components for consistent s

How to add Timer in Next.js ?

In this article, we are going to learn how we can add Timer in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.

How to Add ChartJS in NextJS 13?

Chart.js in Next.js is the package used to create interactive and visually appealing charts, such as line charts, bar charts, and more, seamlessly integrated into Next.js applications. In this article, we will explore the demonstration of various charts in the NextJS application. Table of Content Im

How to Add Tweets in Next.js ?

Adding tweets in Next.js involves using Twitter's embed feature or API to display tweets. You can embed tweets directly in components or fetch and display them using server-side rendering or client-side data fetching. In this article, we are going to learn how we can add Tweets in NextJs. ApproachTo

How to add Slider in Next.js ?

Adding a slider in Next.js involves integrating a slider component, like react-range, managing its state using React hooks and applying styles for customization, enhancing user interaction and input precision in your application. ApproachTo add our Slider we are going to use the react-range package.

How to Add Simple DatePicker in Next.js ?

In this article, we are going to learn how we can add a Simple Datepicker in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences