Tag: next js

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

Render API data on the server-side by using Next.js API routes

1. Create an API endpoint: First, create an API endpoint using Next.js API routes. You can create a new file under the pages/api directory. For example, let’s create a file named example.js: // pages/api/example.js // Example API route to fetch data export default function handler(req, res) {     Simulated data for demonstration    … Continue reading Render API data on the server-side by using Next.js API routes

Time-based Revalidation in Next Js

Revalidating Data Revalidation is the process of purging the Data Cache and re-fetching the latest data. This is useful when your data changes and you want to ensure you show the latest information. Cached data can be revalidated in two ways: Time-based revalidation: Automatically revalidate data after a certain amount of time has passed. This… Continue reading Time-based Revalidation in Next Js

Next js Authentication by credentials using APP ROUTER Method

Create .env file with the following domain URL like NEXTAUTH_URL=http://localhost:3000/ Create the route.js file app/api/auth/[…nextauth] in the following path import NextAuth from “next-auth/next”; import CredentialsProvider from “next-auth/providers/credentials”; import GoogleProvider from “next-auth/providers/google”; export const authOptions = { providers: [ CredentialsProvider({ name: “Credentials”, credentials: { username: { label: “Username”, type: “text”, placeholder: “User Name” }, password: {… Continue reading Next js Authentication by credentials using APP ROUTER Method

To setup Xdomain in the NextJS

When using the frontend, it is not possible to post the request to the Netsuite backend directly. To overcome this limitation, we can utilize the xdomain library. When attempting to post the request from frontend to the Netsuite backend using Axios, it gets rejected by the Netsuite server. Therefore, we can use the xdomain library… Continue reading To setup Xdomain in the NextJS

Strategies for Reducing the Cache in Next Js API calling(Data fetching)

import { NextResponse } from “next/server”;    export const GET = async (req, res) => {  // Add cache-busting query string or HTTP headers as needed  const url = new URL(req.url);  url.searchParams.set(‘t’, Date.now()); // Optional: Cache busting    try {  const response = await fetch(url, {  headers: {  ‘Cache-Control’: ‘max-age=3600, must-revalidate’, // Example header  }, … Continue reading Strategies for Reducing the Cache in Next Js API calling(Data fetching)

Image compression libraries in Next.js

Next.js itself does not provide specific image compression libraries, as it’s more focused on server-side rendering, routing, and other aspects of web development. However, you can use third-party libraries within your Next.js project for image compression. Here are a few popular JavaScript libraries for image compression: image-size: A simple library to get the dimensions of… Continue reading Image compression libraries in Next.js

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

Issue: Image Not Displaying in Next.js with Firebase

When deploying the project to Firebase, an issue arises where the website displays ‘an image not found. So we just updated the next.config.mjs /** @type {import(‘next’).NextConfig} */ const nextConfig = {     output: “export”, // (optional) Set your desired output configuration     images: {       unoptimized: true,       domains:… Continue reading Issue: Image Not Displaying in Next.js with Firebase