Next.js

What are webhooks? A webhook is a way for an application to communicate with other external applications. Apps use webhooks to send automated messages or information to other apps. For example, Payal would tell your accounting app whenever a client pays you, Twillio routes phone calls to your number, and WooCommerce can notify you about new […]

Full-stack apps built with Next.js has three aspects of authentication: client-side authentication, server-side authentication, and API route authentication. I have discussed client-side authentication in a previous post. In this post, I will be discussing Server-side & API routes authentication in NextAuth.js. How does server-side authentication work? The browser sends a request with a user session

Authentication in Next.js Apps falls into two broad perspectives Page authentication Client-side Server-side API route authentication Before you implement any authentication, you need to have a clear understanding of what data-fetching strategy you are going to use in your app. you can read about data-fetching strategies in the following posts. SSG, pre-rendering and getStaticProps server-side

In this post, I will show you how to create Next.js API routes and how to make requests to those APIs from Frontend. Next.js API Routes Next.js is a production-ready React Framework You can write frontend code for user interaction and backend Rest API that handles requests and responses. Routing in Nex.js is based on

What is on-demand ISR? On-demand ISR is a new feature added to the existing incremental static regeneration ( ISR ) in Next.js. Using ISR developers can reduce build-time in SSG. And most importantly, updating the cache periodically at a previously specified interval can resolve the issue of showing stale data on web pages. Although ISR

Client-side data fetching When there is a web page that shows user-specific data that does not need any optimization for SEO client-side data fetching is the way to go. In Next.js, just as in React.js, you can use the useEffect hook with async functions to fetch data and the useState hook to display them in

What is Server-Side Rendering (SSR )? In this post, I will talk about one of the ways that Next.js pre-render web pages which is server-side rendering ( SSR ).  Server-side rendering is not a new approach to web page generation. In fact, it is the traditional way of creating dynamic web pages. If you are

Incremental Static Regeneration ( ISR ) is relatively a new feature in Next.js. It is immensely helpful for a developer, and greatly improves the performance of web applications. You need to have an understanding of getStaticProps and getstaticPaths to have a clear idea of ISR. Why do we need Incremental Static Regeneration? With SSG, the

What is getStaticPaths? getStaticPaths is another special function in Next.js used in conjunction with getStaticProps for dynamic routes. In other words, you can use getStaticPaths on a page that uses a dynamic route, and whenever you use this function on that page, there must be a getStaticProps function as well. [sample].js What is a Master-Detail

What is pre-rendering? Next.js official documents say that Next.js, by default, pre-renders every page in the application. What does that really mean? It means that the web page that you see on the browser receives to the browser as an HTML page with minimal javascript required to add interactivity to each HTML page. A user