In recent years, the evolution of React Server Components (RSCs) has signaled a dramatic shift in the way developers approach front-end architecture. By moving key rendering tasks to the server, RSCs promise not only to reduce the size of client-side JavaScript bundles but also to improve initial load times and overall user experience. This article […]
Posts Tagged ‘Next.js’
Deconstructing the Request Lifecycle in Sitecore Headless (with a JSS + Next.js Deep Dive)
In the era of traditional Sitecore MVC, the rendering lifecycle was tightly coupled to the Sitecore server. HTML generation, content retrieval, and presentation logic were all orchestrated within a single monolithic application. With the advent of headless architectures built using Sitecore JSS and platforms like XM Cloud, this paradigm has significantly shifted. Rendering responsibilities now […]
Real-Time Communication in Next.js Using Socket.IO: A Beginner’s Guide
In today’s web landscape, users expect instant feedback-whether it’s receiving a new chat message, seeing a real-time stock price update, or getting notified when someone comments on a post. This shift has made real-time communication essential for modern applications. In this beginner-friendly tutorial, we’ll explore how to build real-time features in a Next.js app using […]
Beginner’s Guide to Playwright Testing in Next.js
Building modern web applications comes with the responsibility of ensuring they perform correctly across different devices, browsers, and user interactions. If you’re developing with Next.js, a powerful React framework, incorporating automated testing from the start can save you from bugs, regression s, and unexpected failures in production. This guide introduces Playwright, a modern end-to-end testing […]
How to Optimize Sitecore Headless and Next.js on Vercel
Maybe you’ve already made the switch to XM Cloud, or maybe you’re still evaluating it as the answer to all your digital delivery challenges. Spoiler alert: it won’t magically solve everything — but with the right setup and smart optimizations, it can absolutely deliver fast, scalable, and maintainable experiences. If you’re using Sitecore Headless with […]
HCL Commerce V9.1 – Coexistence of the Headless Next.js Ruby & Aurora Storefronts
HCL Commerce v9.1 release saw a major change in features, functionality, and technology. This blog series will focus on each of these components separately. Some examples of these changes include HCL Commerce Search, which is powered by Elasticsearch, a modern storefront that uses Next.js, containerized cloud native architecture, modern business user tooling, and provides support […]
HCL Commerce V9.1 – The Power of the Next.js Ruby Storefront
The HCL Commerce v9.1 release saw major features, functionality, and technology changes. This blog series will focus on each of these components separately. Some examples of these changes include HCL Commerce Search, which is powered by Elasticsearch, a modern storefront that uses Next.js, containerized cloud-native architecture, modern business user tooling, and support for new integrations […]
Plop.js – A Micro-Generator Framework: Template Creation
Continuing our Plop.js journey from the last blog. Be sure to go back and read the previous installment in this series. In our previous discussion, we explored an introduction to Plop.js and its installation in a Next.js project. Additionally, we looked at a basic skeleton of plopfile.js. Understanding the Components of plopfile.js As we saw […]
Plop.js – A Micro-Generator Framework: Introduction and Installation
We may all have encountered this situation countless times in our projects—copying and pasting files just to create a new component, page, or service. Unfortunately, this slows us down and hampers our productivity by introducing errors into the workflow. However, there’s a solution! Plop.js is the answer to this problem, as it automates these tasks […]
Remix vs. Next.js: A Comprehensive Look at Modern React Frameworks
In the ever-evolving landscape of web development, choosing the right framework can significantly impact the performance and user experience of your applications. Two of the most prominent frameworks in the React ecosystem today are Remix and Next.js. Both are designed to enhance web development efficiency and performance, but they cater to different needs and use cases. In this […]
How to Build a Component Library in next with Storybook
Building a component library in Next.js with Storybook involves creating reusable UI components in Next.js and using Storybook to visualize and document them. Here’s a step-by-step guide on how to set up a component library in Next.js and integrate it with Storybook: 1) Set Up a Next.js Project If you don’t have a Next.js project […]
Build a Custom 404 Page Using React Router V6 and Next.js
Custom 404 Page Using React Router V6 React Router is a popular JavaScript library commonly used to create single-page applications in React. It offers a set of components and functions that allow you to define your app’s routing and navigation in a declarative way. In this blog post, we’ll walk you through the process of […]