create-content-sdk-app 2.0.0 → 2.0.1

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.
Files changed (84) hide show
  1. package/dist/templates/nextjs/.agents/skills/content-sdk-component-data-strategy/SKILL.md +37 -0
  2. package/dist/templates/nextjs/.agents/skills/content-sdk-component-registration/SKILL.md +36 -0
  3. package/dist/templates/nextjs/.agents/skills/content-sdk-component-scaffold/SKILL.md +34 -0
  4. package/dist/templates/nextjs/.agents/skills/content-sdk-component-variants/SKILL.md +36 -0
  5. package/dist/templates/nextjs/.agents/skills/content-sdk-dictionary-and-i18n/SKILL.md +35 -0
  6. package/dist/templates/nextjs/.agents/skills/content-sdk-editing-safe-rendering/SKILL.md +37 -0
  7. package/dist/templates/nextjs/.agents/skills/content-sdk-field-usage-image-link-text/SKILL.md +36 -0
  8. package/dist/templates/nextjs/.agents/skills/content-sdk-graphql-data-fetching/SKILL.md +38 -0
  9. package/dist/templates/nextjs/.agents/skills/content-sdk-multisite-management/SKILL.md +37 -0
  10. package/dist/templates/nextjs/.agents/skills/content-sdk-route-configuration/SKILL.md +38 -0
  11. package/dist/templates/nextjs/.agents/skills/content-sdk-site-setup-and-env/SKILL.md +36 -0
  12. package/dist/templates/nextjs/.agents/skills/content-sdk-sitemap-robots/SKILL.md +37 -0
  13. package/dist/templates/nextjs/.agents/skills/content-sdk-troubleshoot-editing/SKILL.md +39 -0
  14. package/dist/templates/nextjs/.agents/skills/content-sdk-upgrade-assistant/SKILL.md +36 -0
  15. package/dist/templates/nextjs/AGENTS.md +1 -0
  16. package/dist/templates/nextjs/CLAUDE.md +6 -170
  17. package/dist/templates/nextjs/Skills.md +79 -0
  18. package/dist/templates/nextjs/package.json +2 -2
  19. package/dist/templates/nextjs/src/Bootstrap.tsx +20 -13
  20. package/dist/templates/nextjs/src/byoc/index.tsx +1 -1
  21. package/dist/templates/nextjs/src/components/content-sdk/CdpPageView.tsx +1 -1
  22. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-component-data-strategy/SKILL.md +37 -0
  23. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-component-registration/SKILL.md +38 -0
  24. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-component-scaffold/SKILL.md +38 -0
  25. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-component-variants/SKILL.md +36 -0
  26. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-dictionary-and-i18n/SKILL.md +37 -0
  27. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-editing-safe-rendering/SKILL.md +37 -0
  28. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-field-usage-image-link-text/SKILL.md +36 -0
  29. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-graphql-data-fetching/SKILL.md +37 -0
  30. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-multisite-management/SKILL.md +37 -0
  31. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-route-configuration/SKILL.md +38 -0
  32. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-site-setup-and-env/SKILL.md +36 -0
  33. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-sitemap-robots/SKILL.md +37 -0
  34. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-troubleshoot-editing/SKILL.md +39 -0
  35. package/dist/templates/nextjs-app-router/.agents/skills/content-sdk-upgrade-assistant/SKILL.md +36 -0
  36. package/dist/templates/nextjs-app-router/.sitecore/import-map.server.ts +2 -2
  37. package/dist/templates/nextjs-app-router/AGENTS.md +6 -6
  38. package/dist/templates/nextjs-app-router/CLAUDE.md +6 -271
  39. package/dist/templates/nextjs-app-router/README.md +0 -36
  40. package/dist/templates/nextjs-app-router/Skills.md +79 -0
  41. package/dist/templates/nextjs-app-router/package.json +3 -2
  42. package/dist/templates/nextjs-app-router/src/Bootstrap.tsx +20 -12
  43. package/dist/templates/nextjs-app-router/src/app/[site]/[locale]/[[...path]]/layout.tsx +19 -0
  44. package/dist/templates/nextjs-app-router/src/app/[site]/[locale]/[[...path]]/not-found.tsx +3 -28
  45. package/dist/templates/nextjs-app-router/src/app/[site]/[locale]/[[...path]]/page.tsx +6 -21
  46. package/dist/templates/nextjs-app-router/src/app/[site]/layout.tsx +5 -21
  47. package/dist/templates/nextjs-app-router/src/app/not-found.tsx +1 -23
  48. package/dist/templates/nextjs-app-router/src/byoc/index.tsx +1 -1
  49. package/dist/templates/nextjs-app-router/src/components/content-sdk/CdpPageView.tsx +1 -1
  50. package/package.json +2 -2
  51. package/dist/initializers/angular/args.js +0 -2
  52. package/dist/initializers/angular/index.js +0 -30
  53. package/dist/initializers/angular/prompts.js +0 -20
  54. package/dist/templates/angular/.postcssrc.json +0 -5
  55. package/dist/templates/angular/.vscode/extensions.json +0 -4
  56. package/dist/templates/angular/README.md +0 -3
  57. package/dist/templates/angular/angular.json +0 -79
  58. package/dist/templates/angular/package.json +0 -58
  59. package/dist/templates/angular/public/favicon.ico +0 -0
  60. package/dist/templates/angular/src/app/app.config.server.ts +0 -12
  61. package/dist/templates/angular/src/app/app.config.ts +0 -31
  62. package/dist/templates/angular/src/app/app.css +0 -0
  63. package/dist/templates/angular/src/app/app.html +0 -1
  64. package/dist/templates/angular/src/app/app.routes.server.ts +0 -15
  65. package/dist/templates/angular/src/app/app.routes.ts +0 -28
  66. package/dist/templates/angular/src/app/app.ts +0 -12
  67. package/dist/templates/angular/src/app/loaders/error.loader.ts +0 -12
  68. package/dist/templates/angular/src/app/loaders/index.ts +0 -14
  69. package/dist/templates/angular/src/app/loaders/not-found.loader.ts +0 -12
  70. package/dist/templates/angular/src/app/loaders/page.loader.ts +0 -15
  71. package/dist/templates/angular/src/app/loaders/stub-utils.ts +0 -83
  72. package/dist/templates/angular/src/app/pages/error.component.ts +0 -124
  73. package/dist/templates/angular/src/app/pages/not-found.component.ts +0 -85
  74. package/dist/templates/angular/src/app/pages/page.component.ts +0 -58
  75. package/dist/templates/angular/src/app/shared/layout.component.ts +0 -106
  76. package/dist/templates/angular/src/index.html +0 -13
  77. package/dist/templates/angular/src/main.server.ts +0 -8
  78. package/dist/templates/angular/src/main.ts +0 -6
  79. package/dist/templates/angular/src/server.ts +0 -65
  80. package/dist/templates/angular/src/styles.css +0 -3
  81. package/dist/templates/angular/tsconfig.json +0 -38
  82. package/dist/templates/angular/tsconfig.spec.json +0 -10
  83. package/dist/templates/nextjs/LLMs.txt +0 -179
  84. package/dist/templates/nextjs-app-router/LLMs.txt +0 -236
@@ -1,38 +0,0 @@
1
- {
2
- "compileOnSave": false,
3
- "compilerOptions": {
4
- "importHelpers": true,
5
- "outDir": "./dist/out-tsc",
6
- "sourceMap": true,
7
- "declaration": false,
8
- "moduleResolution": "bundler",
9
- "emitDecoratorMetadata": true,
10
- "allowSyntheticDefaultImports": true,
11
- "experimentalDecorators": true,
12
- "resolveJsonModule": true,
13
- "skipLibCheck": true,
14
- "allowJs": true,
15
- "target": "es2022",
16
- "module": "es2022",
17
- "noImplicitAny": true,
18
- "noImplicitReturns": true,
19
- "noImplicitThis": true,
20
- "noUnusedLocals": true,
21
- "noUnusedParameters": true,
22
- "newLine": "LF",
23
- "types": ["node"],
24
- // add additional type root in case of monorepo where dependencies are hoisted to root node_modules
25
- "typeRoots": ["node_modules/@types", "../node_modules/@types"],
26
- "lib": ["es2019", "dom", "esnext.asynciterable"],
27
- "paths": {
28
- "@angular/*": ["./node_modules/@angular/*"],
29
- "rxjs": ["node_modules/rxjs", "./node_modules/rxjs"],
30
- "lib/*": ["src/app/lib/*"],
31
- ".sitecore": ["./.sitecore"]
32
- },
33
- "baseUrl": "./",
34
- "esModuleInterop": true
35
- },
36
- "include": ["src/**/*.ts"],
37
- "exclude": ["src/**/*.spec.ts"]
38
- }
@@ -1,10 +0,0 @@
1
- /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2
- /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3
- {
4
- "extends": "./tsconfig.json",
5
- "compilerOptions": {
6
- "outDir": "./out-tsc/spec",
7
- "types": ["vitest/globals"]
8
- },
9
- "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
10
- }
@@ -1,179 +0,0 @@
1
- # Claude/Windsurf Guidance for Sitecore Content SDK Next.js Project
2
-
3
- ## Project Context
4
- This is a Sitecore Content SDK application built with Next.js, TypeScript, and React. The project integrates with Sitecore XM Cloud for headless content management and follows modern web development best practices.
5
-
6
- ## Architecture Overview
7
- - **Framework**: Next.js with Page Router
8
- - **Language**: TypeScript with strict mode enabled
9
- - **CMS**: Sitecore XM Cloud (headless)
10
- - **SDK**: @sitecore-content-sdk for API integration
11
- - **Styling**: CSS Modules or Tailwind CSS
12
- - **State Management**: React Query/SWR for server state
13
-
14
- ## Development Principles
15
-
16
- ### Code Organization
17
- - Use modular, feature-based architecture
18
- - Separate concerns: components, utilities, types, hooks
19
- - Follow Next.js Page Router conventions
20
- - Implement proper error boundaries and loading states
21
-
22
- ### TypeScript Standards
23
- - Enable strict mode and strict null checks
24
- - Use proper type definitions for Sitecore fields and components
25
- - Prefer type assertions over `any` type
26
- - Implement discriminated unions for complex state management
27
-
28
- ### React Patterns
29
- - Server Components for data fetching and static content
30
- - Client Components only when interactivity is required
31
- - Use React.memo for expensive components
32
- - Implement proper dependency arrays in hooks
33
-
34
- ## Sitecore Integration Patterns
35
-
36
- ### Content Fetching
37
- - Use SitecoreClient for all API calls
38
- - Implement proper error handling with custom error classes
39
- - Cache responses using React Query or SWR
40
- - Handle preview vs. published content scenarios
41
-
42
- ### Component Development
43
- - Always use Sitecore field components (Text, RichText, Image)
44
- - Validate field existence before rendering
45
- - Handle missing or empty fields gracefully
46
- - Export components with proper TypeScript interfaces
47
-
48
- ### Field Handling
49
- ```typescript
50
- interface ComponentProps {
51
- fields: {
52
- title: Field;
53
- content: Field;
54
- image: Field;
55
- };
56
- }
57
-
58
- // Always validate fields
59
- <Text field={fields?.title} tag="h1" />
60
- <RichText field={fields?.content} />
61
- <Image field={fields?.image} />
62
- ```
63
-
64
- ## Performance Best Practices
65
-
66
- ### Optimization Strategies
67
- - Use Next.js Image component for optimized images
68
- - Implement proper loading states and error boundaries
69
- - Cache expensive operations and API responses
70
- - Lazy-load non-critical components and modules
71
- - Leverage server-side rendering for better performance
72
-
73
- ### Memory Management
74
- - Clean up subscriptions and event listeners
75
- - Use useCallback and useMemo appropriately
76
- - Avoid memory leaks in useEffect hooks
77
- - Implement proper cleanup in custom hooks
78
-
79
- ## Security Guidelines
80
-
81
- ### Input Validation
82
- - Sanitize all user inputs before processing
83
- - Validate data at application boundaries
84
- - Use type guards for runtime type checking
85
- - Escape content when rendering to prevent XSS
86
-
87
- ### API Security
88
- - Use HTTPS for all Sitecore connections
89
- - Never expose API keys in client-side code
90
- - Implement proper authentication and authorization
91
- - Validate all data received from external sources
92
-
93
- ## Code Quality Standards
94
-
95
- ### Naming Conventions
96
- - Variables/Functions: camelCase (getUserData, isLoading)
97
- - Components: PascalCase (SitecoreComponent, PageLayout)
98
- - Constants: UPPER_SNAKE_CASE (API_ENDPOINT, MAX_RETRIES)
99
- - Types/Interfaces: PascalCase (ContentItem, LayoutProps)
100
-
101
- ### Error Handling
102
- - Create custom error classes for different error types
103
- - Implement proper error boundaries in React components
104
- - Log errors appropriately for debugging
105
- - Provide fallback content when components fail
106
-
107
- ### Testing Approach
108
- - Write testable code with minimal dependencies
109
- - Mock external services and Sitecore APIs
110
- - Test component behavior, not implementation details
111
- - Include tests for error scenarios and edge cases
112
-
113
- ## Development Workflow
114
-
115
- ### Environment Setup
116
- 1. Install dependencies: `npm install`
117
- 2. Configure environment variables (copy .env.example to .env.local)
118
- 3. Set up Sitecore API credentials
119
- 4. Start development server: `npm run dev`
120
-
121
- ### Build Process
122
- - Use `npm run build` for production builds
123
- - Enable TypeScript strict mode
124
- - Run linting and type checking before commits
125
-
126
- ## Common Patterns and Examples
127
-
128
- ### Sitecore Component Structure
129
- ```typescript
130
- interface HeroProps {
131
- fields: {
132
- title: Field;
133
- subtitle: Field;
134
- backgroundImage: Field;
135
- };
136
- }
137
-
138
- export default function Hero({ fields }: HeroProps) {
139
- return (
140
- <section className="hero">
141
- <Text field={fields?.title} tag="h1" />
142
- <Text field={fields?.subtitle} tag="p" />
143
- <Image field={fields?.backgroundImage} />
144
- </section>
145
- );
146
- }
147
- ```
148
-
149
- ### API Integration
150
- ```typescript
151
- import { SitecoreClient } from '@sitecore-content-sdk/nextjs/client';
152
- import scConfig from 'sitecore.config';
153
-
154
- const client = new SitecoreClient({
155
- ...scConfig,
156
- });
157
-
158
- async function fetchPageData(path: string) {
159
- try {
160
- const response = await client.getPage(path);
161
- return response?.layout;
162
- } catch (error) {
163
- throw new SitecoreFetchError(`Failed to fetch page: ${path}`, error);
164
- }
165
- }
166
- ```
167
-
168
- ## Best Practices Summary
169
-
170
- 1. **Always validate Sitecore fields** before rendering
171
- 2. **Use proper TypeScript types** for all components and functions
172
- 3. **Implement error boundaries** for robust error handling
173
- 4. **Cache API responses** to improve performance
174
- 5. **Follow Next.js conventions** for routing and data fetching
175
- 6. **Write testable code** with proper separation of concerns
176
- 7. **Use Sitecore field components** instead of manual rendering
177
- 8. **Implement proper loading states** for better UX
178
- 9. **Follow security best practices** for input validation
179
- 10. **Document public APIs** and complex functionality
@@ -1,236 +0,0 @@
1
- # Claude/Windsurf Guidance for Sitecore Content SDK Next.js App Router Project
2
-
3
- ## Project Context
4
- This is a Sitecore Content SDK application built with Next.js App Router, TypeScript, and React Server Components. The project integrates with Sitecore XM Cloud for headless content management and follows modern web development best practices with the latest Next.js App Router features.
5
-
6
- ## Architecture Overview
7
- - **Framework**: Next.js with App Router (Server Components by default)
8
- - **Language**: TypeScript with strict mode enabled
9
- - **CMS**: Sitecore XM Cloud (headless)
10
- - **SDK**: @sitecore-content-sdk for API integration
11
- - **Styling**: CSS Modules or Tailwind CSS
12
- - **State Management**: React Query/SWR for server state
13
- - **Internationalization**: next-intl for multi-language support
14
-
15
- ## Development Principles
16
-
17
- ### Code Organization
18
- - Use modular, feature-based architecture
19
- - Separate concerns: components, utilities, types, hooks
20
- - Follow Next.js App Router conventions
21
- - Implement proper error boundaries and loading states
22
- - Organize by Server vs Client Components appropriately
23
-
24
- ### TypeScript Standards
25
- - Enable strict mode and strict null checks
26
- - Use proper type definitions for Sitecore fields and components
27
- - Prefer type assertions over `any` type
28
- - Implement discriminated unions for complex state management
29
- - Define interfaces for all component props
30
-
31
- ### React App Router Patterns
32
- - Server Components for data fetching and static content (default)
33
- - Client Components only when interactivity is required ('use client')
34
- - Use React.memo for expensive components
35
- - Implement proper dependency arrays in hooks
36
- - Leverage App Router file conventions (layout.tsx, loading.tsx, error.tsx)
37
-
38
- ## Sitecore Integration Patterns
39
-
40
- ### Content Fetching
41
- - Use SitecoreClient for all API calls
42
- - Implement proper error handling with custom error classes
43
- - Cache responses using React Query or SWR
44
- - Handle preview vs. published content scenarios
45
- - Fetch data in Server Components when possible
46
-
47
- ### Component Development
48
- - Always use Sitecore field components (Text, RichText, Image)
49
- - Validate field existence before rendering
50
- - Handle missing or empty fields gracefully
51
- - Export components with proper TypeScript interfaces
52
- - Follow Server Component patterns for Sitecore content
53
-
54
- ### Field Handling
55
- ```typescript
56
- interface ComponentProps {
57
- fields: {
58
- title: Field;
59
- content: Field;
60
- image: Field;
61
- };
62
- }
63
-
64
- // Always validate fields
65
- <Text field={fields?.title} tag="h1" />
66
- <RichText field={fields?.content} />
67
- <Image field={fields?.image} />
68
- ```
69
-
70
- ### App Router Specific Patterns
71
- ```typescript
72
- // Server Component (default)
73
- export default async function SitecorePage({ params }: { params: { path: string[] } }) {
74
- const pageData = await client.getPage(params.path.join('/'));
75
- return <SitecoreLayout layoutData={pageData.layout} />;
76
- }
77
-
78
- // Client Component when needed
79
- 'use client';
80
- export default function InteractiveComponent({ fields }: ComponentProps) {
81
- // Client-side interactivity
82
- }
83
- ```
84
-
85
- ## Performance Best Practices
86
-
87
- ### App Router Optimization Strategies
88
- - Use Server Components for Sitecore content rendering
89
- - Leverage streaming for improved perceived performance
90
- - Implement proper caching headers
91
- - Optimize bundle size with Server Components
92
- - Use Next.js Image component for optimized images
93
- - Implement proper loading states and error boundaries
94
-
95
- ### Memory Management
96
- - Clean up subscriptions and event listeners
97
- - Use useCallback and useMemo appropriately in Client Components
98
- - Avoid memory leaks in useEffect hooks
99
- - Implement proper cleanup in custom hooks
100
- - Minimize client-side JavaScript bundle
101
-
102
- ### Caching Strategies
103
- - Cache Sitecore API responses appropriately
104
- - Use Next.js caching features
105
- - Handle content updates and cache invalidation
106
- - Consider CDN caching for static content
107
- - Implement proper revalidation strategies
108
-
109
- ## Security Guidelines
110
-
111
- ### Input Validation
112
- - Sanitize all user inputs before processing
113
- - Validate data at application boundaries
114
- - Use type guards for runtime type checking
115
- - Escape content when rendering to prevent XSS
116
-
117
- ### API Security
118
- - Use HTTPS for all Sitecore connections
119
- - Never expose API keys in client-side code
120
- - Implement proper authentication and authorization
121
- - Validate all data received from external sources
122
- - Use environment variables for sensitive configuration
123
-
124
- ### App Router Security
125
- - Keep sensitive operations in Server Components
126
- - Validate route parameters properly
127
- - Implement proper error boundaries
128
-
129
- ## Code Quality Standards
130
-
131
- ### Naming Conventions
132
- - Variables/Functions: camelCase (getUserData, isLoading)
133
- - Components: PascalCase (SitecoreComponent, PageLayout)
134
- - Constants: UPPER_SNAKE_CASE (API_ENDPOINT, MAX_RETRIES)
135
- - Types/Interfaces: PascalCase (ContentItem, LayoutProps)
136
- - Files: Match component names (SitecoreComponent.tsx)
137
-
138
- ### Error Handling
139
- - Create custom error classes for different error types
140
- - Implement proper error boundaries in React components
141
- - Use error.tsx files for route-level error handling
142
- - Log errors appropriately for debugging
143
- - Provide fallback content when components fail
144
-
145
- ### Testing Approach
146
- - Write testable code with minimal dependencies
147
- - Mock external services and Sitecore APIs
148
- - Test component behavior, not implementation details
149
- - Include tests for error scenarios and edge cases
150
- - Test both Server and Client Components appropriately
151
-
152
- ## Development Workflow
153
-
154
- ### Environment Setup
155
- 1. Install dependencies: `npm install`
156
- 2. Configure environment variables (copy .env.example to .env.local)
157
- 3. Set up Sitecore API credentials
158
- 4. Configure next-intl for internationalization
159
- 5. Start development server: `npm run dev`
160
-
161
- ### Build Process
162
- - Use `npm run build` for production builds
163
- - Enable TypeScript strict mode
164
- - Run linting and type checking before commits
165
- - Test both Server and Client Component functionality
166
-
167
- ## Common Patterns and Examples
168
-
169
- ### Sitecore Component Structure
170
- ```typescript
171
- interface HeroProps {
172
- fields: {
173
- title: Field;
174
- subtitle: Field;
175
- backgroundImage: Field;
176
- };
177
- }
178
-
179
- export default function Hero({ fields }: HeroProps) {
180
- return (
181
- <section className="hero">
182
- <Text field={fields?.title} tag="h1" />
183
- <Text field={fields?.subtitle} tag="p" />
184
- <Image field={fields?.backgroundImage} />
185
- </section>
186
- );
187
- }
188
- ```
189
-
190
- ### API Integration
191
- ```typescript
192
- import { SitecoreClient } from '@sitecore-content-sdk/nextjs/client';
193
- import scConfig from 'sitecore.config';
194
-
195
- const client = new SitecoreClient({
196
- ...scConfig,
197
- });
198
-
199
- async function fetchPageData(path: string) {
200
- try {
201
- const response = await client.getPage(path);
202
- return response?.layout;
203
- } catch (error) {
204
- throw new SitecoreFetchError(`Failed to fetch page: ${path}`, error);
205
- }
206
- }
207
- ```
208
-
209
- ### Internationalization
210
- ```typescript
211
- import { getTranslations } from 'next-intl/server';
212
-
213
- export default async function LocalizedPage() {
214
- const t = await getTranslations('common');
215
- // Fetch Sitecore content for current locale
216
- return <div>{t('welcome')}</div>;
217
- }
218
- ```
219
-
220
- ## Best Practices Summary
221
-
222
- 1. **Always validate Sitecore fields** before rendering
223
- 2. **Use proper TypeScript types** for all components and functions
224
- 3. **Implement error boundaries** for robust error handling
225
- 4. **Cache API responses** to improve performance
226
- 5. **Follow Next.js App Router conventions** for routing and data fetching
227
- 6. **Write testable code** with proper separation of concerns
228
- 7. **Use Sitecore field components** instead of manual rendering
229
- 8. **Implement proper loading states** for better UX
230
- 9. **Follow security best practices** for input validation
231
- 10. **Document public APIs** and complex functionality
232
- 11. **Leverage Server Components** for better performance
233
- 12. **Use Client Components sparingly** only when interactivity is needed
234
- 13. **Implement proper internationalization** with next-intl
235
- 14. **Follow App Router file conventions** (layout.tsx, loading.tsx, error.tsx)
236
- 15. **Optimize for Core Web Vitals** and user experience