Tag: next js

Warning: Invalid DOM Property in React and NextJS

When developing applications with React, Next or any JavaScript Frameworks, one of the warnings you might encounter is: “Warning: Invalid DOM property. Did you mean …?” This warning indicates that a property you’ve assigned to a DOM element does not conform to the standard naming conventions used by React. Why Does This Happen? React uses… Continue reading Warning: Invalid DOM Property in React and NextJS

Usage of Link Component in Next Js

<Link> is a React component that extends the HTML <a> element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js. import Link from ‘next/link’ function Home() { return ( <ul> <li> <Link href=”/”>Home</Link> </li> <li> <Link href=”/about”>About Us</Link> </li> <li> <Link href=”/blog/hello-world”>Blog Post</Link> </li> </ul> )} export default Home

How to Create a Step Progress Bar With Tailwind

The very first thing we need is the HTML structure. index.html <div class=”stepper-wrapper”> <div class=”stepper-item completed”> <div class=”step-counter”>1</div> <div class=”step-name”>First</div> </div> <div class=”stepper-item completed”> <div class=”step-counter”>2</div> <div class=”step-name”>Second</div> </div> <div class=”stepper-item active”> <div class=”step-counter”>3</div> <div class=”step-name”>Third</div> </div> <div class=”stepper-item”> <div class=”step-counter”>4</div> <div class=”step-name”>Forth</div> </div> </div> We have a wrapper that contains all of the steps.… Continue reading How to Create a Step Progress Bar With Tailwind

How to integrate Buttons and RSVP Forms with Next.js

Since Nextjs does not play that nicely with web components, we strongly recommend to use our official React Wrapper package instead of the default one. It already mitigates all the potential problems and issues. npm install add-to-calendar-button-react Step 2: Import it ​Import the module into the component, where you want to use the button. import { AddToCalendarButton… Continue reading How to integrate Buttons and RSVP Forms with Next.js

userAgent in nextjs

The userAgent helper extends the Web Request API with additional properties and methods to interact with the user agent object from the request. Middleware.js import { NextResponse, userAgent } from ‘next/server’   export function middleware(request) {   const url = request.nextUrl   const { device } = userAgent(request)   const viewport = device.type === ‘mobile’… Continue reading userAgent in nextjs

Firebase server setup in Next JS

// src/firebase.js’; import { initializeApp } from ‘firebase/app’; import { getAuth, signInWithEmailAndPassword } from ‘firebase/auth’; import { getFirestore } from ‘firebase/firestore’; import { getStorage, ref } from ‘firebase/storage’; const firebaseConfig = {   apiKey: import.meta.env.VITE_FIREBASE_API_KEY,   authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,   projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,   storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,   messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,   appId: import.meta.env.VITE_FIREBASE_APP_ID, }; const firebases = initializeApp(firebaseConfig);… Continue reading Firebase server setup in Next JS

How to configure custom font family and animation width in tailwind css

The sample code is added below  theme: {   extend: {  fontFamily: {         OpenSans: ‘Open Sans’,         Poppins: ‘Poppins’,       },   keyframes: {         closeAnimation: {           ‘0%’: { maxHeight: ‘500px’ },           ‘100%’: {… Continue reading How to configure custom font family and animation width in tailwind css

Workflow of connecting MariaDB (mysql) with the Database

Open XAMPP and enable Apache and mysql in the XAMPP. A database was created in the http://localhost/phpmyadmin/index.php. I have created a table width database name “nodedb” and table name users. I have entered some values in the columns, and I have to get the values as API in the frontend. For database connection, I have… Continue reading Workflow of connecting MariaDB (mysql) with the Database