create-content-sdk-app 2.0.0-canary.8 → 2.0.0

package/dist/templates/nextjs/.cursor/rules/project-setup.mdc

@@ -1,100 +1,100 @@
----
-description: Getting started with your Sitecore Content SDK Next.js project
-alwaysApply: true
-globs: []
----
-
-# Sitecore Content SDK Next.js Project
-
-## Project Overview
-
-This is a Sitecore Content SDK application built with Next.js. The project structure follows Sitecore best practices for XM Cloud development.
-
-Key Technologies:
-
-- Next.js (React framework)
-- Sitecore Content SDK
-- TypeScript
-- Sitecore XM Cloud
-
-## Getting Started
-
-Development Workflow:
-
-1. Install dependencies: `npm install`
-2. Configure environment variables (copy `.env.example` to `.env.local`)
-3. Start development server: `npm run dev`
-4. Build for production: `npm run build`
-
-Environment Configuration:
-
-- Copy `.env.example` to `.env.local`
-- Add your Sitecore API endpoint and key
-- Configure site name and other settings
-
-## Sitecore Integration
-
-Configuration:
-
-- Configure Sitecore connection in `sitecore.config.ts`
-- Register components in the component map
-- Use Sitecore field components for content rendering
-- Follow Sitecore's layout service patterns
-
-Component Development:
-
-- Create components in `src/components/`
-- Export from component files for registration
-- Use TypeScript interfaces for component props
-- Follow Sitecore field handling patterns
-
-## Project Structure
-
-```
-src/
-  components/          # React-specific SDK
-  lib/                 # Configuration and utilities
-  pages/               # Next.js pages
-  assets/              # Static assets and styles
-```
-
-## Best Practices
-
-Sitecore Components:
-
-- Use descriptive component names
-- Handle field validation gracefully
-- Implement proper error boundaries
-- Cache content when appropriate
-
-Performance:
-
-- Optimize images using Next.js Image component
-- Implement proper loading states
-- Use React.memo for expensive components
-- Consider server-side rendering implications
-
-## Development Commands
-
-```bash
-npm run dev          # Start development server
-npm run build        # Build for production
-npm run start        # Start production server
-npm run lint         # Run ESLint
-npm run type-check   # Run TypeScript compiler
-```
-
-## Next Steps
-
-1. Configure your Sitecore connection
-2. Create your first component
-3. Add content types and templates
-4. Set up your development workflow
-5. Deploy to your hosting platform
-
-Referenced:
-@src/components/
-@sitecore.config.ts
-@package.json
-@.env.example
-
+---
+description: Getting started with your Sitecore Content SDK Next.js project
+alwaysApply: true
+globs: []
+---
+
+# Sitecore Content SDK Next.js Project
+
+## Project Overview
+
+This is a Sitecore Content SDK application built with Next.js. The project structure follows Sitecore best practices for XM Cloud development.
+
+Key Technologies:
+
+- Next.js (React framework)
+- Sitecore Content SDK
+- TypeScript
+- Sitecore XM Cloud
+
+## Getting Started
+
+Development Workflow:
+
+1. Install dependencies: `npm install`
+2. Configure environment variables (copy `.env.example` to `.env.local`)
+3. Start development server: `npm run dev`
+4. Build for production: `npm run build`
+
+Environment Configuration:
+
+- Copy `.env.example` to `.env.local`
+- Add your Sitecore API endpoint and key
+- Configure site name and other settings
+
+## Sitecore Integration
+
+Configuration:
+
+- Configure Sitecore connection in `sitecore.config.ts`
+- Register components in the component map
+- Use Sitecore field components for content rendering
+- Follow Sitecore's layout service patterns
+
+Component Development:
+
+- Create components in `src/components/`
+- Export from component files for registration
+- Use TypeScript interfaces for component props
+- Follow Sitecore field handling patterns
+
+## Project Structure
+
+```
+src/
+  components/          # React-specific SDK
+  lib/                 # Configuration and utilities
+  pages/               # Next.js pages
+  assets/              # Static assets and styles
+```
+
+## Best Practices
+
+Sitecore Components:
+
+- Use descriptive component names
+- Handle field validation gracefully
+- Implement proper error boundaries
+- Cache content when appropriate
+
+Performance:
+
+- Optimize images using Next.js Image component
+- Implement proper loading states
+- Use React.memo for expensive components
+- Consider server-side rendering implications
+
+## Development Commands
+
+```bash
+npm run dev          # Start development server
+npm run build        # Build for production
+npm run start        # Start production server
+npm run lint         # Run ESLint
+npm run type-check   # Run TypeScript compiler
+```
+
+## Next Steps
+
+1. Configure your Sitecore connection
+2. Create your first component
+3. Add content types and templates
+4. Set up your development workflow
+5. Deploy to your hosting platform
+
+Referenced:
+@src/components/
+@sitecore.config.ts
+@package.json
+@.env.example
+

package/dist/templates/nextjs/.cursor/rules/sitecore.mdc

@@ -1,150 +1,150 @@
----
-description: Sitecore development patterns for your project
-alwaysApply: false
-globs:
-  - 'src/components/**'
-  - 'src/lib/**'
-  - 'sitecore.config.ts'
-  - '**/*sitecore*'
-  - '**/*content*'
----
-
-# Sitecore Development Patterns
-
-## Component Development
-
-Sitecore Component Naming:
-
-- Use descriptive, feature-based names: `HeroWithContent`, `ProductListing`, `ContentBlockGrid`
-- Follow PascalCase convention
-- Include component type in name when helpful: `LayoutContainer`, `ContentRenderer`
-
-Component Registration:
-
-- Export component from component file
-- Use descriptive, PascalCase names
-- Include TypeScript interfaces for props
-- Handle missing fields gracefully
-
-```typescript
-// Component props interface
-interface HeroProps {
-  fields: {
-    title: Field;
-    subtitle: Field;
-    backgroundImage: Field;
-  };
-}
-
-export default function Hero({ fields }: HeroProps) {
-  return (
-    <div>
-      <Text field={fields?.title} tag="h1" />
-      <Text field={fields?.subtitle} tag="p" />
-      <Image field={fields?.backgroundImage} />
-    </div>
-  );
-}
-```
-
-## Content Management
-
-Field Handling:
-
-- Always validate field existence before rendering
-- Use helper functions for common field operations
-- Handle empty/null fields gracefully
-- Prefer Sitecore field components over manual rendering
-
-```typescript
-// Good: Using Sitecore field components
-<Text field={fields?.title} tag="h1" />
-<RichText field={fields?.content} />
-
-// Avoid: Manual field value extraction unless necessary
-```
-
-Layout Service:
-
-- Use the Layout Service for page data fetching
-- Implement proper error boundaries for layout rendering
-- Handle missing placeholder content gracefully
-- Cache layout data when appropriate
-
-## Configuration
-
-Environment Setup:
-
-- Use `.env.local` for local development
-- Never commit API keys to version control
-- Use `.env.example` to document required variables
-- Configure Sitecore endpoints in `sitecore.config.ts`
-
-```typescript
-// sitecore.config.ts
-import { defineConfig } from '@sitecore-content-sdk/nextjs/config';
-
-export default defineConfig({
-  api: {
-    edge: {
-      contextId: process.env.SITECORE_EDGE_CONTEXT_ID || '',
-      clientContextId: process.env.NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID,
-      edgeUrl:
-        process.env.NEXT_PUBLIC_SITECORE_EDGE_PLATFORM_HOSTNAME ||
-        process.env.SITECORE_EDGE_PLATFORM_HOSTNAME ||
-        'https://edge-platform.sitecorecloud.io',
-    },
-    local: {
-      apiKey: process.env.SITECORE_API_KEY || '',
-      apiHost: process.env.SITECORE_API_HOST || '',
-    },
-  },
-  defaultSite: process.env.NEXT_PUBLIC_DEFAULT_SITE_NAME || 'default',
-  defaultLanguage: process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE || 'en',
-  editingSecret: process.env.SITECORE_EDITING_SECRET,
-});
-```
-
-## Security and Performance
-
-Security Best Practices:
-
-- Sanitize user inputs before processing
-- Validate content from Sitecore before rendering
-- Use HTTPS for all Sitecore connections
-- Never expose sensitive configuration in client-side code
-
-Content Fetching:
-
-- Implement caching strategy for content (React Query recommended)
-- Use GraphQL queries efficiently (avoid over-fetching)
-- Implement proper loading states and error handling
-- Consider content preview vs. published content scenarios
-
-## Development Patterns
-
-Error Handling:
-
-- Create custom error classes: `SitecoreFetchError`, `ComponentRenderError`
-- Log errors appropriately for debugging
-- Provide fallback content when components fail to render
-- Use error boundaries in React applications
-
-Placeholder Management:
-
-- Use strongly-typed placeholder names
-- Handle dynamic placeholders appropriately
-- Implement fallback rendering for missing placeholders
-- Follow Sitecore's placeholder naming conventions
-
-Testing:
-
-- Mock Sitecore services in unit tests
-- Test component rendering with various field configurations
-- Include tests for error scenarios (missing fields, API failures)
-- Use Sitecore's test data helpers when available
-
-Referenced:
-@src/components/
-@sitecore.config.ts
-@.env.example
+---
+description: Sitecore development patterns for your project
+alwaysApply: false
+globs:
+  - 'src/components/**'
+  - 'src/lib/**'
+  - 'sitecore.config.ts'
+  - '**/*sitecore*'
+  - '**/*content*'
+---
+
+# Sitecore Development Patterns
+
+## Component Development
+
+Sitecore Component Naming:
+
+- Use descriptive, feature-based names: `HeroWithContent`, `ProductListing`, `ContentBlockGrid`
+- Follow PascalCase convention
+- Include component type in name when helpful: `LayoutContainer`, `ContentRenderer`
+
+Component Registration:
+
+- Export component from component file
+- Use descriptive, PascalCase names
+- Include TypeScript interfaces for props
+- Handle missing fields gracefully
+
+```typescript
+// Component props interface
+interface HeroProps {
+  fields: {
+    title: Field;
+    subtitle: Field;
+    backgroundImage: Field;
+  };
+}
+
+export default function Hero({ fields }: HeroProps) {
+  return (
+    <div>
+      <Text field={fields?.title} tag="h1" />
+      <Text field={fields?.subtitle} tag="p" />
+      <Image field={fields?.backgroundImage} />
+    </div>
+  );
+}
+```
+
+## Content Management
+
+Field Handling:
+
+- Always validate field existence before rendering
+- Use helper functions for common field operations
+- Handle empty/null fields gracefully
+- Prefer Sitecore field components over manual rendering
+
+```typescript
+// Good: Using Sitecore field components
+<Text field={fields?.title} tag="h1" />
+<RichText field={fields?.content} />
+
+// Avoid: Manual field value extraction unless necessary
+```
+
+Layout Service:
+
+- Use the Layout Service for page data fetching
+- Implement proper error boundaries for layout rendering
+- Handle missing placeholder content gracefully
+- Cache layout data when appropriate
+
+## Configuration
+
+Environment Setup:
+
+- Use `.env.local` for local development
+- Never commit API keys to version control
+- Use `.env.example` to document required variables
+- Configure Sitecore endpoints in `sitecore.config.ts`
+
+```typescript
+// sitecore.config.ts
+import { defineConfig } from '@sitecore-content-sdk/nextjs/config';
+
+export default defineConfig({
+  api: {
+    edge: {
+      contextId: process.env.SITECORE_EDGE_CONTEXT_ID || '',
+      clientContextId: process.env.NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID,
+      edgeUrl:
+        process.env.NEXT_PUBLIC_SITECORE_EDGE_PLATFORM_HOSTNAME ||
+        process.env.SITECORE_EDGE_PLATFORM_HOSTNAME ||
+        'https://edge-platform.sitecorecloud.io',
+    },
+    local: {
+      apiKey: process.env.SITECORE_API_KEY || '',
+      apiHost: process.env.SITECORE_API_HOST || '',
+    },
+  },
+  defaultSite: process.env.NEXT_PUBLIC_DEFAULT_SITE_NAME || 'default',
+  defaultLanguage: process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE || 'en',
+  editingSecret: process.env.SITECORE_EDITING_SECRET,
+});
+```
+
+## Security and Performance
+
+Security Best Practices:
+
+- Sanitize user inputs before processing
+- Validate content from Sitecore before rendering
+- Use HTTPS for all Sitecore connections
+- Never expose sensitive configuration in client-side code
+
+Content Fetching:
+
+- Implement caching strategy for content (React Query recommended)
+- Use GraphQL queries efficiently (avoid over-fetching)
+- Implement proper loading states and error handling
+- Consider content preview vs. published content scenarios
+
+## Development Patterns
+
+Error Handling:
+
+- Create custom error classes: `SitecoreFetchError`, `ComponentRenderError`
+- Log errors appropriately for debugging
+- Provide fallback content when components fail to render
+- Use error boundaries in React applications
+
+Placeholder Management:
+
+- Use strongly-typed placeholder names
+- Handle dynamic placeholders appropriately
+- Implement fallback rendering for missing placeholders
+- Follow Sitecore's placeholder naming conventions
+
+Testing:
+
+- Mock Sitecore services in unit tests
+- Test component rendering with various field configurations
+- Include tests for error scenarios (missing fields, API failures)
+- Use Sitecore's test data helpers when available
+
+Referenced:
+@src/components/
+@sitecore.config.ts
+@.env.example

package/dist/templates/nextjs/.env.container.example

@@ -1,27 +1,27 @@
-# This file should be copied to .env.local and modified with your environment variables to connect to your Sitecore container instance.
-
-# To secure the Sitecore editor endpoint exposed by your Next.js app
-# (`/api/editing/render` by default), a secret token is used. This (client-side)
-SITECORE_EDITING_SECRET=
-
-# Your Sitecore site name.
-# The value of the variable represents the default/configured site.
-NEXT_PUBLIC_DEFAULT_SITE_NAME=
-
-# Your default app language.
-NEXT_PUBLIC_DEFAULT_LANGUAGE=
-
-# Your Sitecore API key is needed to build the app.
-NEXT_PUBLIC_SITECORE_API_KEY=
-
-# Your Sitecore API hostname is needed to build the app.
-NEXT_PUBLIC_SITECORE_API_HOST=
-
-# Sitecore Content SDK npm packages utilize the debug module for debug logging.
-# https://www.npmjs.com/package/debug
-# Set the DEBUG environment variable to 'content-sdk:*' to see all logs:
-#DEBUG=content-sdk:*
-# Or be selective and show for example only layout service logs:
-#DEBUG=content-sdk:layout
-# Or everything BUT layout service logs:
-#DEBUG=content-sdk:*,-content-sdk:layout
+# This file should be copied to .env.local and modified with your environment variables to connect to your Sitecore container instance.
+
+# To secure the Sitecore editor endpoint exposed by your Next.js app
+# (`/api/editing/render` by default), a secret token is used. This (client-side)
+SITECORE_EDITING_SECRET=
+
+# Your Sitecore site name.
+# The value of the variable represents the default/configured site.
+NEXT_PUBLIC_DEFAULT_SITE_NAME=
+
+# Your default app language.
+NEXT_PUBLIC_DEFAULT_LANGUAGE=
+
+# Your Sitecore API key is needed to build the app.
+NEXT_PUBLIC_SITECORE_API_KEY=
+
+# Your Sitecore API hostname is needed to build the app.
+NEXT_PUBLIC_SITECORE_API_HOST=
+
+# Sitecore Content SDK npm packages utilize the debug module for debug logging.
+# https://www.npmjs.com/package/debug
+# Set the DEBUG environment variable to 'content-sdk:*' to see all logs:
+#DEBUG=content-sdk:*
+# Or be selective and show for example only layout service logs:
+#DEBUG=content-sdk:layout
+# Or everything BUT layout service logs:
+#DEBUG=content-sdk:*,-content-sdk:layout

package/dist/templates/nextjs/.env.remote.example

@@ -1,51 +1,51 @@
-# This file should be copied to .env.local and modified with your environment variables to connect to your remote Sitecore instance.
-
-# To secure the Sitecore editor endpoint exposed by your Next.js app
-# (`/api/editing/render` by default), a secret token is used. This (client-side)
-SITECORE_EDITING_SECRET=
-
-# Your Sitecore site name.
-# The value of the variable represents the default/configured site.
-NEXT_PUBLIC_DEFAULT_SITE_NAME=
-
-# Your default app language.
-NEXT_PUBLIC_DEFAULT_LANGUAGE=
-
-# Your unified Sitecore Edge Context Id for server-side use.
-# This will be used over any Sitecore Preview / Delivery Edge variables (above).
-SITECORE_EDGE_CONTEXT_ID=
-
-# Your Sitecore Edge Context Id for client-side use.
-# Will be used as a fallback if separate SITECORE_EDGE_CONTEXT_ID value is not provided
-NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID=
-
-# Optional: custom Sitecore Edge Platform hostname (hostname or full URL).
-NEXT_PUBLIC_SITECORE_EDGE_PLATFORM_HOSTNAME=
-
-# Optional: custom Experience Edge hostname for media URL rewriting (e.g. staging).
-SITECORE_EXPERIENCE_EDGE_HOSTNAME=
-
-# An optional Sitecore Personalize scope identifier.
-# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
-# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
-NEXT_PUBLIC_PERSONALIZE_SCOPE=
-
-# Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
-PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=
-
-# Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
-PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=
-
-# Sitecore Content SDK npm packages utilize the debug module for debug logging.
-# https://www.npmjs.com/package/debug
-# Set the DEBUG environment variable to 'content-sdk:*' to see all logs:
-#DEBUG=content-sdk:*
-# Or be selective and show for example only layout service logs:
-#DEBUG=content-sdk:layout
-# Or everything BUT layout service logs:
-#DEBUG=content-sdk:*,-content-sdk:layout
-
-# Client ID, Secret and Rendering Host Name used for Design Library functionality
-SITECORE_AUTH_CLIENT_ID=
-SITECORE_AUTH_CLIENT_SECRET=
-SITECORE_RENDERINGHOST_NAME=
+# This file should be copied to .env.local and modified with your environment variables to connect to your remote Sitecore instance.
+
+# To secure the Sitecore editor endpoint exposed by your Next.js app
+# (`/api/editing/render` by default), a secret token is used. This (client-side)
+SITECORE_EDITING_SECRET=
+
+# Your Sitecore site name.
+# The value of the variable represents the default/configured site.
+NEXT_PUBLIC_DEFAULT_SITE_NAME=
+
+# Your default app language.
+NEXT_PUBLIC_DEFAULT_LANGUAGE=
+
+# Your unified Sitecore Edge Context Id for server-side use.
+# This will be used over any Sitecore Preview / Delivery Edge variables (above).
+SITECORE_EDGE_CONTEXT_ID=
+
+# Your Sitecore Edge Context Id for client-side use.
+# Will be used as a fallback if separate SITECORE_EDGE_CONTEXT_ID value is not provided
+NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID=
+
+# Optional: custom Sitecore Edge Platform hostname (hostname or full URL).
+NEXT_PUBLIC_SITECORE_EDGE_PLATFORM_HOSTNAME=
+
+# Optional: custom Experience Edge hostname for media URL rewriting (e.g. staging).
+SITECORE_EXPERIENCE_EDGE_HOSTNAME=
+
+# An optional Sitecore Personalize scope identifier.
+# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
+# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
+NEXT_PUBLIC_PERSONALIZE_SCOPE=
+
+# Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
+PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=
+
+# Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
+PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=
+
+# Sitecore Content SDK npm packages utilize the debug module for debug logging.
+# https://www.npmjs.com/package/debug
+# Set the DEBUG environment variable to 'content-sdk:*' to see all logs:
+#DEBUG=content-sdk:*
+# Or be selective and show for example only layout service logs:
+#DEBUG=content-sdk:layout
+# Or everything BUT layout service logs:
+#DEBUG=content-sdk:*,-content-sdk:layout
+
+# Client ID, Secret and Rendering Host Name used for Design Library functionality
+SITECORE_AUTH_CLIENT_ID=
+SITECORE_AUTH_CLIENT_SECRET=
+SITECORE_RENDERINGHOST_NAME=