The useRouter hook from Next.js allows you to access route info inside your components. You can use it for conditional rendering based on the current route. Why Use useRouter? Sometimes, you want to hide/show content depending on the route—like hiding a header on the login page import { useRouter } from ‘next/router’; export default function… Continue reading Using useRouter for Conditional Rendering in Next.js
Tag: firebase nextjs
Incremental Static Regeneration (ISR) in Next.js
ISR is a powerful feature of Next.js that allows static pages to be updated without requiring a full rebuild. This is ideal for blogs, e-commerce sites, and other dynamic applications that need fresh content while maintaining fast performance. Using ISR export async function getStaticProps() { const res = await fetch(“https://api.example.com/posts”); const data =… Continue reading Incremental Static Regeneration (ISR) in Next.js
State Management in Next.js
State management in Next.js determines how data is stored and shared across components. While React provides built-in state handling with useState, larger applications require more scalable solutions like Context API, Redux, or Zustand. Using Context API import { createContext, useState, useContext } from “react”; const AppContext = createContext(); export function AppProvider({ children }) { … Continue reading State Management in Next.js
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
Next.js useSearchParams Hook in Next.js for Dynamic URL Query
useSearchParams() hook allows developers to extract specific parameters, check for their existence, and perform operations based on them. it ensures that the application remains responsive to changes in the query string, facilitating dynamic content updates without full page reloads. import { useSearchParams } from ‘next/navigation’ export default function SearchBar() { const searchParams = useSearchParams() const… Continue reading Next.js useSearchParams Hook in Next.js for Dynamic URL Query
How to Solve CORS Issues in React/Next.js with XDomain
What is CORS? CORS is a security feature implemented by web browsers to prevent unauthorized access to resources on a different origin (domain, protocol, or port). When a web application tries to access resources from a different origin, the browser blocks the request unless the server explicitly allows it by setting appropriate CORS headers. Why… Continue reading How to Solve CORS Issues in React/Next.js with XDomain
Hosting Next.js Applications on Firebase
Install Firebase CLI Tools: Open your terminal and install the Firebase CLI tools globally using the command. npm install -g firebase-tools Login to Your Account: Log in to your Firebase account from the terminal: firebase login Config Next.config.js file Add export command: /** @type {import(‘next’).NextConfig} */ const nextConfig = { output: ‘export’ } //Add this… Continue reading Hosting Next.js Applications on Firebase