How can I optimize build times for large product catalogs?

The skill includes configurations for token caching during SSG by setting the NEXT_BUILD_CACHE_TOKENS environment variable to true.

Does this skill support the Next.js App Router?

Yes, it is specifically optimized for the App Router, providing patterns for Server Components, Server Actions, and the modern Metadata API.

What is the difference between storefront() and storefront(cookies())?

storefront() is used in client components or build-time scripts, while storefront(cookies()) is required in Server Components and Actions to access user-specific request data.

How does this skill handle authentication in Next.js?

It utilizes CookieTokenStorage to automatically manage and sync authentication tokens between Server Components and browser cookies for a seamless user session.

Next.js E-commerce Patterns for Commerce Engine

Name: Next.js E-commerce Patterns for Commerce Engine
Author: commercengine

bycommercengine

0•

电子商务解决方案

Implements high-performance e-commerce storefronts using advanced Next.js patterns and the Commerce Engine SDK.

This skill provides specialized guidance for integrating Commerce Engine with Next.js, focusing on efficient data fetching and secure state management. It provides implementation patterns for context-aware SDK initialization, server-side cookie handling for authentication, and optimized Static Site Generation (SSG). By following these industry-standard practices for Server Components and Actions, developers can build secure, scalable, and SEO-friendly storefronts while avoiding common pitfalls in token management and SSR hydration.

主要功能

01Automated token management via CookieTokenStorage for seamless SSR authentication

02Direct SEO metadata mapping from Commerce Engine fields to Next.js Metadata API

030 GitHub stars

04Optimized SSG and ISR configurations for product and category pages

05Context-aware storefront() initialization for Client, Server, and Root Layouts

06Implementation patterns for Next.js Server Actions and secure mutations

使用场景

01Building a high-performance e-commerce storefront using the Next.js App Router

02Optimizing product listing and detail pages for SEO and speed using static generation

03Implementing secure authentication and cart persistence across server/client boundaries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add commercengine/skills nextjs-patterns

For use in Claude.ai and ChatGPT

Download Skill