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?
Tag: next js
How to use Quill as a rich text editor in next.js
Install Quill We will use the react-quill package : npm install react-quill import the css of react-quill in _app.js import ‘react-quill/dist/quill.snow.css’ Dynamically import Quill we import react-quill dynamically, to avoid including it in server-side and we will render a loading state while the dynamic component is being loaded. const QuillNoSSRWrapper = dynamic(import(‘react-quill’), { ssr: false,… Continue reading How to use Quill as a rich text editor in next.js
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?
Issues in fetching special characters in Next Js / React.
Sometimes situations can be risen in fetching special characters into the website when working with latest frontend technologies like react, Vue js , next js etc. It’s must that we have to deal with these issues. A library called “He” could be a better solution in this situation. The “He” library is typically used for… Continue reading Issues in fetching special characters in Next Js / React.
How to make An input box as both Search-box and select-box on next.js
Below is the code for making an input box to both the search and select box const CreateArticle = () => { const [tags, setTags] = useState([]); const [searchTerm, setSearchTerm] = useState(”); const [selectedTags, setSelectedTags] = useState([]); const [activeTab, setActiveTab] = useState(“create”); // “create” or “preview” const [newTag, setNewTag] = useState(”); /* Tag section*/ //… Continue reading How to make An input box as both Search-box and select-box on next.js
To display tags in the preview section on Knowledge base
<p className=“post-main-header-categoryTags text-left mt-5 mb-2”> <span className=“popup-knowledgebase-forumTagSpan “>Tags:{” “}</span> <p className=‘popup-knowledgebase-forumInnertag’> {previewContent.selectedTags .map((tagId) => { const tag = tags.find((tag) => tag.id === tagId); return tag ? tag.name : tagId; // Use tag name or tagId as per your data structure }) .join(“, “)} </p> </p>
Enable AMP in Next.js?
This is an important question and is asked in many Next.js interview questions. There are two ways to enable AMP in Next.js. AMP-First Pages Hybrid AMP Pages AMP-First Pages: The AMP-First Pages are served to the primary traffic of the website as well as traffic generated from the search engine. Use the following syntax to implement… Continue reading Enable AMP in Next.js?
How to set up CDN in Next.js?
To setup CDN in Next.js, the developers have to follow the steps given below: To start, we have to first set up the “assetPrefix” setting and configure our CDN origin to support and resolve the domain that our Next.js is hosted on. const isProd = process.env.NODE_ENV === ‘production’; module.exports = { // You may only need to add assetPrefix in the production. assetPrefix: isProd ? ‘https://cdn.mydomain.com’ : ” }; If the CDN is present on a separate… Continue reading How to set up CDN in Next.js?
Recommended method to fetch data in Next.js?
There are multiple ways to fetch data in Next.js, but Next.js itself recommends getInitialProps, an async function to retrieve data from anywhere. When we use getInitialProps to retrieve data, it receives a context object which has the following properties: pathname- It specifies the path section of the URL. query- It is used to specify the query string section of URL parsed… Continue reading Recommended method to fetch data in Next.js?
Styling in Next.js(React Js)
Styling in Next.js offers flexibility, and you can choose from various approaches. There exist 2 popular approach. CSS-in-JS with styled-components and traditional CSS with CSS modules 1.CSS-in-JS with Styled-Components: // components/Button.js import styled from ‘styled-components’; const StyledButton = styled.button`padding: 10px 15px;font-size: 16px;color: white;background-color: ${(props) => (props.primary ? ‘blue’ : ‘green’)};border: none;border-radius: 5px;cursor: pointer; &:hover {background-color:… Continue reading Styling in Next.js(React Js)