How to add a Digital Clock in Next.js ?

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.

// 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.