Skeleton is a placeholder to show a loading state and the expected shape of a component. Firstly Need to import the module import {Skeleton} from “@nextui-org/react”; Code for the skelton loading and loaded state with condition import React from “react”; import {Card, Skeleton, Button} from “@nextui-org/react”; export default function App() { const [isLoaded, setIsLoaded]… Continue reading Skeleton Structure in Next jS
Category: Next.Js
Fetching Data on the Server with fetch
Next.js extends the native fetch Web API to allow you to configure the caching and revalidating behavior for each fetch request on the server. React extends fetch to automatically memoize fetch requests while rendering a React component tree. You can use fetch with async/await in Server Components, in Route Handlers, and in Server Actions. async function getData() { const res = await fetch(‘https://api.example.com/…’) // The return value is *not*… Continue reading Fetching Data on the Server with fetch
Dynamic Routes in Next JS
This is about how to assign the pages dynamically from each API Creating a static page for calling the single landing page This is an example of the folder structure for the dynamic pages <Link key={index} href={`/case-study/${category.slug}`}> <div> <p className=’jjrewamp-casestudylistpage-secondsection-first-filter-list-category-1′>{category.name}</p> </div> </Link> This is call to the casestudy page inner page <Link href={`/case-study/${category_slug}/${caseStudy.post_name}`}><h3 className=”jjrewamp-casestudylistpage-secondsection-categorysection-title-h3″>{caseStudy.post_title}</h3></Link> here… Continue reading Dynamic Routes in Next JS
What’s the purpose of if (typeof window !== ‘undefined’) in Nextjs?
The if (typeof window !== ‘undefined’) check is a common pattern in JavaScript, especially in the context of web development with libraries like React and Next.js. This condition is used to determine whether the code is running in a browser environment or on the server. Here’s an explanation of how it works: typeof window: The… Continue reading What’s the purpose of if (typeof window !== ‘undefined’) in Nextjs?
Curved end of border-bottom in CSS
Suppose i want a border-bottom to look like this: This is not possible within default borders, as border-radius controls the radius around the element, not a single border edge. In-order to achieve this, a pseudo element can be used. div { max-width:50vw; padding-bottom:25px; position:relative; } div:after { content:”; position:absolute; bottom:0; left:0; right:0; background:red; height:20px; border-radius:0… Continue reading Curved end of border-bottom in CSS
Preserving Styling from WordPress WYSIWYG Editor in Next.js
When working with Next.js and fetching content from a WordPress backend, preserving styling applied in the WordPress editor can be crucial for maintaining the visual integrity of your content. One common scenario is when using a WYSIWYG (What You See Is What You Get) editor in WordPress to format text with styling such as bold,… Continue reading Preserving Styling from WordPress WYSIWYG Editor in Next.js
How to create CSS grid with columns of unequal height and width
Line based placement method can be used to create CSS grid with columns of unequal height and width. .grid-container { display: grid; grid-template-columns: auto auto auto; grid-template-rows: repeat(10, 1fr); grid-gap: 5px; padding: 5px; height: 100vh; background-color: #2196F3; } /* line-based placement */ .item1 { grid-column: 1 / 2; grid-row: 1 / 4; } .item2 {… Continue reading How to create CSS grid with columns of unequal height and width
Connect plesk with Godaddy Domain Server
Create a A record on the Godaddy domain server and point the Plesk website IP to it. To setup a free SSL enable the SSL option in plesk
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that promotes a modular, responsive, and extensible approach to building user interfaces. Key features include a comprehensive set of utility classes, responsiveness, extensibility, and a focus on developer productivity. It allows for quick iteration, flexible customization, and is typically used directly in HTML without preprocessing. Tailwind enables efficient… Continue reading Tailwind CSS
The differences between img and Image
1. img Element: The standard HTML img element is used for embedding images in web pages. It has been a fundamental part of web development for a long time. When you use the img element in Next.js, the images are loaded as static assets, and you don’t get some of the performance optimizations provided by… Continue reading The differences between img and Image