NextJS Server-Side Product Modals using URL, Suspense & Fetch

Discover how to set up pop-up modals on the server!


In this tutorial, learn how to build modals that are fully server-side rendered using Next.js. The video guide walks through how to create a product page by fetching data from a public API, manipulating URL state and using React Suspense for handling loading states. Attention is also given to building a loading UI and demonstrating a convenient way to build a loading skeleton.


Note: Knowledge of Next.js, URLs, and React Suspense are necessary for maximum comprehension of this tutorial.


📖 Chapters:


00:00 Marker
00:00 Introduction and Video Setup
00:20 Building Server Side Rendered Modals
01:03 Exploring the Codebase
01:56 Understanding the Middleware
03:41 Setting Up the Products Page
05:12 Fetching Products from API
06:22 Rendering Products on UI
07:27 Implementing Product Modal
07:52 Adding Loading UI with React Suspense
08:13 Explaining the Product Loading Process
08:49 Setting Up the Product Modal

10:32 Creating a New URL for the 'View More' Button
12:00 Implementing the Modal Opening Function
12:26 Testing the Modal Opening and Closing
13:17 Fetching the Product Data
14:41 Creating the Loading UI
16:00 Improving the Product Layout
16:58 Conclusion and Feedback Request


✅ Key Takeaway: Learn how to build SSR Product Modals


🔗 Resources:


- NextJS App Router: https://nextjs.org/docs
- React Suspense - https://react.dev/reference/react/Sus...
- Fetch API - https://developer.mozilla.org/en-US/d...
- new URL() - https://developer.mozilla.org/en-US/d...
- new URLSearchParams() - https://developer.mozilla.org/en-US/d...
- Source code: https://github.com/taylor-lindores-re...