1. Turbopack Now Production-Ready Turbopack, the Webpack replacement introduced in Next.js 13, is now officially stable. Built in Rust, it offers 10x faster local dev builds and instant HMR (Hot Module Replacement) feedback. Why it matters: No more waiting around during dev builds Better DX when working with large codebases Ideal for monorepos using tools… Continue reading Blazing Fast Sites with Next.js 14: What’s New and How to Use It
Tag: next
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
Handling Authentication in Next.js
Authentication is essential for securing user data in Next.js applications. It allows users to verify their identity and access protected resources. Next.js supports various authentication methods, including NextAuth.js, JWT, and Firebase, making it easy to integrate authentication without complex configurations. Implementing NextAuth.js import NextAuth from “next-auth”; import Providers from “next-auth/providers”; export default NextAuth({ providers:… Continue reading Handling Authentication in Next.js
Dynamic Routes in Next.js
Dynamic routes allow you to create pages based on URL parameters, useful for generating unique content like product pages or user profiles. Using this approach allows for better scalability, flexibility, and efficiency in your applications. It helps in organizing code, improving performance, and ensuring seamless content updates. Creating a Dynamic Route Inside pages/, create a… Continue reading Dynamic Routes in Next.js
API Routes in Next.js
Next.js provides API routes to handle backend functionality within your application. These routes live in the pages/api/ directory and allow you to create endpoints for fetching data, authentication, and handling form submissions. Using this approach allows for better scalability, flexibility, and efficiency in your applications. It helps in organizing code, improving performance, and ensuring seamless… Continue reading API Routes in Next.js
What is REST Queries in Payload cms
With the REST API, you can use the full power of Payload queries as well but they become a bit more unwieldy the more complex that they get. Simple queries are fairly straightforward to write. To understand the syntax, you need to understand how Express and similar languages would go about parsing a complex URL… Continue reading What is REST Queries in Payload cms
Disabling ESLint in Next.js
ESLint is a powerful tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, making it an essential part of modern web development. In Next.js, ESLint is integrated by default to help maintain code quality and consistency. Why Disable ESLint? Legacy Code: Integrating ESLint into a large legacy codebase might generate numerous warnings and… Continue reading Disabling ESLint in Next.js
Features in React-toastify.
React-toastify is a popular library used for displaying toast notifications in React applications. It offers various features and customization options to enhance the user experience when showing notifications. Below are some key features and capabilities provided by react-toastify: 1. Simple API Easy Integration: react-toastify provides a simple API for displaying toast notifications. You can import… Continue reading Features in React-toastify.
Time Zone Conversion with Moment.js in Next.js
Installation npm install moment Time Zone Conversion // Original date in GMT const originalDate = moment.utc(‘2024-04-22 12:00:00’); // Convert to a different time zone (e.g., New York) const convertedDate = originalDate.tz(‘America/New_York’); console.log(convertedDate.format(‘YYYY-MM-DD HH:mm:ss’)); // Output: 2024-04-22 08:00:00 Input Format When specifying time zones in Moment.js, it’s essential to adhere to the city format recommended by… Continue reading Time Zone Conversion with Moment.js in Next.js
How to pass page number in url in nextjs?
At first declare a function handlePageChange() code: const handlePageChange = (count) => { // Update the state of currentPage and filters setCurrentPage(count); params.set(‘m_page’, count); window.history.replaceState({}, ”, `${window.location.pathname}?${params}`); }; And handlePageChange code: <div className=“flex justify-between items-center screen-xs:mx-0 mx-4 p-4 px-8”> <button onClick={() => handlePageChange(currentPage – 1)} disabled={currentPage === 1} className=“border border-gray-300 px-4 py-2 rounded-md text-sm font-medium… Continue reading How to pass page number in url in nextjs?