create-content-sdk-app 2.0.2 → 2.1.0-canary.2

package/dist/templates/nextjs-app-router/.cursor/rules/sitecore.mdc

@@ -1,174 +1,174 @@
----
-description: Sitecore development patterns for your App Router project
-alwaysApply: false
-globs:
-  - 'src/app/**'
-  - 'src/components/**'
-  - 'src/lib/**'
-  - 'sitecore.config.ts'
-  - '**/*sitecore*'
-  - '**/*content*'
----
-
-# Sitecore App Router Development
-
-## Server Component Patterns
-
-Sitecore Data Fetching:
-
-- Use Server Components for Sitecore content
-- Fetch data directly in components when possible
-- Handle loading and error states appropriately
-- Cache responses for better performance
-
-```typescript
-// Server Component example
-import { getLayoutData } from '@/lib/sitecore';
-
-export default async function SitecorePage({ params }: { params: { path: string[] } }) {
-  try {
-    const layoutData = await getLayoutData(params.path.join('/'));
-    return <SitecoreLayout layoutData={layoutData} />;
-  } catch (error) {
-    return <div>Content not found</div>;
-  }
-}
-```
-
-## Client Component Integration
-
-Interactive Sitecore Components:
-
-- Use 'use client' directive when needed
-- Keep client components focused on interactivity
-- Pass server-fetched data as props
-- Handle hydration mismatches carefully
-
-```typescript
-'use client';
-
-interface InteractiveSitecoreComponentProps {
-  fields: {
-    title: Field;
-    content: Field;
-  };
-}
-
-export default function InteractiveSitecoreComponent({
-  fields,
-}: InteractiveSitecoreComponentProps) {
-  // Client-side interactivity here
-  return (
-    <div>
-      <Text field={fields?.title} tag="h2" />
-      <RichText field={fields?.content} />
-    </div>
-  );
-}
-```
-
-## 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`
-
-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
-
-## Routing and Data
-
-Dynamic Routes:
-
-- Use [...path] for Sitecore catch-all routes
-- Handle route parameters appropriately
-- Implement proper 404 handling
-- Support preview mode when needed
-
-Layout and Loading:
-
-- Create layout.tsx for shared page structure
-- Implement loading.tsx for better UX
-- Use error.tsx for error boundaries
-- Handle metadata and SEO properly
-
-## Internationalization
-
-Multi-language Support:
-
-- Configure next-intl for language routing
-- Handle Sitecore language contexts
-- Implement language switching
-- Use proper locale-based data fetching
-
-```typescript
-// Language-aware data fetching
-import { getTranslations } from 'next-intl/server';
-
-export default async function LocalizedPage() {
-  const t = await getTranslations('common');
-  // Fetch Sitecore content for current locale
-}
-```
-
-## 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,
-});
-```
-
-## Performance Optimization
-
-Server-Side Rendering:
-
-- Leverage SSR for Sitecore content
-- Use streaming for improved perceived performance
-- Implement proper caching headers
-- Optimize bundle size with Server Components
-
-Caching Strategies:
-
-- Cache Sitecore API responses appropriately
-- Use Next.js caching features
-- Handle content updates and cache invalidation
-- Consider CDN caching for static content
-
-Referenced:
-@src/app/
-@src/components/
-@src/i18n/
-@sitecore.config.ts
+---
+description: Sitecore development patterns for your App Router project
+alwaysApply: false
+globs:
+  - 'src/app/**'
+  - 'src/components/**'
+  - 'src/lib/**'
+  - 'sitecore.config.ts'
+  - '**/*sitecore*'
+  - '**/*content*'
+---
+
+# Sitecore App Router Development
+
+## Server Component Patterns
+
+Sitecore Data Fetching:
+
+- Use Server Components for Sitecore content
+- Fetch data directly in components when possible
+- Handle loading and error states appropriately
+- Cache responses for better performance
+
+```typescript
+// Server Component example
+import { getLayoutData } from '@/lib/sitecore';
+
+export default async function SitecorePage({ params }: { params: { path: string[] } }) {
+  try {
+    const layoutData = await getLayoutData(params.path.join('/'));
+    return <SitecoreLayout layoutData={layoutData} />;
+  } catch (error) {
+    return <div>Content not found</div>;
+  }
+}
+```
+
+## Client Component Integration
+
+Interactive Sitecore Components:
+
+- Use 'use client' directive when needed
+- Keep client components focused on interactivity
+- Pass server-fetched data as props
+- Handle hydration mismatches carefully
+
+```typescript
+'use client';
+
+interface InteractiveSitecoreComponentProps {
+  fields: {
+    title: Field;
+    content: Field;
+  };
+}
+
+export default function InteractiveSitecoreComponent({
+  fields,
+}: InteractiveSitecoreComponentProps) {
+  // Client-side interactivity here
+  return (
+    <div>
+      <Text field={fields?.title} tag="h2" />
+      <RichText field={fields?.content} />
+    </div>
+  );
+}
+```
+
+## 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`
+
+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
+
+## Routing and Data
+
+Dynamic Routes:
+
+- Use [...path] for Sitecore catch-all routes
+- Handle route parameters appropriately
+- Implement proper 404 handling
+- Support preview mode when needed
+
+Layout and Loading:
+
+- Create layout.tsx for shared page structure
+- Implement loading.tsx for better UX
+- Use error.tsx for error boundaries
+- Handle metadata and SEO properly
+
+## Internationalization
+
+Multi-language Support:
+
+- Configure next-intl for language routing
+- Handle Sitecore language contexts
+- Implement language switching
+- Use proper locale-based data fetching
+
+```typescript
+// Language-aware data fetching
+import { getTranslations } from 'next-intl/server';
+
+export default async function LocalizedPage() {
+  const t = await getTranslations('common');
+  // Fetch Sitecore content for current locale
+}
+```
+
+## 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,
+});
+```
+
+## Performance Optimization
+
+Server-Side Rendering:
+
+- Leverage SSR for Sitecore content
+- Use streaming for improved perceived performance
+- Implement proper caching headers
+- Optimize bundle size with Server Components
+
+Caching Strategies:
+
+- Cache Sitecore API responses appropriately
+- Use Next.js caching features
+- Handle content updates and cache invalidation
+- Consider CDN caching for static content
+
+Referenced:
+@src/app/
+@src/components/
+@src/i18n/
+@sitecore.config.ts

package/dist/templates/nextjs-app-router/.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-app-router/.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=

package/dist/templates/nextjs-app-router/.gitattributes

@@ -1,11 +1,11 @@
-# Line endings for this repository
-# See: https://help.github.com/en/articles/configuring-git-to-handle-line-endings
-# This should line up with the expectations from .eslintrc
-
-# Set the default behavior, in case people don't have core.autocrlf set.
-* text=crlf
-
-# Declare files that will always have CRLF line endings on checkout.
-*.ts text eol=crlf
-*.tsx text eol=crlf
-*.js text eol=crlf
+# Line endings for this repository
+# See: https://help.github.com/en/articles/configuring-git-to-handle-line-endings
+# This should line up with the expectations from .eslintrc
+
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=crlf
+
+# Declare files that will always have CRLF line endings on checkout.
+*.ts text eol=crlf
+*.tsx text eol=crlf
+*.js text eol=crlf