Tag: nextjs

How do you handle catch-all routes in Next.js?

Catch-All Routes in Next.js allow dynamic URL matching with flexible path parameters, empowering your app’s routing system. Key Features Dynamic Parameters: Access route wildcard segments through the … rest parameter. Matching Order: Definition order determines the route precedence. Fallback behavior: Optionally configure fallback settings. Configuration Next.js routing file (pages/foo/[…bar].js): Root Catch-All: Load for any unmatched… Continue reading How do you handle catch-all routes in Next.js?

How to enable AMP?

To enable AMP, add the following configuration to your page: page/index.js export const config = { amp: true } The amp configuration accepts the following values: true: The page will be AMP-only ‘hybrid’: The page will have two versions, one with AMP and another with HTML To learn more about the amp configuration, read the… Continue reading How to enable AMP?

How to Create a Multi-Select Input Field with React-Select

Introduction React-Select is a flexible and highly customizable React component for creating select inputs. It provides a wide range of features, including multi-select functionality, making it an ideal choice for implementing complex selection interfaces in your React applications. Installation npm install react-select Creating a Multi-Select Input Field Import React-Select into your component file: import Select… Continue reading How to Create a Multi-Select Input Field with React-Select

Enable Cors in Node js

To enable CORS (Cross-Origin Resource Sharing) in a Node.js application, you can use the cors middleware package. Here’s how you can do it: First, install the cors package via npm npm install cors Once installed, you can use it in your Node.js application by requiring it and applying it to your Express application. const express… Continue reading Enable Cors in Node js

How do you handle real-time updates in a Next.js application?

Handling real-time updates in a Next.js application typically involves integrating technologies or techniques that facilitate real-time communication between the server and the client. Here are some common approaches: WebSocket Integration: WebSocket is a communication protocol that provides full-duplex communication channels over a single TCP connection. You can integrate WebSocket libraries such as Socket. Server-Sent Events… Continue reading How do you handle real-time updates in a Next.js application?

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

Installation of react-image-magnify on nextjs for zooming products in PDP page.

To install react-image-magnify in a Next.js project, you can follow these steps: Step 1: Install React Image Magnify. Use npm or yarn to install the react-image-magnify package along with its peer dependencies. npm install react-image-magnify Step 2: Import and Use in Your Next.js Component: You can import and use react-image-magnify in your Next.js component where… Continue reading Installation of react-image-magnify on nextjs for zooming products in PDP page.

Dynamic Routing with Next.js

File-based Routing: Next.js simplifies dynamic routing through file-based structures. For instance, [slug].js in the pages/posts directory generates dynamic routes for posts based on their slugs, streamlining the creation of dynamic pages. import { useRouter } from ‘next/router’ export default function Post() {  const router = useRouter()  const { slug } = router.query  return (   <div>… Continue reading Dynamic Routing with Next.js

Different Authentication strategies i n Next Js

Modern web applications commonly use several authentication strategies: OAuth/OpenID Connect (OIDC): Enable third-party access without sharing user credentials. Ideal for social media logins and Single Sign-On (SSO) solutions. They add an identity layer with OpenID Connect. Credentials-based login (Email + Password): A standard choice for web applications, where users log in with an email and… Continue reading Different Authentication strategies i n Next Js