Creating link in nextjs is a bit different when compared to other languages. Let’s see how it is implemented. Example code // pages/index.js (or any other page or component) import React from ‘react’; import Link from ‘next/link’; const HomePage = () => { return ( <div> <h1>Welcome to my Next.js App</h1> <p>Go to the <Link… Continue reading Create link in Nextjs
Category: Next.Js
Create a new component in Nextjs
1.Create a new file for your component: Inside your project’s components directory or any other designated folder for components, create a new file for your component. For example, let’s create a simple component named MyComponent.js. // components/MyComponent.js import React from ‘react’; const MyComponent = () => { return ( <div> <p>This is my custom component!</p>… Continue reading Create a new component in Nextjs
How to manage empty contents and spaces from being posted in Editors of Nextjs?
Sometimes there might arise an issue whereThe problem is that if I add spaces into the editor, the Quill will generate empty paragraphs. So no content only empty paragraphs will be displayed. Inorder to resolve this issue,following code can be used. const isQuillEmpty = (value) => { if (value.replace(/<(.|n)*?>/g, ”).trim().length === 0 && !value.includes(“<img”))… Continue reading How to manage empty contents and spaces from being posted in Editors of Nextjs?
NextUI package
NextUI is a UI library for React that helps you build beautiful and accessible user interfaces. It can be used with Nextjs projects offering beautiful user experience. It is build on top of Tailwind css and React Aria. It is different from Tailwindcss in sense that tailwind offered only few classes to style the components.… Continue reading NextUI package
Pagination in Nextjs
Pagination in Nextjs can be achieved by installing a package called ‘react-paginate’. Installation Install react-paginate with npm: Usage import React, { useEffect, useState } from ‘react’; import ReactDOM from ‘react-dom’; import ReactPaginate from ‘react-paginate’; // Example items, to simulate fetching from another resources. const items = [1, 2, 3, 4, 5, 6, 7, 8, 9,… Continue reading Pagination in Nextjs
Usage of “useRef” in Next.js, React and latest front end technology
In React, useRef is a hook that provides a way to interact with the DOM directly. It returns a mutable object called a ref object, which has a current property. The current property can be assigned a reference to a DOM element, allowing you to access and interact with the DOM directly. Here’s a basic… Continue reading Usage of “useRef” in Next.js, React and latest front end technology
How to add loader in Nextjs
The problem is when the user clicks on any route to go to another page, the fetching request needs to be finished first to be shown to the user. And the user generally doesn’t have any clue what’s going on because there is no visual clue on the screen. To solve this problem, we can… Continue reading How to add loader in Nextjs
How to convert the inner div elements into tabs?
Step 1: Install react-tabs: npm install react-tabs Step 2: Import necessary components and use Tabs and TabList to create tabs: import React from ‘react’; import { Tab, Tabs, TabList, TabPanel } from ‘react-tabs’; import ‘react-tabs/style/react-tabs.css’; const EditProfile = () => { return ( <div className=’editprofile-left-main-second-div’> <Tabs> … Continue reading How to convert the inner div elements into tabs?
How to remove srcset in the image tag which is migrated from WordPress?
Without removing srcset the code will be as shown below: <img loading=”lazy” decoding=”async” width=”612″ height=”173″ src=”http://jobinandjismi.in/wp-content/uploads/2022/03/image-43.png” alt=”” class=”wp-image-12981″ srcset=”https://wp.jjknowledgebase.com/wp-content/uploads/2022/03/image-43.png 612w, https://wp.jjknowledgebase.com/wp-content/uploads/2022/03/image-43-300×85.png 300w, https://wp.jjknowledgebase.com/wp-content/uploads/2022/03/image-43-60×17.png 60w, https://wp.jjknowledgebase.com/wp-content/uploads/2022/03/image-43-150×42.png 150w” sizes=”(max-width: 612px) 100vw, 612px”> The image will be as shown below: The following steps should be taken to fix the: Step 1: At first, we need to create a… Continue reading How to remove srcset in the image tag which is migrated from WordPress?
DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.
The error message “DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node” indicates that there is an attempt to insert a new node before another node, but the reference node (the node before which the new node is to… Continue reading DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.