@mison/ling 1.0.0
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/.agents/.shared/ui-ux-pro-max/data/charts.csv +26 -0
- package/.agents/.shared/ui-ux-pro-max/data/colors.csv +97 -0
- package/.agents/.shared/ui-ux-pro-max/data/icons.csv +101 -0
- package/.agents/.shared/ui-ux-pro-max/data/landing.csv +31 -0
- package/.agents/.shared/ui-ux-pro-max/data/products.csv +97 -0
- package/.agents/.shared/ui-ux-pro-max/data/prompts.csv +24 -0
- package/.agents/.shared/ui-ux-pro-max/data/react-performance.csv +45 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/jetpack-compose.csv +53 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/react.csv +54 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
- package/.agents/.shared/ui-ux-pro-max/data/stacks/vue.csv +50 -0
- package/.agents/.shared/ui-ux-pro-max/data/styles.csv +59 -0
- package/.agents/.shared/ui-ux-pro-max/data/typography.csv +58 -0
- package/.agents/.shared/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
- package/.agents/.shared/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
- package/.agents/.shared/ui-ux-pro-max/data/web-interface.csv +31 -0
- package/.agents/.shared/ui-ux-pro-max/scripts/core.py +258 -0
- package/.agents/.shared/ui-ux-pro-max/scripts/design_system.py +1067 -0
- package/.agents/.shared/ui-ux-pro-max/scripts/search.py +106 -0
- package/.agents/ARCHITECTURE.md +285 -0
- package/.agents/agents/backend-specialist.md +268 -0
- package/.agents/agents/code-archaeologist.md +106 -0
- package/.agents/agents/database-architect.md +225 -0
- package/.agents/agents/debugger.md +225 -0
- package/.agents/agents/devops-engineer.md +242 -0
- package/.agents/agents/documentation-writer.md +104 -0
- package/.agents/agents/explorer-agent.md +73 -0
- package/.agents/agents/frontend-specialist.md +618 -0
- package/.agents/agents/game-developer.md +162 -0
- package/.agents/agents/mobile-developer.md +382 -0
- package/.agents/agents/orchestrator.md +436 -0
- package/.agents/agents/penetration-tester.md +188 -0
- package/.agents/agents/performance-optimizer.md +187 -0
- package/.agents/agents/product-manager.md +112 -0
- package/.agents/agents/product-owner.md +95 -0
- package/.agents/agents/project-planner.md +405 -0
- package/.agents/agents/qa-automation-engineer.md +103 -0
- package/.agents/agents/security-auditor.md +170 -0
- package/.agents/agents/seo-specialist.md +111 -0
- package/.agents/agents/test-engineer.md +158 -0
- package/.agents/mcp_config.json +22 -0
- package/.agents/rules/GEMINI.md +273 -0
- package/.agents/scripts/auto_preview.py +148 -0
- package/.agents/scripts/checklist.py +217 -0
- package/.agents/scripts/session_manager.py +120 -0
- package/.agents/scripts/verify_all.py +327 -0
- package/.agents/skills/api-patterns/SKILL.md +84 -0
- package/.agents/skills/api-patterns/api-style.md +42 -0
- package/.agents/skills/api-patterns/auth.md +24 -0
- package/.agents/skills/api-patterns/documentation.md +26 -0
- package/.agents/skills/api-patterns/graphql.md +41 -0
- package/.agents/skills/api-patterns/rate-limiting.md +31 -0
- package/.agents/skills/api-patterns/response.md +37 -0
- package/.agents/skills/api-patterns/rest.md +40 -0
- package/.agents/skills/api-patterns/scripts/api_validator.py +211 -0
- package/.agents/skills/api-patterns/security-testing.md +122 -0
- package/.agents/skills/api-patterns/trpc.md +41 -0
- package/.agents/skills/api-patterns/versioning.md +22 -0
- package/.agents/skills/app-builder/SKILL.md +75 -0
- package/.agents/skills/app-builder/agent-coordination.md +74 -0
- package/.agents/skills/app-builder/feature-building.md +53 -0
- package/.agents/skills/app-builder/project-detection.md +34 -0
- package/.agents/skills/app-builder/scaffolding.md +118 -0
- package/.agents/skills/app-builder/tech-stack.md +40 -0
- package/.agents/skills/app-builder/templates/SKILL.md +39 -0
- package/.agents/skills/app-builder/templates/astro-static/TEMPLATE.md +76 -0
- package/.agents/skills/app-builder/templates/chrome-extension/TEMPLATE.md +92 -0
- package/.agents/skills/app-builder/templates/cli-tool/TEMPLATE.md +88 -0
- package/.agents/skills/app-builder/templates/electron-desktop/TEMPLATE.md +88 -0
- package/.agents/skills/app-builder/templates/express-api/TEMPLATE.md +83 -0
- package/.agents/skills/app-builder/templates/flutter-app/TEMPLATE.md +90 -0
- package/.agents/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +90 -0
- package/.agents/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +122 -0
- package/.agents/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +122 -0
- package/.agents/skills/app-builder/templates/nextjs-static/TEMPLATE.md +169 -0
- package/.agents/skills/app-builder/templates/nuxt-app/TEMPLATE.md +134 -0
- package/.agents/skills/app-builder/templates/python-fastapi/TEMPLATE.md +83 -0
- package/.agents/skills/app-builder/templates/react-native-app/TEMPLATE.md +119 -0
- package/.agents/skills/architecture/SKILL.md +57 -0
- package/.agents/skills/architecture/context-discovery.md +43 -0
- package/.agents/skills/architecture/examples.md +94 -0
- package/.agents/skills/architecture/pattern-selection.md +68 -0
- package/.agents/skills/architecture/patterns-reference.md +50 -0
- package/.agents/skills/architecture/trade-off-analysis.md +77 -0
- package/.agents/skills/bash-linux/SKILL.md +201 -0
- package/.agents/skills/behavioral-modes/SKILL.md +264 -0
- package/.agents/skills/brainstorming/SKILL.md +164 -0
- package/.agents/skills/brainstorming/dynamic-questioning.md +359 -0
- package/.agents/skills/clean-code/SKILL.md +200 -0
- package/.agents/skills/code-review-checklist/SKILL.md +125 -0
- package/.agents/skills/database-design/SKILL.md +54 -0
- package/.agents/skills/database-design/database-selection.md +43 -0
- package/.agents/skills/database-design/indexing.md +39 -0
- package/.agents/skills/database-design/migrations.md +50 -0
- package/.agents/skills/database-design/optimization.md +36 -0
- package/.agents/skills/database-design/orm-selection.md +30 -0
- package/.agents/skills/database-design/schema-design.md +56 -0
- package/.agents/skills/database-design/scripts/schema_validator.py +172 -0
- package/.agents/skills/deployment-procedures/SKILL.md +241 -0
- package/.agents/skills/doc.md +177 -0
- package/.agents/skills/documentation-templates/SKILL.md +194 -0
- package/.agents/skills/frontend-design/SKILL.md +418 -0
- package/.agents/skills/frontend-design/animation-guide.md +331 -0
- package/.agents/skills/frontend-design/color-system.md +307 -0
- package/.agents/skills/frontend-design/decision-trees.md +418 -0
- package/.agents/skills/frontend-design/motion-graphics.md +306 -0
- package/.agents/skills/frontend-design/scripts/accessibility_checker.py +183 -0
- package/.agents/skills/frontend-design/scripts/ux_audit.py +727 -0
- package/.agents/skills/frontend-design/typography-system.md +345 -0
- package/.agents/skills/frontend-design/ux-psychology.md +1118 -0
- package/.agents/skills/frontend-design/visual-effects.md +383 -0
- package/.agents/skills/game-development/2d-games/SKILL.md +119 -0
- package/.agents/skills/game-development/3d-games/SKILL.md +135 -0
- package/.agents/skills/game-development/SKILL.md +167 -0
- package/.agents/skills/game-development/game-art/SKILL.md +185 -0
- package/.agents/skills/game-development/game-audio/SKILL.md +190 -0
- package/.agents/skills/game-development/game-design/SKILL.md +129 -0
- package/.agents/skills/game-development/mobile-games/SKILL.md +108 -0
- package/.agents/skills/game-development/multiplayer/SKILL.md +132 -0
- package/.agents/skills/game-development/pc-games/SKILL.md +144 -0
- package/.agents/skills/game-development/vr-ar/SKILL.md +123 -0
- package/.agents/skills/game-development/web-games/SKILL.md +150 -0
- package/.agents/skills/geo-fundamentals/SKILL.md +155 -0
- package/.agents/skills/geo-fundamentals/scripts/geo_checker.py +289 -0
- package/.agents/skills/i18n-localization/SKILL.md +154 -0
- package/.agents/skills/i18n-localization/scripts/i18n_checker.py +241 -0
- package/.agents/skills/intelligent-routing/SKILL.md +335 -0
- package/.agents/skills/lint-and-validate/SKILL.md +44 -0
- package/.agents/skills/lint-and-validate/scripts/lint_runner.py +184 -0
- package/.agents/skills/lint-and-validate/scripts/type_coverage.py +173 -0
- package/.agents/skills/mcp-builder/SKILL.md +176 -0
- package/.agents/skills/mobile-design/SKILL.md +394 -0
- package/.agents/skills/mobile-design/decision-trees.md +516 -0
- package/.agents/skills/mobile-design/mobile-backend.md +491 -0
- package/.agents/skills/mobile-design/mobile-color-system.md +420 -0
- package/.agents/skills/mobile-design/mobile-debugging.md +122 -0
- package/.agents/skills/mobile-design/mobile-design-thinking.md +355 -0
- package/.agents/skills/mobile-design/mobile-navigation.md +458 -0
- package/.agents/skills/mobile-design/mobile-performance.md +767 -0
- package/.agents/skills/mobile-design/mobile-testing.md +356 -0
- package/.agents/skills/mobile-design/mobile-typography.md +432 -0
- package/.agents/skills/mobile-design/platform-android.md +666 -0
- package/.agents/skills/mobile-design/platform-ios.md +561 -0
- package/.agents/skills/mobile-design/scripts/mobile_audit.py +670 -0
- package/.agents/skills/mobile-design/touch-psychology.md +537 -0
- package/.agents/skills/nextjs-react-expert/1-async-eliminating-waterfalls.md +311 -0
- package/.agents/skills/nextjs-react-expert/2-bundle-bundle-size-optimization.md +241 -0
- package/.agents/skills/nextjs-react-expert/3-server-server-side-performance.md +489 -0
- package/.agents/skills/nextjs-react-expert/4-client-client-side-data-fetching.md +263 -0
- package/.agents/skills/nextjs-react-expert/5-rerender-re-render-optimization.md +581 -0
- package/.agents/skills/nextjs-react-expert/6-rendering-rendering-performance.md +431 -0
- package/.agents/skills/nextjs-react-expert/7-js-javascript-performance.md +683 -0
- package/.agents/skills/nextjs-react-expert/8-advanced-advanced-patterns.md +149 -0
- package/.agents/skills/nextjs-react-expert/SKILL.md +286 -0
- package/.agents/skills/nextjs-react-expert/scripts/convert_rules.py +222 -0
- package/.agents/skills/nextjs-react-expert/scripts/react_performance_checker.py +252 -0
- package/.agents/skills/nodejs-best-practices/SKILL.md +333 -0
- package/.agents/skills/parallel-agents/SKILL.md +193 -0
- package/.agents/skills/performance-profiling/SKILL.md +149 -0
- package/.agents/skills/performance-profiling/scripts/lighthouse_audit.py +120 -0
- package/.agents/skills/plan-writing/SKILL.md +152 -0
- package/.agents/skills/powershell-windows/SKILL.md +166 -0
- package/.agents/skills/python-patterns/SKILL.md +441 -0
- package/.agents/skills/red-team-tactics/SKILL.md +203 -0
- package/.agents/skills/refactoring-patterns/SKILL.md +43 -0
- package/.agents/skills/rust-pro/SKILL.md +190 -0
- package/.agents/skills/seo-fundamentals/SKILL.md +135 -0
- package/.agents/skills/seo-fundamentals/scripts/seo_checker.py +215 -0
- package/.agents/skills/server-management/SKILL.md +161 -0
- package/.agents/skills/systematic-debugging/SKILL.md +114 -0
- package/.agents/skills/tailwind-patterns/SKILL.md +269 -0
- package/.agents/skills/tdd-workflow/SKILL.md +149 -0
- package/.agents/skills/testing-patterns/SKILL.md +178 -0
- package/.agents/skills/testing-patterns/scripts/test_runner.py +219 -0
- package/.agents/skills/vulnerability-scanner/SKILL.md +276 -0
- package/.agents/skills/vulnerability-scanner/checklists.md +131 -0
- package/.agents/skills/vulnerability-scanner/scripts/__pycache__/security_scan.cpython-310.pyc +0 -0
- package/.agents/skills/vulnerability-scanner/scripts/security_scan.py +524 -0
- package/.agents/skills/web-design-guidelines/SKILL.md +57 -0
- package/.agents/skills/webapp-testing/SKILL.md +187 -0
- package/.agents/skills/webapp-testing/scripts/playwright_runner.py +173 -0
- package/.agents/workflows/brainstorm.md +113 -0
- package/.agents/workflows/create.md +59 -0
- package/.agents/workflows/debug.md +103 -0
- package/.agents/workflows/deploy.md +176 -0
- package/.agents/workflows/enhance.md +63 -0
- package/.agents/workflows/orchestrate.md +242 -0
- package/.agents/workflows/plan.md +89 -0
- package/.agents/workflows/preview.md +80 -0
- package/.agents/workflows/restore-localize-compat.md +525 -0
- package/.agents/workflows/status.md +86 -0
- package/.agents/workflows/test.md +144 -0
- package/.agents/workflows/ui-ux-pro-max.md +295 -0
- package/.spec/profiles/codex/AGENTS.spec.md +7 -0
- package/.spec/profiles/codex/ling.spec.rules.md +4 -0
- package/.spec/profiles/gemini/GEMINI.spec.md +5 -0
- package/.spec/references/README.md +36 -0
- package/.spec/references/cse-quickstart.md +96 -0
- package/.spec/references/gda-framework.md +394 -0
- package/.spec/references/harness-engineering-digest.md +93 -0
- package/.spec/skills/cybernetic-systems-engineering/SKILL.md +792 -0
- package/.spec/skills/cybernetic-systems-engineering/agents/openai.yaml +5 -0
- package/.spec/skills/cybernetic-systems-engineering/assets/quickstart.md +96 -0
- package/.spec/skills/cybernetic-systems-engineering/references/README.md +36 -0
- package/.spec/skills/cybernetic-systems-engineering/references/gda-framework.md +394 -0
- package/.spec/skills/cybernetic-systems-engineering/scripts/issues.csv +20 -0
- package/.spec/skills/harness-engineering/SKILL.md +100 -0
- package/.spec/skills/harness-engineering/agents/openai.yaml +4 -0
- package/.spec/skills/harness-engineering/references/harness-engineering-digest.md +93 -0
- package/.spec/templates/driver-prompt.md +7 -0
- package/.spec/templates/handoff.md +9 -0
- package/.spec/templates/issues.template.csv +2 -0
- package/.spec/templates/phase-acceptance.md +9 -0
- package/.spec/templates/review-report.md +9 -0
- package/AGENT_FLOW.md +609 -0
- package/CHANGELOG.md +43 -0
- package/LICENSE +21 -0
- package/README.md +359 -0
- package/bin/adapters/base.js +63 -0
- package/bin/adapters/codex.js +421 -0
- package/bin/adapters/gemini.js +157 -0
- package/bin/ag-kit.js +2266 -0
- package/bin/core/builder.js +80 -0
- package/bin/core/generator.js +59 -0
- package/bin/core/resource-loader.js +64 -0
- package/bin/core/transformer.js +208 -0
- package/bin/interactive.js +65 -0
- package/bin/ling.js +3 -0
- package/bin/utils/atomic-writer.js +97 -0
- package/bin/utils/git-helper.js +68 -0
- package/bin/utils/managed-block.js +65 -0
- package/bin/utils/manifest.js +244 -0
- package/bin/utils.js +89 -0
- package/docs/PLAN.md +54 -0
- package/docs/TECH.md +191 -0
- package/package.json +56 -0
- package/scripts/ci-verify.js +110 -0
- package/scripts/clean.js +123 -0
- package/scripts/health-check.js +143 -0
- package/scripts/health-check.sh +6 -0
- package/scripts/postinstall-check.js +112 -0
- package/scripts/run-tests.js +49 -0
- package/tests/atomic-writer.test.js +47 -0
- package/tests/clean-script.test.js +77 -0
- package/tests/cli-smoke.test.js +479 -0
- package/tests/codex-adapter.test.js +132 -0
- package/tests/doctor.test.js +94 -0
- package/tests/gemini-adapter.test.js +30 -0
- package/tests/generator.test.js +48 -0
- package/tests/git-helper.test.js +53 -0
- package/tests/global-sync.test.js +133 -0
- package/tests/health-check-script.test.js +34 -0
- package/tests/managed-block.test.js +41 -0
- package/tests/manifest.test.js +97 -0
- package/tests/package-tarball.test.js +33 -0
- package/tests/phase-c.test.js +107 -0
- package/tests/spec-profile.test.js +86 -0
- package/tests/standards-compliance.test.js +303 -0
- package/tests/transformer.test.js +74 -0
- package/tests/versioning.test.js +51 -0
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: flutter-app
|
|
3
|
+
description: Flutter mobile app template(移动应用模板)原则。Riverpod(状态管理)、Go Router(路由)、Clean Architecture(整洁架构)。
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Flutter App Template(应用模板)
|
|
7
|
+
|
|
8
|
+
## Tech Stack(技术栈)
|
|
9
|
+
|
|
10
|
+
| Component(组件) | Technology(技术) |
|
|
11
|
+
| --- | --- |
|
|
12
|
+
| Framework(框架) | Flutter 3.x |
|
|
13
|
+
| Language(语言) | Dart 3.x |
|
|
14
|
+
| State(状态) | Riverpod 2.0 |
|
|
15
|
+
| Navigation(导航) | Go Router |
|
|
16
|
+
| HTTP | Dio |
|
|
17
|
+
| Storage(存储) | Hive |
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Directory Structure(目录结构)
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
project_name/
|
|
25
|
+
+-- lib/
|
|
26
|
+
| +-- main.dart
|
|
27
|
+
| +-- app.dart
|
|
28
|
+
| +-- core/
|
|
29
|
+
| | +-- constants/
|
|
30
|
+
| | +-- theme/
|
|
31
|
+
| | +-- router/
|
|
32
|
+
| | +-- utils/
|
|
33
|
+
| +-- features/
|
|
34
|
+
| | +-- auth/
|
|
35
|
+
| | | +-- data/
|
|
36
|
+
| | | +-- domain/
|
|
37
|
+
| | | +-- presentation/
|
|
38
|
+
| | +-- home/
|
|
39
|
+
| +-- shared/
|
|
40
|
+
| | +-- widgets/
|
|
41
|
+
| | +-- providers/
|
|
42
|
+
| +-- services/
|
|
43
|
+
| +-- api/
|
|
44
|
+
| +-- storage/
|
|
45
|
+
+-- test/
|
|
46
|
+
+-- pubspec.yaml
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Architecture Layers(架构层)
|
|
52
|
+
|
|
53
|
+
| Layer(层) | Contents(内容) |
|
|
54
|
+
| --- | --- |
|
|
55
|
+
| Presentation(表现层) | Screens(页面)、Widgets(组件)、Providers(提供器) |
|
|
56
|
+
| Domain(领域层) | Entities(实体)、Use Cases(用例) |
|
|
57
|
+
| Data(数据层) | Repositories(仓储)、Models(模型) |
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Key Packages(关键包)
|
|
62
|
+
|
|
63
|
+
| Package(包) | Purpose(用途) |
|
|
64
|
+
| --- | --- |
|
|
65
|
+
| flutter_riverpod | 状态管理 |
|
|
66
|
+
| riverpod_annotation | 代码生成 |
|
|
67
|
+
| go_router | 导航 |
|
|
68
|
+
| dio | HTTP 客户端 |
|
|
69
|
+
| freezed | 不可变模型 |
|
|
70
|
+
| hive | 本地存储 |
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## Setup Steps(设置步骤)
|
|
75
|
+
|
|
76
|
+
1. `flutter create {{name}} --org com.{{bundle}}`
|
|
77
|
+
2. 更新 `pubspec.yaml`
|
|
78
|
+
3. `flutter pub get`
|
|
79
|
+
4. 运行代码生成:`dart run build_runner build`
|
|
80
|
+
5. `flutter run`
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
## Best Practices(最佳实践)
|
|
85
|
+
|
|
86
|
+
- Feature-first(功能优先)文件夹结构
|
|
87
|
+
- Riverpod(状态管理)用于状态管理,React Query pattern(服务端状态模式)
|
|
88
|
+
- Freezed(不可变模型)用于不可变数据类
|
|
89
|
+
- Go Router(路由)用于声明式导航
|
|
90
|
+
- Material 3(设计规范)主题
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: monorepo-turborepo
|
|
3
|
+
description: Turborepo monorepo template principles(模板原则)。pnpm workspaces(工作区)、shared packages(共享包)。
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Turborepo Monorepo Template(模板)
|
|
7
|
+
|
|
8
|
+
## Tech Stack(技术栈)
|
|
9
|
+
|
|
10
|
+
| Component(组件) | Technology(技术) |
|
|
11
|
+
| --- | --- |
|
|
12
|
+
| Build System(构建系统) | Turborepo |
|
|
13
|
+
| Package Manager(包管理器) | pnpm |
|
|
14
|
+
| Apps(应用) | Next.js、Express |
|
|
15
|
+
| Packages(包) | Shared UI, Config, Types(共享 UI/配置/类型) |
|
|
16
|
+
| Language(语言) | TypeScript |
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Directory Structure(目录结构)
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
project-name/
|
|
24
|
+
+-- apps/
|
|
25
|
+
| +-- web/ # Next.js app(应用)
|
|
26
|
+
| +-- api/ # Express API
|
|
27
|
+
| +-- docs/ # Documentation(文档)
|
|
28
|
+
+-- packages/
|
|
29
|
+
| +-- ui/ # Shared components(共享组件)
|
|
30
|
+
| +-- config/ # ESLint, TS, Tailwind
|
|
31
|
+
| +-- types/ # Shared types(共享类型)
|
|
32
|
+
| +-- utils/ # Shared utilities(共享工具)
|
|
33
|
+
+-- turbo.json
|
|
34
|
+
+-- pnpm-workspace.yaml
|
|
35
|
+
+-- package.json
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Key Concepts(关键概念)
|
|
41
|
+
|
|
42
|
+
| Concept(概念) | Description(说明) |
|
|
43
|
+
| --- | --- |
|
|
44
|
+
| Workspaces(工作区) | pnpm-workspace.yaml |
|
|
45
|
+
| Pipeline(管道) | turbo.json task graph(任务图) |
|
|
46
|
+
| Caching(缓存) | Remote/local task caching(远程/本地任务缓存) |
|
|
47
|
+
| Dependencies(依赖) | `workspace:*` protocol(协议) |
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Turbo Pipeline(任务管道)
|
|
52
|
+
|
|
53
|
+
| Task(任务) | Depends On(依赖) |
|
|
54
|
+
| --- | --- |
|
|
55
|
+
| build | ^build (dependencies first)(依赖优先) |
|
|
56
|
+
| dev | cache: false, persistent(不缓存,常驻) |
|
|
57
|
+
| lint | ^build |
|
|
58
|
+
| test | ^build |
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## Setup Steps(设置步骤)
|
|
63
|
+
|
|
64
|
+
1. Create root directory(创建根目录)
|
|
65
|
+
2. `pnpm init`
|
|
66
|
+
3. Create pnpm-workspace.yaml(创建)
|
|
67
|
+
4. Create turbo.json(创建)
|
|
68
|
+
5. Add apps and packages(添加应用与包)
|
|
69
|
+
6. `pnpm install`
|
|
70
|
+
7. `pnpm dev`
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## Common Commands(常用命令)
|
|
75
|
+
|
|
76
|
+
| Command(命令) | Description(说明) |
|
|
77
|
+
| --- | --- |
|
|
78
|
+
| `pnpm dev` | Run all apps(运行全部应用) |
|
|
79
|
+
| `pnpm build` | Build all(构建全部) |
|
|
80
|
+
| `pnpm --filter @name/web dev` | Run specific app(运行指定应用) |
|
|
81
|
+
| `pnpm --filter @name/web add axios` | Add dep to app(为应用添加依赖) |
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## Best Practices(最佳实践)
|
|
86
|
+
|
|
87
|
+
- Shared configs in packages/config(共享配置)
|
|
88
|
+
- Shared types in packages/types(共享类型)
|
|
89
|
+
- Internal packages with `workspace:*`
|
|
90
|
+
- Use Turbo remote caching for CI(CI 远程缓存)
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: nextjs-fullstack
|
|
3
|
+
description: Next.js Full-Stack template(全栈模板)原则。App Router、Prisma、Tailwind v4。
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Next.js Full-Stack Template(全栈模板,2026 版)
|
|
7
|
+
|
|
8
|
+
## Tech Stack(技术栈)
|
|
9
|
+
|
|
10
|
+
| Component(组件) | Technology(技术) | Version / Notes(版本/说明) |
|
|
11
|
+
| --- | --- | --- |
|
|
12
|
+
| Framework(框架) | Next.js | v16+(App Router、Turbopack) |
|
|
13
|
+
| Language(语言) | TypeScript | v5+(Strict Mode,严格模式) |
|
|
14
|
+
| Database(数据库) | PostgreSQL | Prisma ORM(Serverless-friendly,适配 Serverless) |
|
|
15
|
+
| Styling(样式) | Tailwind CSS | v4.0(零配置,CSS-first) |
|
|
16
|
+
| Auth(认证) | Clerk / Better Auth | 中间件保护路由 |
|
|
17
|
+
| UI Logic(UI 逻辑) | React 19 | Server Actions、useActionState |
|
|
18
|
+
| Validation(验证) | Zod | Schema 校验(API & Forms) |
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Directory Structure(目录结构)
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
project-name/
|
|
26
|
+
+-- prisma/
|
|
27
|
+
| +-- schema.prisma # Database schema(数据库结构)
|
|
28
|
+
+-- src/
|
|
29
|
+
| +-- app/
|
|
30
|
+
| | +-- (auth)/ # 登录/注册路由组
|
|
31
|
+
| | +-- (dashboard)/ # 受保护路由
|
|
32
|
+
| | +-- api/ # Route Handlers(仅用于 Webhooks/外部集成)
|
|
33
|
+
| | +-- layout.tsx # Root Layout(Metadata, Providers)
|
|
34
|
+
| | +-- page.tsx # Landing Page(落地页)
|
|
35
|
+
| | +-- globals.css # Tailwind v4 配置(@theme 在此)
|
|
36
|
+
| +-- components/
|
|
37
|
+
| | +-- ui/ # 可复用 UI(Button, Input)
|
|
38
|
+
| | +-- forms/ # Client forms(useActionState)
|
|
39
|
+
| +-- lib/
|
|
40
|
+
| | +-- db.ts # Prisma singleton client(单例客户端)
|
|
41
|
+
| | +-- utils.ts # Helper functions(辅助函数)
|
|
42
|
+
| | +-- dal.ts # Data Access Layer(仅服务端)
|
|
43
|
+
| +-- actions/ # Server Actions(变更)
|
|
44
|
+
| +-- types/ # Global TS Types(类型)
|
|
45
|
+
+-- public/
|
|
46
|
+
+-- next.config.ts # TypeScript Config(配置)
|
|
47
|
+
+-- package.json
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## Key Concepts(更新)
|
|
53
|
+
|
|
54
|
+
| Concept(概念) | Description(说明) |
|
|
55
|
+
| --- | --- |
|
|
56
|
+
| Server Components(服务端组件) | 在服务端渲染(默认)。无需 API 即可直接访问 Prisma。 |
|
|
57
|
+
| Server Actions(服务端动作) | 处理表单变更,替代传统 API Routes。用于 `action={}`。 |
|
|
58
|
+
| React 19 Hooks(钩子) | 表单状态管理:useActionState、useFormStatus、useOptimistic。 |
|
|
59
|
+
| Data Access Layer(数据访问层) | 数据安全。分离数据库逻辑(DTOs)以安全复用。 |
|
|
60
|
+
| Tailwind v4 | 样式引擎。无需 tailwind.config.js,在 CSS 中直接配置。 |
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## Environment Variables(环境变量)
|
|
65
|
+
|
|
66
|
+
| Variable(变量) | Purpose(用途) |
|
|
67
|
+
| --- | --- |
|
|
68
|
+
| DATABASE_URL | PostgreSQL connection string(Prisma) |
|
|
69
|
+
| NEXT_PUBLIC_APP_URL | Public application URL(公共应用 URL) |
|
|
70
|
+
| NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY | Auth(使用 Clerk 时) |
|
|
71
|
+
| CLERK_SECRET_KEY | Auth secret(仅服务端) |
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Setup Steps(设置步骤)
|
|
76
|
+
|
|
77
|
+
1. Initialize Project(初始化项目):
|
|
78
|
+
```bash
|
|
79
|
+
npx create-next-app@latest my-app --typescript --tailwind --eslint
|
|
80
|
+
# 选择 Yes(App Router)
|
|
81
|
+
# 选择 No(src 目录)(可选,本模板使用 src)
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
2. Install DB & Validation(安装数据库与校验):
|
|
85
|
+
```bash
|
|
86
|
+
npm install prisma @prisma/client zod
|
|
87
|
+
npm install -D ts-node # 用于运行 seed 脚本
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
3. Configure Tailwind v4(如缺失):
|
|
91
|
+
确保 `src/app/globals.css` 使用新的导入语法,而不是配置文件:
|
|
92
|
+
```css
|
|
93
|
+
@import "tailwindcss";
|
|
94
|
+
|
|
95
|
+
@theme {
|
|
96
|
+
--color-primary: oklch(0.5 0.2 240);
|
|
97
|
+
--font-sans: "Inter", sans-serif;
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
4. Initialize Database(初始化数据库):
|
|
102
|
+
```bash
|
|
103
|
+
npx prisma init
|
|
104
|
+
# 更新 schema.prisma
|
|
105
|
+
npm run db:push
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
5. 启动开发服务器:
|
|
109
|
+
```bash
|
|
110
|
+
npm run dev --turbo
|
|
111
|
+
# --turbo 启用更快的 Turbopack
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## 最佳实践(2026 标准)
|
|
117
|
+
|
|
118
|
+
- **获取数据(Fetch Data)**:在 Server Components 中直接调用 Prisma(async/await),不要用 useEffect 获取初始数据。
|
|
119
|
+
- **变更(Mutations)**:使用 Server Actions + React 19 的 `useActionState` 处理加载与错误状态,避免手动 useState。
|
|
120
|
+
- **类型安全(Type Safety)**:在 Server Actions(输入验证)与客户端表单之间共享 Zod schema。
|
|
121
|
+
- **安全(Security)**:将数据传给 Prisma 前必须用 Zod 验证输入。
|
|
122
|
+
- **样式(Styling)**:在 Tailwind v4 中使用原生 CSS 变量,便于动态主题。
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: nextjs-saas
|
|
3
|
+
description: Next.js SaaS template(SaaS 模板)原则(2026 Standards,2026 标准)。React 19、Server Actions(服务端动作)、Auth.js v6。
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Next.js SaaS Template(2026 更新)
|
|
7
|
+
|
|
8
|
+
## Tech Stack(技术栈)
|
|
9
|
+
|
|
10
|
+
| Component(组件) | Technology(技术) | Version / Notes(版本/说明) |
|
|
11
|
+
| --- | --- | --- |
|
|
12
|
+
| Framework(框架) | Next.js | v16+(App Router、React Compiler(编译器)) |
|
|
13
|
+
| Runtime(运行时) | Node.js | v24(Krypton LTS) |
|
|
14
|
+
| Auth(认证) | Auth.js | v6(原名 NextAuth) |
|
|
15
|
+
| Payments(支付) | Stripe API | Latest(最新) |
|
|
16
|
+
| Database(数据库) | PostgreSQL | Prisma v6(Serverless Driver,无服务器驱动) |
|
|
17
|
+
| Email(邮件) | Resend | React Email(邮件模板) |
|
|
18
|
+
| UI(界面) | Tailwind CSS | v4(Oxide Engine、无配置文件) |
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Directory Structure(目录结构)
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
project-name/
|
|
26
|
+
+-- prisma/
|
|
27
|
+
| +-- schema.prisma # Database Schema(数据库 Schema)
|
|
28
|
+
+-- src/
|
|
29
|
+
| +-- actions/ # NEW: Server Actions(用于数据变更,替代 API Routes(API 路由))
|
|
30
|
+
| | +-- auth-actions.ts
|
|
31
|
+
| | +-- billing-actions.ts
|
|
32
|
+
| | +-- user-actions.ts
|
|
33
|
+
| +-- app/
|
|
34
|
+
| | +-- (auth)/ # Route Group(路由组):登录、注册
|
|
35
|
+
| | +-- (dashboard)/ # Route Group(路由组):受保护路由(应用布局)
|
|
36
|
+
| | +-- (marketing)/ # Route Group(路由组):落地页、价格(营销布局)
|
|
37
|
+
| | +-- api/ # 仅用于 Webhooks(回调)或 Edge cases(边缘场景)
|
|
38
|
+
| | +-- webhooks/stripe/
|
|
39
|
+
| +-- components/
|
|
40
|
+
| | +-- emails/ # React Email templates(邮件模板)
|
|
41
|
+
| | +-- forms/ # 使用 useActionState 的 Client components(客户端组件)(React 19)
|
|
42
|
+
| | +-- ui/ # Shadcn UI(组件库)
|
|
43
|
+
| +-- lib/
|
|
44
|
+
| | +-- auth.ts # Auth.js v6 config(配置)
|
|
45
|
+
| | +-- db.ts # Prisma Singleton(单例)
|
|
46
|
+
| | +-- stripe.ts # Stripe Singleton(单例)
|
|
47
|
+
| +-- styles/
|
|
48
|
+
| +-- globals.css # Tailwind v4 导入(仅 CSS)
|
|
49
|
+
+-- package.json
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## SaaS Features(SaaS 功能)
|
|
55
|
+
|
|
56
|
+
| Feature(功能) | Implementation(实现) |
|
|
57
|
+
| --- | --- |
|
|
58
|
+
| Auth(认证) | Auth.js v6 + Passkeys(通行密钥) + OAuth(授权) |
|
|
59
|
+
| Data Mutation(数据变更) | Server Actions(不使用 API routes(API 路由)) |
|
|
60
|
+
| Subscriptions(订阅) | Stripe Checkout & Customer Portal(结算与客户门户) |
|
|
61
|
+
| Webhooks(回调) | 异步处理 Stripe 事件 |
|
|
62
|
+
| Email(邮件) | 通过 Resend 发送事务邮件 |
|
|
63
|
+
| Validation(校验) | Zod(服务端校验) |
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## Database Schema(数据库结构)
|
|
68
|
+
|
|
69
|
+
| Model(模型) | Fields(字段,关键字段) |
|
|
70
|
+
| --- | --- |
|
|
71
|
+
| User | id, email, stripeCustomerId, subscriptionId, plan |
|
|
72
|
+
| Account | OAuth provider data(OAuth 提供方数据,Google, GitHub...) |
|
|
73
|
+
| Session | 用户会话(Database strategy,数据库策略) |
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## Environment Variables(环境变量)
|
|
78
|
+
|
|
79
|
+
| Variable(变量) | Purpose(用途) |
|
|
80
|
+
| --- | --- |
|
|
81
|
+
| DATABASE_URL | Prisma 连接字符串(Postgres) |
|
|
82
|
+
| AUTH_SECRET | 替代 NEXTAUTH_SECRET(Auth.js v6) |
|
|
83
|
+
| STRIPE_SECRET_KEY | Payments(支付,服务端) |
|
|
84
|
+
| STRIPE_WEBHOOK_SECRET | Webhook 校验 |
|
|
85
|
+
| RESEND_API_KEY | 邮件发送 |
|
|
86
|
+
| NEXT_PUBLIC_APP_URL | 应用规范 URL |
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## Setup Steps(设置步骤)
|
|
91
|
+
|
|
92
|
+
1. 初始化项目(Node 24):
|
|
93
|
+
```bash
|
|
94
|
+
npx create-next-app@latest {{name}} --typescript --eslint
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
2. 安装核心库:
|
|
98
|
+
```bash
|
|
99
|
+
npm install next-auth@beta stripe resend @prisma/client
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
3. 安装 Tailwind v4(添加到 globals.css):
|
|
103
|
+
```css
|
|
104
|
+
@import "tailwindcss";
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
4. 配置环境变量(.env.local)
|
|
108
|
+
|
|
109
|
+
5. 同步数据库:
|
|
110
|
+
```bash
|
|
111
|
+
npx prisma db push
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
6. 运行本地 Webhook:
|
|
115
|
+
```bash
|
|
116
|
+
npm run stripe:listen
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
7. 运行项目:
|
|
120
|
+
```bash
|
|
121
|
+
npm run dev
|
|
122
|
+
```
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: nextjs-static
|
|
3
|
+
description: Modern template for Next.js 16, React 19 & Tailwind v4(现代模板)。Optimized for Landing pages(落地页) and Portfolios(作品集)。
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Next.js Static Site Template(Modern Edition,现代版)
|
|
7
|
+
|
|
8
|
+
## Tech Stack(技术栈)
|
|
9
|
+
|
|
10
|
+
| Component(组件) | Technology(技术) | Notes(说明) |
|
|
11
|
+
| --- | --- | --- |
|
|
12
|
+
| Framework(框架) | Next.js 16+ | App Router(应用路由)、Turbopack、Static Exports(静态导出) |
|
|
13
|
+
| Core(核心) | React 19 | Server Components(服务端组件)、New Hooks(新 Hooks)、Compiler(编译器) |
|
|
14
|
+
| Language(语言) | TypeScript | Strict Mode(严格模式) |
|
|
15
|
+
| Styling(样式) | Tailwind CSS v4 | CSS-first configuration(无 js 配置)、Oxide Engine |
|
|
16
|
+
| Animations(动画) | Framer Motion | 布局动画与手势 |
|
|
17
|
+
| Icons(图标) | Lucide React | 轻量 SVG 图标 |
|
|
18
|
+
| SEO | Metadata API | Native Next.js API(替代 next-seo) |
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Directory Structure(目录结构)
|
|
23
|
+
|
|
24
|
+
Streamlined structure thanks to Tailwind v4(主题配置位于 CSS 内)。
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
project-name/
|
|
28
|
+
+-- src/
|
|
29
|
+
| +-- app/
|
|
30
|
+
| | +-- layout.tsx # Contains root SEO Metadata(根级 SEO 元数据)
|
|
31
|
+
| | +-- page.tsx # Landing Page(落地页)
|
|
32
|
+
| | +-- globals.css # Import Tailwind v4 & @theme config(导入 Tailwind v4 与 @theme 配置)
|
|
33
|
+
| | +-- not-found.tsx # Custom 404 page(自定义 404 页面)
|
|
34
|
+
| | +-- (routes)/ # Route groups(路由组,about, contact...)
|
|
35
|
+
| +-- components/
|
|
36
|
+
| | +-- layout/ # Header, Footer(页头、页脚)
|
|
37
|
+
| | +-- sections/ # Hero, Features, Pricing, CTA(主视觉、功能亮点、价格方案、CTA)
|
|
38
|
+
| | +-- ui/ # Atomic components(Button, Card)
|
|
39
|
+
| +-- lib/
|
|
40
|
+
| +-- utils.ts # Helper functions(cn, formatters)
|
|
41
|
+
+-- content/ # Markdown/MDX content(内容)
|
|
42
|
+
+-- public/ # Static assets(images, fonts)
|
|
43
|
+
+-- next.config.ts # Next.js Config(TypeScript)
|
|
44
|
+
+-- package.json
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Static Export Config(静态导出配置)
|
|
50
|
+
|
|
51
|
+
Using `next.config.ts` instead of `.js` for better type safety(更好的类型安全)。
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
// next.config.ts
|
|
55
|
+
import type { NextConfig } from "next";
|
|
56
|
+
|
|
57
|
+
const nextConfig: NextConfig = {
|
|
58
|
+
output: 'export', // Required for Static Hosting(S3、GitHub Pages)
|
|
59
|
+
images: {
|
|
60
|
+
unoptimized: true // Required if not using Node.js server image optimization(不使用 Node.js 服务器图像优化时必需)
|
|
61
|
+
},
|
|
62
|
+
trailingSlash: true, // Recommended for SEO and fixing 404s on some hosts(推荐用于 SEO 并修复某些主机 404)
|
|
63
|
+
reactStrictMode: true,
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export default nextConfig;
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## SEO Implementation(Metadata API)
|
|
72
|
+
|
|
73
|
+
Deprecated next-seo. Configure directly in layout.tsx or page.tsx(直接在 layout.tsx 或 page.tsx 中配置)。
|
|
74
|
+
|
|
75
|
+
```typescript
|
|
76
|
+
// src/app/layout.tsx
|
|
77
|
+
import type { Metadata } from 'next';
|
|
78
|
+
|
|
79
|
+
export const metadata: Metadata = {
|
|
80
|
+
title: {
|
|
81
|
+
template: '%s | Product Name',
|
|
82
|
+
default: 'Home - Product Name',
|
|
83
|
+
},
|
|
84
|
+
description: 'SEO optimized description for the landing page.',
|
|
85
|
+
openGraph: {
|
|
86
|
+
type: 'website',
|
|
87
|
+
locale: 'en_US',
|
|
88
|
+
url: 'https://mysite.com',
|
|
89
|
+
siteName: 'My Brand',
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
## Landing Page Sections(落地页模块)
|
|
97
|
+
|
|
98
|
+
| Section(模块) | Purpose(作用) | Suggested Component(建议组件) |
|
|
99
|
+
| --- | --- | --- |
|
|
100
|
+
| Hero(主视觉) | First impression, H1 & Main CTA(第一印象、主 CTA) | `<HeroSection />` |
|
|
101
|
+
| Features(功能亮点) | Product benefits(Grid/Bento 布局) | `<FeaturesGrid />` |
|
|
102
|
+
| Social Proof(社会证明) | Partner logos, User numbers(合作伙伴 Logo、用户数量) | `<LogoCloud />` |
|
|
103
|
+
| Testimonials(客户评价) | Customer reviews(用户评价) | `<TestimonialCarousel />` |
|
|
104
|
+
| Pricing(价格方案) | Service plans(服务计划) | `<PricingCards />` |
|
|
105
|
+
| FAQ(常见问题) | Questions & Answers(利于 SEO) | `<Accordion />` |
|
|
106
|
+
| CTA(转化模块) | Final conversion(最终转化) | `<CallToAction />` |
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## Animation Patterns(Framer Motion)
|
|
111
|
+
|
|
112
|
+
| Pattern(模式) | Usage(用途) | Implementation(实现) |
|
|
113
|
+
| --- | --- | --- |
|
|
114
|
+
| Fade Up(淡入上移) | Headlines, paragraphs(标题、段落) | `initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}` |
|
|
115
|
+
| Stagger(交错入场) | Lists of Features/Cards(功能/卡片列表) | Use variants with `staggerChildren`(使用 variants) |
|
|
116
|
+
| Parallax(视差) | Background images or floating elements(背景图像/浮动元素) | `useScroll` & `useTransform` |
|
|
117
|
+
| Micro-interactions(微交互) | Hover buttons, click effects(悬停/点击效果) | `whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}` |
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## Setup Steps(设置步骤)
|
|
122
|
+
|
|
123
|
+
1. Initialize Project(初始化项目):
|
|
124
|
+
```bash
|
|
125
|
+
npx create-next-app@latest my-site --typescript --tailwind --eslint
|
|
126
|
+
# Select "Yes" for App Router(选择 Yes 以启用 App Router)
|
|
127
|
+
# Select "No" for default import alias(选择 No 以保持默认导入别名)
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
2. Install Auxiliary Libraries(安装辅助库):
|
|
131
|
+
```bash
|
|
132
|
+
npm install framer-motion lucide-react clsx tailwind-merge
|
|
133
|
+
# clsx and tailwind-merge help handle dynamic classes(更好处理动态 class)
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
3. Configure Tailwind v4(位于 `src/app/globals.css`):
|
|
137
|
+
```css
|
|
138
|
+
@import "tailwindcss";
|
|
139
|
+
|
|
140
|
+
@theme {
|
|
141
|
+
--color-primary: #3b82f6;
|
|
142
|
+
--font-sans: 'Inter', sans-serif;
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
4. Development(开发运行):
|
|
147
|
+
```bash
|
|
148
|
+
npm run dev --turbopack
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## Deployment(部署)
|
|
154
|
+
|
|
155
|
+
| Platform(平台) | Method(方式) | Important Notes(重要说明) |
|
|
156
|
+
| --- | --- | --- |
|
|
157
|
+
| Vercel | Git Push(Git 推送) | Auto-detects Next.js. Best for performance(性能最佳) |
|
|
158
|
+
| GitHub Pages | GitHub Actions(工作流) | If not using a custom domain, set `basePath` in `next.config.ts` |
|
|
159
|
+
| AWS S3 / CloudFront | Upload out folder(上传 out 文件夹) | Ensure Error Document is configured to `404.html` |
|
|
160
|
+
| Netlify | Git Push(Git 推送) | Set build command to `npm run build` |
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## Best Practices (Modern)(现代最佳实践)
|
|
165
|
+
|
|
166
|
+
- **React Server Components (RSC)**: Default all components to Server Components(服务端组件). Only add `'use client'` when you need state (`useState`) or event listeners (`onClick`).
|
|
167
|
+
- **Image Optimization(图片优化)**: Use the `<Image />` component but remember `unoptimized: true` for static export or use an external image CDN(Cloudinary/Imgix).
|
|
168
|
+
- **Font Optimization(字体优化)**: Use `next/font`(Google Fonts) to automatically host fonts and prevent layout shift.
|
|
169
|
+
- **Responsive(响应式)**: Mobile-first design using Tailwind prefixes like `sm:`, `md:`, `lg:`.
|