Data fetching strategies are essential for efficiently retrieving and displaying content in applications built with Next.js and WordPress. Here’s a brief overview of some common data fetching strategies: Static Site Generation (SSG): With SSG, data is fetched at build time and pre-rendered into static HTML files. Ideal for content that doesn’t change frequently and can… Continue reading Data Fetching Strategies in Next.js + WordPress
Tag: next js
Techniques for Improving SEO on Websites Built with Next.js and WordPress
Search engine optimization (SEO) is crucial for ensuring that your website ranks well in search engine results and attracts organic traffic. When building a website with Next.js and WordPress, there are several techniques you can employ to improve its SEO performance. Here are some key strategies: Optimize Metadata:Ensure that each page on your website has… Continue reading Techniques for Improving SEO on Websites Built with Next.js and WordPress
What is the suggested approach for Next.js data fetching?
In Next.js, there are several approaches for data fetching depending on your requirements and preferences: Static Generation (getStaticProps/getStaticPaths): Use this approach when you have content that can be pre-rendered at build time. Data fetching occurs at build time, and the pre-rendered HTML is served to the client. This is great for static content like blog… Continue reading What is the suggested approach for Next.js data fetching?
Set smooth scroll animation for scrolling to top on pagination click.
you can add smooth scrolling animation to the page when moving to the top. You can achieve this by using CSS transitions or JavaScript libraries like scrollTo or animate. Here’s how you can implement smooth scrolling animation using CSS transitions: const handleScrollToTop = () => { window.scrollTo({ top: 0, behavior: ‘smooth’ }); }; const handlePreviousPage… Continue reading Set smooth scroll animation for scrolling to top on pagination click.
Adding .env file to access to all components and pages in Next JS 14
NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT=https://jjrevamp.jjecom.com/graphql/ To access this URL in all pages we need to add NEXT_PUBLIC_SOMETHING THis will enable to call the URL in any pages Calling the posts using GRaphQL API onst client = new ApolloClient({ uri: process.env.NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT, cache: new InMemoryCache() }); const graphqlEndpoint = process.env.NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT; console.log(“Graph URL”, graphqlEndpoint); const FetchPosts = () => { const [posts,… Continue reading Adding .env file to access to all components and pages in Next JS 14
Skeleton Structure in Next jS
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
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
how to add notification in next js
To need to install the node module in the project folder using the command npm i react-toastify import React from ‘react’; import { ToastContainer, toast } from ‘react-toastify’; import ‘react-toastify/dist/ReactToastify.css’; function App(){ const notify = () => toast(“Wow so easy!”); return ( <div> <button onClick={notify}>Notify!</button> <ToastContainer /> </div> ); }
How to create a multi-select functionality in the next.js
In this article, We will cover How to Multi-select/Select all Functionality on Next.JS first, create a new state for the Selected material const [selectedMaterials, setSelectedMaterials] = useState(new Set()); Then create a function for Multi-select/Select all const handleSelectAll = (event) => { const { checked } = event.target; const newSelectedMaterials = new… Continue reading How to create a multi-select functionality in the next.js