Author: Nifi C Joy

Here giving a code snippet which would help to fetch all articles from your wordpress backend based on the published date.

Hydration error is a very common error in Nextjs. In order for hydration to function correctly, the initial client-side rendered version of the UI must be identical to the server-side one.   However, in this case, the resolvedTheme variable is undefined on the server and a string on the client, causing the React trees rendered on the server and client to be… Continue reading How to fix hydration errors in Nextjs theme change

Adding themes to Next.js app makes it possible for users to personalize their experience and improve the usability of product. With themes, users can easily switch between light and dark modes. Next themes This package provides a custom useTheme hook to consume and change the current theme. It can also select between dark and light modes based… Continue reading How to implement dark/light theme in Nextjs

Date Time Picker field is used to fetch date from wordpress backend. The Date Time Picker field creates a jQuery date & time selection popup. Display FormatThe date format that is displayed when selecting a date. Return FormatThe date format that is returned when loading the value. Please note that the value is always saved… Continue reading How to fetch date from ACF fields

Lotties can be added to the Nextjs webpage using “lottie-interactive” library. Lottie interactive is custom web element adding multiple types of interactivity to Lottie animations. Lottie-interactive is availabile through npm. npm install lottie-interactive Then inside of your pages: Animation files (.json) can be accessed if put inside the /public/ directory. URLs to the animation can also be… Continue reading Adding lottie in Nextjs

Open the page from where you need to copy the javascript code. Copy the javascript code. Paste it in your nextjs project as a new js file. Script tag can be used to add the corresponding script to th eproject. The <Script /> component requires the following properties: src- A path string specifying the URL of an… Continue reading How to add custom script to next.js website

Tooltip can be added in various ways to your project React-tooltip library a. Install the required package using npm or yarn. Open your terminal and run: npm install react-tooltip b. Create a new component for your tooltip. For example, you can create a component called CustomToolTip.js: // CustomTooltip.jsimport React from ‘react’;import ReactTooltip from ‘react-tooltip’; const… Continue reading How to add a tooltip to a component in Next.js

Next.js is a React framework that lets us build React web applications through a layer of automatic configuration abstraction. It pushes the React component paradigm towards a page based structure, and is great for static and, through automatic static optimization, dynamic websites. Step 1: The Next.js project Create a Next.js project by following the instructions… Continue reading Deploying a Next.js to Github pages

A Tailwindcss/Flowbite datepicker component built as a React component with types based on the original datepicker from Flowbite. This component can also be used as a plugin using the Flowbite React library. The datepicker features both inline and a date range picker functionality and some extra options such as autohide, custom format, positioning, and more.… Continue reading Tailwind-datepicker-react component

The Tailwind CSS configuration file allows you to customize various aspects of the framework to suit your project’s needs. Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package: This will create a minimal tailwind.config.js file at the root of your project: 1.Content –… Continue reading Tailwind css Configuration file