← Back to the catalog Build Next.js and React applications for Saleor — App Router, server and client components, GraphQL client integration, MacawUI in Apps, and Tailwind CSS. Use when building Saleor storefronts or Apps with Next.js.
View on GitHub ↗ Copy repo URL Copy SKILL.md link License: MIT /plugin marketplace add OrcaQubits/agentic-commerce-skills-plugins The exact command may vary by repository. Check the README on GitHub.
For the skill author
Shows your skill is listed on Skillteca, generates a backlink and trackable traffic.
Markdown HTML
[](https://www.skillteca.com.br/skills/nextjs-react?utm_source=badge&utm_medium=readme&utm_campaign=badge) Copy snippet Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
Design e Frontend #test by anthropics
Applies Anthropic's official brand colors and typography to any artifact that may benefit from its look-and-feel. Use it when brand colors, style guidelines, visual formatting, or company design standards apply.
Design e Frontend by anthropics
Creates distinctive, production-grade frontend interfaces with high design quality, generating creative, polished code and UI design that avoids generic AI aesthetics. Use for building web components, pages, and applications, or for styling/beautifying web UIs.
Design e Frontend #css #ai by anthropics
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
Design e Frontend #llm #typescript by anthropics
Category alert
One short email with only the new Design e Frontend skills. 4 minutes of reading, no spam, unsubscribe with one click.
You confirm your email on the first send. No spam. Unsubscribe with one click.
Next.js & React for Saleor
Before writing code
Fetch live docs :
Web-search site:nextjs.org docs app for current Next.js App Router documentation
Web-search site:docs.saleor.io storefront for Saleor storefront development guide
Web-search site:github.com saleor storefront for the official Saleor storefront template source
Web-search site:github.com saleor macaw-ui for MacawUI component library reference
Web-search saleor app template Next.js saleor-app-sdk for App development patterns
Fetch https://docs.saleor.io/docs/developer/app-store/apps/overview for App architecture
Next.js App Router Conventions
File Conventions
File Purpose Rendering layout.tsxShared layout wrapping child routes Server component (default) page.tsxUnique UI for a route segment Server component (default) loading.tsxLoading UI (React Suspense) Server component error.tsxError boundary for route segment Client component (required) not-found.tsx404 UI for route segment Server component template.tsxRe-rendered layout (no state persistence) Server component route.tsAPI route handler Server-only
Routing Patterns for Saleor Storefronts
Route Segment Purpose /[channel]Dynamic channel Multi-channel routing /[channel]/productsProduct listing Category/collection pages /[channel]/products/[slug]Product detail Single product page /[channel]/cartCart Shopping cart /[channel]/checkoutCheckout Checkout flow /[channel]/accountAccount Customer dashboard /[channel]/searchSearch Product search results
Use dynamic segments [channel] for multi-channel support
Use route groups (storefront) and (dashboard) to organize layouts
Server vs Client Components
Decision Matrix
Criterion Server Component Client Component Data fetching Fetch directly (no waterfall) Use useQuery hooks SEO critical Yes (HTML in response) No (client-rendered) Interactivity None (static output) Click, input, state Hooks Cannot use hooks useState, useEffect, etc.Bundle size Zero JS sent to client Included in JS bundle
Component Patterns for Saleor
Component Type Reason Product list page Server SEO, data fetching Product detail page Server SEO, data fetching Add to cart button Client Interactivity, state Cart sidebar Client State management, animation Checkout form Client Form state, validation Search bar Client Input handling, debounce Navigation Server Static, SEO links Price display Server Channel-aware, static
Default to server components — add "use client" only when needed; pass server-fetched data as props to client components
GraphQL Client Integration
urql (Saleor Recommended)
Package Purpose @urql/coreCore urql client @urql/nextNext.js App Router integration graphqlGraphQL parsing (peer dependency)
Setup Pattern
Concern Implementation Server client Create urql client in server utility, use in server components Client provider Wrap client components with UrqlProvider in layout Auth header Add Authorization: Bearer <token> via fetchOptions Channel header Add saleor-channel: <slug> via fetchOptions SSR Use @urql/next for SSR data hydration
Apollo Client Alternative
Use @apollo/client with @apollo/experimental-nextjs-app-support
Provides normalized caching (useful for complex state)
Heavier bundle than urql
Data Fetching Patterns
Pattern Where How Server component fetch page.tsx, layout.tsxawait client.query() directlyClient query hook "use client" componentsuseQuery(Document, { variables })Server action Form submissions "use server" functions calling GraphQLRoute handler route.tsAPI endpoint calling Saleor GraphQL Parallel fetching Server component Promise.all([query1, query2])
Fetch data as high in the component tree as possible
Use Promise.all for parallel independent queries
Use server actions for mutations (checkout updates, cart modifications)
Caching Strategies
Strategy Scope Configuration Static Build time export const revalidate = falseISR Time-based revalidation export const revalidate = 60 (seconds)On-demand Webhook-triggered revalidatePath() or revalidateTag()No cache Always fresh export const dynamic = "force-dynamic"
Saleor Caching Recommendations
Page Strategy Rationale Product listing ISR (60s) Content changes infrequently Product detail ISR (60s) + on-demand Revalidate on product webhook Cart / Checkout No cache User-specific, transactional Static pages Static CMS content, rarely changes
Environment Variables
Variable Where Purpose NEXT_PUBLIC_SALEOR_API_URLClient + Server Saleor GraphQL endpoint SALEOR_API_URLServer only Server-side GraphQL endpoint NEXT_PUBLIC_DEFAULT_CHANNELClient + Server Default channel slug SALEOR_APP_TOKENServer only App token for authenticated queries
Prefix with NEXT_PUBLIC_ for client-accessible variables
Keep secrets (App tokens, API keys) server-only (no prefix)
Tailwind CSS Setup
Step Action Install npm install -D tailwindcss @tailwindcss/postcss postcssConfigure Add @tailwindcss/postcss to postcss.config.js Content paths Set content in tailwind.config.ts to include all component files Global import Add @import "tailwindcss" to globals.css
The official Saleor storefront template uses Tailwind CSS
Use CSS custom properties for theme tokens (channel-specific branding)
MacawUI Integration for Apps
MacawUI is the Saleor Dashboard component library used in Saleor Apps:
Component Category Examples Layout Box, Layout, SidebarForms Input, Select, Checkbox, MultiselectData display List, Table, Chip, TagFeedback Alert, Banner, SkeletonActions Button, IconButton, Dropdown
Context UI Library Reason Saleor App (Dashboard iframe) MacawUI Consistent Dashboard look and feel Storefront Tailwind CSS / custom Brand-specific design
Install via npm install @saleor/macaw-ui
Wrap App root with <ThemeProvider> from MacawUI
MacawUI follows the Saleor design system (spacing, colors, typography)
Image Optimization
Feature Configuration next/image Use for all product and media images Remote patterns Add Saleor media domain to next.config.js images.remotePatterns Sizes Set sizes attribute for responsive images Priority Add priority to above-the-fold images (hero, first product) Formats Next.js auto-serves WebP/AVIF when supported
Best Practices
Default to server components and add "use client" only for interactivity
Fetch data in server components and pass as props to client components
Use the App Router file conventions (page.tsx, layout.tsx, error.tsx) consistently
Set up GraphQL code generation for type-safe queries and mutations
Read full description↓
Comments · No comments No comments yet. Be the first. 