create-content-sdk-app 2.0.2 → 2.1.0-canary.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.MD +202 -202
- package/dist/templates/nextjs/.agents/skills/content-sdk-component-data-strategy/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-component-registration/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-component-scaffold/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-component-variants/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-dictionary-and-i18n/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-editing-safe-rendering/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-field-usage-image-link-text/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-graphql-data-fetching/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-multisite-management/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-route-configuration/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-site-setup-and-env/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-sitemap-robots/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-troubleshoot-editing/SKILL.md +1 -1
- package/dist/templates/nextjs/.agents/skills/content-sdk-upgrade-assistant/SKILL.md +1 -1
- package/dist/templates/nextjs/.cursor/rules/general.mdc +81 -81
- package/dist/templates/nextjs/.cursor/rules/javascript.mdc +112 -112
- package/dist/templates/nextjs/.cursor/rules/project-setup.mdc +100 -100
- package/dist/templates/nextjs/.cursor/rules/sitecore.mdc +150 -150
- package/dist/templates/nextjs/.env.container.example +27 -27
- package/dist/templates/nextjs/.env.remote.example +51 -51
- package/dist/templates/nextjs/.gitattributes +11 -11
- package/dist/templates/nextjs/.prettierrc +8 -8
- package/dist/templates/nextjs/.vscode/extensions.json +8 -8
- package/dist/templates/nextjs/.vscode/launch.json +15 -15
- package/dist/templates/nextjs/.windsurfrules +186 -186
- package/dist/templates/nextjs/AGENTS.md +1 -1
- package/dist/templates/nextjs/LICENSE.txt +202 -202
- package/dist/templates/nextjs/README.md +1 -5
- package/dist/templates/nextjs/Skills.md +2 -2
- package/dist/templates/nextjs/eslint.config.mjs +81 -81
- package/dist/templates/nextjs/gitignore +28 -28
- package/dist/templates/nextjs/package.json +68 -68
- package/dist/templates/nextjs/sitecore.config.ts.example +40 -40
- package/dist/templates/nextjs/src/proxy.ts +11 -3
- package/dist/templates/nextjs/tsconfig.json +40 -40
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-component-data-strategy/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-component-registration/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-component-scaffold/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-component-variants/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-dictionary-and-i18n/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-editing-safe-rendering/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-field-usage-image-link-text/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-graphql-data-fetching/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-multisite-management/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-route-configuration/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-site-setup-and-env/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-sitemap-robots/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-troubleshoot-editing/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-upgrade-assistant/SKILL.md +1 -1
- package/dist/templates/nextjs-app-router/.cursor/rules/app-router-setup.mdc +116 -116
- package/dist/templates/nextjs-app-router/.cursor/rules/general.mdc +80 -80
- package/dist/templates/nextjs-app-router/.cursor/rules/javascript.mdc +112 -112
- package/dist/templates/nextjs-app-router/.cursor/rules/sitecore.mdc +174 -174
- package/dist/templates/nextjs-app-router/.env.container.example +27 -27
- package/dist/templates/nextjs-app-router/.env.remote.example +51 -51
- package/dist/templates/nextjs-app-router/.gitattributes +11 -11
- package/dist/templates/nextjs-app-router/.windsurfrules +290 -290
- package/dist/templates/nextjs-app-router/AGENTS.md +1 -1
- package/dist/templates/nextjs-app-router/README.md +1 -5
- package/dist/templates/nextjs-app-router/Skills.md +2 -2
- package/dist/templates/nextjs-app-router/eslint.config.mjs +21 -29
- package/dist/templates/nextjs-app-router/gitignore +31 -31
- package/dist/templates/nextjs-app-router/package.json +54 -55
- package/dist/templates/nextjs-app-router/postcss.config.mjs +5 -5
- package/dist/templates/nextjs-app-router/sitecore.config.ts.example +40 -40
- package/dist/templates/nextjs-app-router/src/app/globals.css +1 -1
- package/dist/templates/nextjs-app-router/src/proxy.ts +11 -3
- package/dist/templates/nextjs-app-router/tsconfig.json +48 -48
- package/package.json +2 -2
|
@@ -1,81 +1,81 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Core coding principles for your Sitecore project
|
|
3
|
-
alwaysApply: true
|
|
4
|
-
globs: []
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# General Coding Principles
|
|
8
|
-
|
|
9
|
-
## Universal Standards
|
|
10
|
-
|
|
11
|
-
DRY Principle:
|
|
12
|
-
|
|
13
|
-
- Don't Repeat Yourself - extract common functionality
|
|
14
|
-
- Create reusable utilities and helper functions
|
|
15
|
-
- Use composition over inheritance
|
|
16
|
-
- Share types and interfaces across modules
|
|
17
|
-
|
|
18
|
-
SOLID Principles:
|
|
19
|
-
|
|
20
|
-
- Single Responsibility: each function/class has one purpose
|
|
21
|
-
- Open/Closed: extend functionality through composition
|
|
22
|
-
- Dependency Inversion: depend on abstractions, not implementations
|
|
23
|
-
|
|
24
|
-
Code Clarity:
|
|
25
|
-
|
|
26
|
-
- Write self-documenting code with clear intent
|
|
27
|
-
- Use meaningful names that express business concepts
|
|
28
|
-
- Prefer explicit over implicit behavior
|
|
29
|
-
- Make dependencies and requirements obvious
|
|
30
|
-
|
|
31
|
-
## Architecture Patterns
|
|
32
|
-
|
|
33
|
-
Modular Design:
|
|
34
|
-
|
|
35
|
-
- Organize code into focused, cohesive modules
|
|
36
|
-
- Minimize coupling between modules
|
|
37
|
-
- Use clear interfaces between layers
|
|
38
|
-
- Follow established patterns consistently
|
|
39
|
-
|
|
40
|
-
Data Flow:
|
|
41
|
-
|
|
42
|
-
- Prefer unidirectional data flow
|
|
43
|
-
- Validate inputs at system boundaries
|
|
44
|
-
- Transform data at appropriate layers
|
|
45
|
-
- Handle errors close to their source
|
|
46
|
-
|
|
47
|
-
Testing:
|
|
48
|
-
|
|
49
|
-
- Write testable code with minimal dependencies
|
|
50
|
-
- Use dependency injection for better testability
|
|
51
|
-
- Mock external services and side effects
|
|
52
|
-
- Test behavior, not implementation details
|
|
53
|
-
|
|
54
|
-
## Development Standards
|
|
55
|
-
|
|
56
|
-
Version Control:
|
|
57
|
-
|
|
58
|
-
- Write descriptive commit messages
|
|
59
|
-
- Keep commits focused and atomic
|
|
60
|
-
- Use branching strategies appropriate to team size
|
|
61
|
-
- Review code before merging
|
|
62
|
-
|
|
63
|
-
Documentation:
|
|
64
|
-
|
|
65
|
-
- Document public APIs and interfaces
|
|
66
|
-
- Include usage examples for complex functionality
|
|
67
|
-
- Keep documentation close to code
|
|
68
|
-
- Update documentation with code changes
|
|
69
|
-
|
|
70
|
-
Performance:
|
|
71
|
-
|
|
72
|
-
- Optimize for readability first, performance second
|
|
73
|
-
- Profile before optimizing
|
|
74
|
-
- Cache expensive operations appropriately
|
|
75
|
-
- Consider memory usage and cleanup
|
|
76
|
-
|
|
77
|
-
Referenced:
|
|
78
|
-
@src/components/
|
|
79
|
-
@src/lib/
|
|
80
|
-
@package.json
|
|
81
|
-
|
|
1
|
+
---
|
|
2
|
+
description: Core coding principles for your Sitecore project
|
|
3
|
+
alwaysApply: true
|
|
4
|
+
globs: []
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# General Coding Principles
|
|
8
|
+
|
|
9
|
+
## Universal Standards
|
|
10
|
+
|
|
11
|
+
DRY Principle:
|
|
12
|
+
|
|
13
|
+
- Don't Repeat Yourself - extract common functionality
|
|
14
|
+
- Create reusable utilities and helper functions
|
|
15
|
+
- Use composition over inheritance
|
|
16
|
+
- Share types and interfaces across modules
|
|
17
|
+
|
|
18
|
+
SOLID Principles:
|
|
19
|
+
|
|
20
|
+
- Single Responsibility: each function/class has one purpose
|
|
21
|
+
- Open/Closed: extend functionality through composition
|
|
22
|
+
- Dependency Inversion: depend on abstractions, not implementations
|
|
23
|
+
|
|
24
|
+
Code Clarity:
|
|
25
|
+
|
|
26
|
+
- Write self-documenting code with clear intent
|
|
27
|
+
- Use meaningful names that express business concepts
|
|
28
|
+
- Prefer explicit over implicit behavior
|
|
29
|
+
- Make dependencies and requirements obvious
|
|
30
|
+
|
|
31
|
+
## Architecture Patterns
|
|
32
|
+
|
|
33
|
+
Modular Design:
|
|
34
|
+
|
|
35
|
+
- Organize code into focused, cohesive modules
|
|
36
|
+
- Minimize coupling between modules
|
|
37
|
+
- Use clear interfaces between layers
|
|
38
|
+
- Follow established patterns consistently
|
|
39
|
+
|
|
40
|
+
Data Flow:
|
|
41
|
+
|
|
42
|
+
- Prefer unidirectional data flow
|
|
43
|
+
- Validate inputs at system boundaries
|
|
44
|
+
- Transform data at appropriate layers
|
|
45
|
+
- Handle errors close to their source
|
|
46
|
+
|
|
47
|
+
Testing:
|
|
48
|
+
|
|
49
|
+
- Write testable code with minimal dependencies
|
|
50
|
+
- Use dependency injection for better testability
|
|
51
|
+
- Mock external services and side effects
|
|
52
|
+
- Test behavior, not implementation details
|
|
53
|
+
|
|
54
|
+
## Development Standards
|
|
55
|
+
|
|
56
|
+
Version Control:
|
|
57
|
+
|
|
58
|
+
- Write descriptive commit messages
|
|
59
|
+
- Keep commits focused and atomic
|
|
60
|
+
- Use branching strategies appropriate to team size
|
|
61
|
+
- Review code before merging
|
|
62
|
+
|
|
63
|
+
Documentation:
|
|
64
|
+
|
|
65
|
+
- Document public APIs and interfaces
|
|
66
|
+
- Include usage examples for complex functionality
|
|
67
|
+
- Keep documentation close to code
|
|
68
|
+
- Update documentation with code changes
|
|
69
|
+
|
|
70
|
+
Performance:
|
|
71
|
+
|
|
72
|
+
- Optimize for readability first, performance second
|
|
73
|
+
- Profile before optimizing
|
|
74
|
+
- Cache expensive operations appropriately
|
|
75
|
+
- Consider memory usage and cleanup
|
|
76
|
+
|
|
77
|
+
Referenced:
|
|
78
|
+
@src/components/
|
|
79
|
+
@src/lib/
|
|
80
|
+
@package.json
|
|
81
|
+
|
|
@@ -1,112 +1,112 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: JavaScript/TypeScript rules for your Sitecore project
|
|
3
|
-
alwaysApply: false
|
|
4
|
-
globs:
|
|
5
|
-
- '**/*.js'
|
|
6
|
-
- '**/*.ts'
|
|
7
|
-
- '**/*.tsx'
|
|
8
|
-
- '**/*.mjs'
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
# JavaScript/TypeScript Rules
|
|
12
|
-
|
|
13
|
-
## Naming Conventions
|
|
14
|
-
|
|
15
|
-
Variables and Functions:
|
|
16
|
-
|
|
17
|
-
- Use camelCase: `getUserData()`, `isLoading`, `currentUser`
|
|
18
|
-
- Boolean variables: prefix with `is`, `has`, `can`, `should`
|
|
19
|
-
- Event handlers: prefix with `handle` or `on`: `handleClick`, `onSubmit`
|
|
20
|
-
|
|
21
|
-
Components (React):
|
|
22
|
-
|
|
23
|
-
- Use PascalCase: `SitecoreComponent`, `PageLayout`, `ContentBlock`
|
|
24
|
-
- File names match component names: `SitecoreComponent.tsx`
|
|
25
|
-
|
|
26
|
-
Constants:
|
|
27
|
-
|
|
28
|
-
- Use UPPER_SNAKE_CASE: `API_ENDPOINT`, `DEFAULT_TIMEOUT`, `MAX_RETRIES`
|
|
29
|
-
- Export at module level when shared
|
|
30
|
-
|
|
31
|
-
Directories:
|
|
32
|
-
|
|
33
|
-
- Use kebab-case: `src/components`, `src/api-clients`, `src/sitecore-utils`
|
|
34
|
-
- Organize by feature when appropriate: `src/content-management/`
|
|
35
|
-
|
|
36
|
-
Types and Interfaces:
|
|
37
|
-
|
|
38
|
-
- Use PascalCase with descriptive names: `ContentItem`, `LayoutProps`, `SitecoreConfig`
|
|
39
|
-
- Prefix interfaces with `I` only when needed for disambiguation
|
|
40
|
-
|
|
41
|
-
## Code Layout and Organization
|
|
42
|
-
|
|
43
|
-
Directory Structure:
|
|
44
|
-
|
|
45
|
-
```
|
|
46
|
-
src/
|
|
47
|
-
components/ # UI components (React)
|
|
48
|
-
lib/ # Configuration and utilities
|
|
49
|
-
pages/ # Next.js pages (or app/ for App Router)
|
|
50
|
-
assets/ # Static assets and styles
|
|
51
|
-
types/ # TypeScript type definitions
|
|
52
|
-
hooks/ # Custom React hooks
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
File Organization:
|
|
56
|
-
|
|
57
|
-
- Group related functionality in feature directories
|
|
58
|
-
- Keep components co-located with their styles and tests
|
|
59
|
-
- Export public APIs through index.ts files
|
|
60
|
-
|
|
61
|
-
## Error Handling
|
|
62
|
-
|
|
63
|
-
API Calls:
|
|
64
|
-
|
|
65
|
-
- Always wrap in try/catch blocks
|
|
66
|
-
- Throw custom errors with context: `SitecoreFetchError`, `ConfigurationError`
|
|
67
|
-
- Handle edge cases with guard clauses
|
|
68
|
-
|
|
69
|
-
```typescript
|
|
70
|
-
async function fetchContent(id: string): Promise<ContentItem> {
|
|
71
|
-
if (!id) {
|
|
72
|
-
throw new Error('Content ID is required');
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
try {
|
|
76
|
-
const response = await sitecoreClient.getItem(id);
|
|
77
|
-
return response.data;
|
|
78
|
-
} catch (error) {
|
|
79
|
-
throw new SitecoreFetchError(`Failed to fetch content ${id}`, error);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
## Security
|
|
85
|
-
|
|
86
|
-
Input Validation:
|
|
87
|
-
|
|
88
|
-
- Sanitize user inputs before processing
|
|
89
|
-
- Validate data at application boundaries
|
|
90
|
-
- Use type guards for runtime type checking
|
|
91
|
-
- Escape content when rendering to prevent XSS
|
|
92
|
-
|
|
93
|
-
## Performance
|
|
94
|
-
|
|
95
|
-
Optimization Patterns:
|
|
96
|
-
|
|
97
|
-
- Cache API responses using React Query or SWR
|
|
98
|
-
- Memoize components with React.memo when appropriate
|
|
99
|
-
- Lazy-load non-critical modules: `const Component = lazy(() => import('./Component'))`
|
|
100
|
-
- Use useCallback and useMemo for expensive operations
|
|
101
|
-
|
|
102
|
-
TypeScript:
|
|
103
|
-
|
|
104
|
-
- Enable strict mode in tsconfig.json
|
|
105
|
-
- Prefer type assertions over any: `value as ContentItem`
|
|
106
|
-
- Use discriminated unions for complex state management
|
|
107
|
-
|
|
108
|
-
Referenced:
|
|
109
|
-
@src/components/
|
|
110
|
-
@src/lib/
|
|
111
|
-
@src/types/
|
|
112
|
-
|
|
1
|
+
---
|
|
2
|
+
description: JavaScript/TypeScript rules for your Sitecore project
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
globs:
|
|
5
|
+
- '**/*.js'
|
|
6
|
+
- '**/*.ts'
|
|
7
|
+
- '**/*.tsx'
|
|
8
|
+
- '**/*.mjs'
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# JavaScript/TypeScript Rules
|
|
12
|
+
|
|
13
|
+
## Naming Conventions
|
|
14
|
+
|
|
15
|
+
Variables and Functions:
|
|
16
|
+
|
|
17
|
+
- Use camelCase: `getUserData()`, `isLoading`, `currentUser`
|
|
18
|
+
- Boolean variables: prefix with `is`, `has`, `can`, `should`
|
|
19
|
+
- Event handlers: prefix with `handle` or `on`: `handleClick`, `onSubmit`
|
|
20
|
+
|
|
21
|
+
Components (React):
|
|
22
|
+
|
|
23
|
+
- Use PascalCase: `SitecoreComponent`, `PageLayout`, `ContentBlock`
|
|
24
|
+
- File names match component names: `SitecoreComponent.tsx`
|
|
25
|
+
|
|
26
|
+
Constants:
|
|
27
|
+
|
|
28
|
+
- Use UPPER_SNAKE_CASE: `API_ENDPOINT`, `DEFAULT_TIMEOUT`, `MAX_RETRIES`
|
|
29
|
+
- Export at module level when shared
|
|
30
|
+
|
|
31
|
+
Directories:
|
|
32
|
+
|
|
33
|
+
- Use kebab-case: `src/components`, `src/api-clients`, `src/sitecore-utils`
|
|
34
|
+
- Organize by feature when appropriate: `src/content-management/`
|
|
35
|
+
|
|
36
|
+
Types and Interfaces:
|
|
37
|
+
|
|
38
|
+
- Use PascalCase with descriptive names: `ContentItem`, `LayoutProps`, `SitecoreConfig`
|
|
39
|
+
- Prefix interfaces with `I` only when needed for disambiguation
|
|
40
|
+
|
|
41
|
+
## Code Layout and Organization
|
|
42
|
+
|
|
43
|
+
Directory Structure:
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
src/
|
|
47
|
+
components/ # UI components (React)
|
|
48
|
+
lib/ # Configuration and utilities
|
|
49
|
+
pages/ # Next.js pages (or app/ for App Router)
|
|
50
|
+
assets/ # Static assets and styles
|
|
51
|
+
types/ # TypeScript type definitions
|
|
52
|
+
hooks/ # Custom React hooks
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
File Organization:
|
|
56
|
+
|
|
57
|
+
- Group related functionality in feature directories
|
|
58
|
+
- Keep components co-located with their styles and tests
|
|
59
|
+
- Export public APIs through index.ts files
|
|
60
|
+
|
|
61
|
+
## Error Handling
|
|
62
|
+
|
|
63
|
+
API Calls:
|
|
64
|
+
|
|
65
|
+
- Always wrap in try/catch blocks
|
|
66
|
+
- Throw custom errors with context: `SitecoreFetchError`, `ConfigurationError`
|
|
67
|
+
- Handle edge cases with guard clauses
|
|
68
|
+
|
|
69
|
+
```typescript
|
|
70
|
+
async function fetchContent(id: string): Promise<ContentItem> {
|
|
71
|
+
if (!id) {
|
|
72
|
+
throw new Error('Content ID is required');
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
try {
|
|
76
|
+
const response = await sitecoreClient.getItem(id);
|
|
77
|
+
return response.data;
|
|
78
|
+
} catch (error) {
|
|
79
|
+
throw new SitecoreFetchError(`Failed to fetch content ${id}`, error);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Security
|
|
85
|
+
|
|
86
|
+
Input Validation:
|
|
87
|
+
|
|
88
|
+
- Sanitize user inputs before processing
|
|
89
|
+
- Validate data at application boundaries
|
|
90
|
+
- Use type guards for runtime type checking
|
|
91
|
+
- Escape content when rendering to prevent XSS
|
|
92
|
+
|
|
93
|
+
## Performance
|
|
94
|
+
|
|
95
|
+
Optimization Patterns:
|
|
96
|
+
|
|
97
|
+
- Cache API responses using React Query or SWR
|
|
98
|
+
- Memoize components with React.memo when appropriate
|
|
99
|
+
- Lazy-load non-critical modules: `const Component = lazy(() => import('./Component'))`
|
|
100
|
+
- Use useCallback and useMemo for expensive operations
|
|
101
|
+
|
|
102
|
+
TypeScript:
|
|
103
|
+
|
|
104
|
+
- Enable strict mode in tsconfig.json
|
|
105
|
+
- Prefer type assertions over any: `value as ContentItem`
|
|
106
|
+
- Use discriminated unions for complex state management
|
|
107
|
+
|
|
108
|
+
Referenced:
|
|
109
|
+
@src/components/
|
|
110
|
+
@src/lib/
|
|
111
|
+
@src/types/
|
|
112
|
+
|
|
@@ -1,100 +1,100 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Getting started with your Sitecore Content SDK Next.js project
|
|
3
|
-
alwaysApply: true
|
|
4
|
-
globs: []
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Sitecore Content SDK Next.js Project
|
|
8
|
-
|
|
9
|
-
## Project Overview
|
|
10
|
-
|
|
11
|
-
This is a Sitecore Content SDK application built with Next.js. The project structure follows Sitecore best practices for XM Cloud development.
|
|
12
|
-
|
|
13
|
-
Key Technologies:
|
|
14
|
-
|
|
15
|
-
- Next.js (React framework)
|
|
16
|
-
- Sitecore Content SDK
|
|
17
|
-
- TypeScript
|
|
18
|
-
- Sitecore XM Cloud
|
|
19
|
-
|
|
20
|
-
## Getting Started
|
|
21
|
-
|
|
22
|
-
Development Workflow:
|
|
23
|
-
|
|
24
|
-
1. Install dependencies: `npm install`
|
|
25
|
-
2. Configure environment variables (copy `.env.example` to `.env.local`)
|
|
26
|
-
3. Start development server: `npm run dev`
|
|
27
|
-
4. Build for production: `npm run build`
|
|
28
|
-
|
|
29
|
-
Environment Configuration:
|
|
30
|
-
|
|
31
|
-
- Copy `.env.example` to `.env.local`
|
|
32
|
-
- Add your Sitecore API endpoint and key
|
|
33
|
-
- Configure site name and other settings
|
|
34
|
-
|
|
35
|
-
## Sitecore Integration
|
|
36
|
-
|
|
37
|
-
Configuration:
|
|
38
|
-
|
|
39
|
-
- Configure Sitecore connection in `sitecore.config.ts`
|
|
40
|
-
- Register components in the component map
|
|
41
|
-
- Use Sitecore field components for content rendering
|
|
42
|
-
- Follow Sitecore's layout service patterns
|
|
43
|
-
|
|
44
|
-
Component Development:
|
|
45
|
-
|
|
46
|
-
- Create components in `src/components/`
|
|
47
|
-
- Export from component files for registration
|
|
48
|
-
- Use TypeScript interfaces for component props
|
|
49
|
-
- Follow Sitecore field handling patterns
|
|
50
|
-
|
|
51
|
-
## Project Structure
|
|
52
|
-
|
|
53
|
-
```
|
|
54
|
-
src/
|
|
55
|
-
components/ # React-specific SDK
|
|
56
|
-
lib/ # Configuration and utilities
|
|
57
|
-
pages/ # Next.js pages
|
|
58
|
-
assets/ # Static assets and styles
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
## Best Practices
|
|
62
|
-
|
|
63
|
-
Sitecore Components:
|
|
64
|
-
|
|
65
|
-
- Use descriptive component names
|
|
66
|
-
- Handle field validation gracefully
|
|
67
|
-
- Implement proper error boundaries
|
|
68
|
-
- Cache content when appropriate
|
|
69
|
-
|
|
70
|
-
Performance:
|
|
71
|
-
|
|
72
|
-
- Optimize images using Next.js Image component
|
|
73
|
-
- Implement proper loading states
|
|
74
|
-
- Use React.memo for expensive components
|
|
75
|
-
- Consider server-side rendering implications
|
|
76
|
-
|
|
77
|
-
## Development Commands
|
|
78
|
-
|
|
79
|
-
```bash
|
|
80
|
-
npm run dev # Start development server
|
|
81
|
-
npm run build # Build for production
|
|
82
|
-
npm run start # Start production server
|
|
83
|
-
npm run lint # Run ESLint
|
|
84
|
-
npm run type-check # Run TypeScript compiler
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
## Next Steps
|
|
88
|
-
|
|
89
|
-
1. Configure your Sitecore connection
|
|
90
|
-
2. Create your first component
|
|
91
|
-
3. Add content types and templates
|
|
92
|
-
4. Set up your development workflow
|
|
93
|
-
5. Deploy to your hosting platform
|
|
94
|
-
|
|
95
|
-
Referenced:
|
|
96
|
-
@src/components/
|
|
97
|
-
@sitecore.config.ts
|
|
98
|
-
@package.json
|
|
99
|
-
@.env.example
|
|
100
|
-
|
|
1
|
+
---
|
|
2
|
+
description: Getting started with your Sitecore Content SDK Next.js project
|
|
3
|
+
alwaysApply: true
|
|
4
|
+
globs: []
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Sitecore Content SDK Next.js Project
|
|
8
|
+
|
|
9
|
+
## Project Overview
|
|
10
|
+
|
|
11
|
+
This is a Sitecore Content SDK application built with Next.js. The project structure follows Sitecore best practices for XM Cloud development.
|
|
12
|
+
|
|
13
|
+
Key Technologies:
|
|
14
|
+
|
|
15
|
+
- Next.js (React framework)
|
|
16
|
+
- Sitecore Content SDK
|
|
17
|
+
- TypeScript
|
|
18
|
+
- Sitecore XM Cloud
|
|
19
|
+
|
|
20
|
+
## Getting Started
|
|
21
|
+
|
|
22
|
+
Development Workflow:
|
|
23
|
+
|
|
24
|
+
1. Install dependencies: `npm install`
|
|
25
|
+
2. Configure environment variables (copy `.env.example` to `.env.local`)
|
|
26
|
+
3. Start development server: `npm run dev`
|
|
27
|
+
4. Build for production: `npm run build`
|
|
28
|
+
|
|
29
|
+
Environment Configuration:
|
|
30
|
+
|
|
31
|
+
- Copy `.env.example` to `.env.local`
|
|
32
|
+
- Add your Sitecore API endpoint and key
|
|
33
|
+
- Configure site name and other settings
|
|
34
|
+
|
|
35
|
+
## Sitecore Integration
|
|
36
|
+
|
|
37
|
+
Configuration:
|
|
38
|
+
|
|
39
|
+
- Configure Sitecore connection in `sitecore.config.ts`
|
|
40
|
+
- Register components in the component map
|
|
41
|
+
- Use Sitecore field components for content rendering
|
|
42
|
+
- Follow Sitecore's layout service patterns
|
|
43
|
+
|
|
44
|
+
Component Development:
|
|
45
|
+
|
|
46
|
+
- Create components in `src/components/`
|
|
47
|
+
- Export from component files for registration
|
|
48
|
+
- Use TypeScript interfaces for component props
|
|
49
|
+
- Follow Sitecore field handling patterns
|
|
50
|
+
|
|
51
|
+
## Project Structure
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
src/
|
|
55
|
+
components/ # React-specific SDK
|
|
56
|
+
lib/ # Configuration and utilities
|
|
57
|
+
pages/ # Next.js pages
|
|
58
|
+
assets/ # Static assets and styles
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Best Practices
|
|
62
|
+
|
|
63
|
+
Sitecore Components:
|
|
64
|
+
|
|
65
|
+
- Use descriptive component names
|
|
66
|
+
- Handle field validation gracefully
|
|
67
|
+
- Implement proper error boundaries
|
|
68
|
+
- Cache content when appropriate
|
|
69
|
+
|
|
70
|
+
Performance:
|
|
71
|
+
|
|
72
|
+
- Optimize images using Next.js Image component
|
|
73
|
+
- Implement proper loading states
|
|
74
|
+
- Use React.memo for expensive components
|
|
75
|
+
- Consider server-side rendering implications
|
|
76
|
+
|
|
77
|
+
## Development Commands
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm run dev # Start development server
|
|
81
|
+
npm run build # Build for production
|
|
82
|
+
npm run start # Start production server
|
|
83
|
+
npm run lint # Run ESLint
|
|
84
|
+
npm run type-check # Run TypeScript compiler
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Next Steps
|
|
88
|
+
|
|
89
|
+
1. Configure your Sitecore connection
|
|
90
|
+
2. Create your first component
|
|
91
|
+
3. Add content types and templates
|
|
92
|
+
4. Set up your development workflow
|
|
93
|
+
5. Deploy to your hosting platform
|
|
94
|
+
|
|
95
|
+
Referenced:
|
|
96
|
+
@src/components/
|
|
97
|
+
@sitecore.config.ts
|
|
98
|
+
@package.json
|
|
99
|
+
@.env.example
|
|
100
|
+
|