AI 技能AI 插件人工智能【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills点击查看免费下载本文以 agentic-awesome-skills 仓库中app-builder技能的nextjs-static项目模板为核心系统讲解如何用 Next.js 14 静态导出 TypeScript Tailwind CSS Framer Motion 搭建 Landing Page、个人作品集与营销站点。读完本文你将掌握静态导出的完整配置、落地页区块的组织方法、动画模式的选择依据以及一键部署到任意静态托管的完整流程。该模板位于 plugins/agentic-awesome-skills-claude/skills/app-builder/templates/nextjs-static/TEMPLATE.md是 app-builder 技能提供的 13 个项目模板之一。在技能编排体系中当用户请求中出现portfolio、personal、cv、landing、promotional、marketing等关键词时项目类型检测 会将其归类为「Portfolio / Landing Page」并精确路由到本模板只读取本模板文件即可开始搭建无需加载其他模板。技术栈选型模板规定的技术栈如下组件技术选型框架Next.js 14静态导出 Static Export语言TypeScript样式Tailwind CSS动画Framer Motion图标Lucide ReactSEONext SEO这套组合的核心设计意图非常明确静态站点追求极致的首屏性能与部署简单性因此刻意不引入数据库、认证等后端依赖。需要说明的是仓库中 tech-stack.md 记录的 2025 默认 Web 栈是 Next.js 16 Tailwind CSS v4 React 19 Server Components Turbopack而本模板固定标注 Next.js 14是因为output: export静态导出模式在 14 版本已完全成熟稳定。如果你新建项目时使用更新版本的 Next.js本模板的目录结构与导出配置依然适用。TypeScript为模板中的{{name}}占位符、路由与组件提供类型约束配合路径别名减少深层相对导入Tailwind CSS移动优先的原子化样式模板中所有落地页区块均按 Tailwind 的响应式类组织Framer Motion负责入场、滚动显现与悬停动效是模板强调「premium animations」的载体Lucide React轻量图标库供 Hero、Features 等区块使用Next SEO为每个页面注入统一的title、description、OG 标签等元信息。目录结构设计模板给出了一个精简、职责分明的目录骨架project-name/ ├── src/ │ ├── app/ │ │ ├── layout.tsx │ │ ├── page.tsx # Landing │ │ ├── about/ │ │ ├── contact/ │ │ └── blog/ │ ├── components/ │ │ ├── layout/ # Header, Footer │ │ ├── sections/ # Hero, Features, CTA │ │ └── ui/ │ └── lib/ ├── content/ # Markdown content ├── public/ └── next.config.js各部分的职责划分与仓库中 scaffolding.md 倡导的「薄路由 组件分层」理念一脉相承src/app/Next.js App Router 路由层layout.tsx定义全局布局Header/Footer、字体、SEO 元信息page.tsx是落地首页about/、contact/、blog/是二级路由各自拥有独立page.tsxsrc/components/layout/站点级框架组件Header、Footer全站复用src/components/sections/落地页的「段落级」组件如 Hero、Features、CTA每个区块一个文件便于独立增删与调整顺序src/components/ui/可复用的基础 UI 组件按钮、卡片、标签等与 scaffolding.md 中shared/components/ui/的分层思路一致content/存放 Markdown 内容如博客文章、案例内容配合静态导出在构建期转为 HTMLpublic/静态资源目录favicon、logo、图片等无需经过打包直接引用next.config.js承载静态导出配置见下一节。静态导出配置一行决定「纯静态」模板给出的next.config.js是整个技术方案的关键// next.config.js const nextConfig { output: export, images: { unoptimized: true }, trailingSlash: true, };三个配置项的含义与影响如下配置项作用说明output: export构建时生成纯静态 HTML/CSS/JS禁用所有 Node.js 运行时能力无 API Routes、无 Server Actions、无 middlewarenext build产物可直接由任意静态服务器托管images: { unoptimized: true }关闭 Next.js 内置图片优化静态导出模式下没有图片优化服务必须关闭否则next/image会在构建或运行时报错同时意味着图片应自行压缩trailingSlash: true生成/about/形式的路径路径带尾部斜杠对多数静态托管与 CDN 缓存更友好避免目录重定向配套的目录结构也隐含了静态站的数据策略content/目录中的 Markdown 通过构建期的读取例如在getStaticProps或 App Router 的generateStaticParams中读取在构建时生成页面运行期不再有服务端计算这保证了任意主机上的一致表现。落地页区块组织模板将落地页划分为五个标准区块构成一条完整的转化漏斗区块目的Hero主标题Main headline CTA 按钮用户的第一印象决定首屏停留Features产品核心卖点/利益点列表Testimonials客户证言提供社交证明Social proofPricing定价方案CTA最终转化行动点在src/components/sections/下每个区块对应一个组件Hero.tsx、Features.tsx、Testimonials.tsx、Pricing.tsx、CTA.tsx在page.tsx中按序组合。这种「区块即组件」的组织方式有两个实战优势顺序可调调整区块顺序只需改page.tsx中的组件排列无需动区块内部逻辑可复用各区块也可被about/、contact/等二级页面按需复用避免重复实现。动画模式Framer Motion 四种用法模板归纳了四种高频动画模式模式适用场景Fade up淡入上移内容入场Content entry最通用的段落显现效果Stagger错落列表项List items如 Features 列表逐条依次显现Scroll reveal滚动显现进入视口时触发On viewport提升长页面的节奏感Hover悬停交互反馈Interactive feedback按钮、卡片、链接的悬停微动效结合 Framer Motion 的 API四种模式对应的实现要点为Fade upmotion.div配合initial{{ opacity: 0, y: 24 }}与whileInView/animate完成透明度与位移的入场Stagger父容器使用staggerChildren变体子项设置各自的hidden/show变体实现列表依次浮现Scroll reveal使用whileInView{{ opacity: 1 }}与viewport{{ once: true }}保证元素进入视口才显现且只播放一次HoverwhileHover{{ scale: 1.05 }}等属性提供即时的鼠标反馈。动画应服务于转化而非分散注意力模板将 Fade up / Scroll reveal 用于内容节奏、Hover 用于可交互元素正是「premium animations」与可用性之间的平衡。从零搭建五步上手模板给出了可直接执行的初始化流程创建项目{{name}}为项目名占位符实际创建时替换为你的项目名npx create-next-app {{name}} --typescript --tailwind --app--typescript启用 TypeScript--tailwind预装 Tailwind CSS--app使用 App Router与模板目录结构完全对齐安装依赖npm install framer-motion lucide-react next-seo配置静态导出将上一节的next.config.js写入项目根目录创建区块在src/components/sections/下按落地页区块表逐个实现 Hero、Features、Testimonials、Pricing、CTA并在page.tsx中组合本地开发验证npm run dev在开发服务器中核对页面效果后执行npm run build确认静态导出产物生成于out/目录再执行npx serve out或任意静态服务器本地验证产物行为。部署一次构建随处托管由于output: export的产物是纯静态文件部署矩阵覆盖所有主流静态托管方式平台方式Vercel自动Auto识别静态导出并直接发布Netlify自动AutoGitHub Pages推送到gh-pages分支任意主机上传out文件夹即可值得说明的实践细节Vercel / Netlify连上 Git 仓库后平台自动检测 Next.js 项目并执行构建output: export的项目会被当作纯静态站点发布无需额外配置GitHub Pages需要把构建产物out/的内容部署到gh-pages分支可配合 GitHub Actions 在 CI 中构建并推送任意主机 / 对象存储直接把out/目录上传到 Nginx、Apache、S3 静态网站托管等即可上线无需 Node.js 运行时。由于trailingSlash: true部署时建议确认托管方对/about/这类带尾斜杠路径的映射一致避免 404。最佳实践清单模板在结尾给出了四条工程质量准则可视为本模板的验收标准静态导出换取最大性能output: export让整站只有静态资源首屏加载与缓存命中率达到静态方案的上限Framer Motion 提供高级动画用声明式的动效提升品牌质感但保持克制、以转化目标为准移动优先的响应式设计所有区块按 Tailwind 的sm:/md:/lg:断点自移动端向上构建每个页面都有 SEO 元数据借助 Next SEO 为layout.tsx与每个路由设置title、description、OG 标签确保落地页在搜索结果与社交分享中呈现良好。此外结合 app-builder 技能的整体约束使用本模板时还需注意模板适用于与 Landing Page / 作品集 / 营销页明确匹配的任务产物上线前仍需经过环境验证、测试与专家评审模板输出不能替代针对具体环境的校验。小结nextjs-static是 agentic-awesome-skills 仓库中面向「落地页 / 作品集 / 营销站点」场景的精简模板用 Next.js 14 静态导出保证性能与部署自由度用 Framer Motion Tailwind CSS 支撑视觉与动效用五个标准区块覆盖完整转化漏斗。当你向 app-builder 发起landing、portfolio或marketing类需求时技能会自动路由到本模板按「创建项目 → 装依赖 → 配导出 → 建区块 → 开发验证」五步即可在几分钟内得到可部署到任意静态托管的站点。赞分享AI 技能AI 插件人工智能【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills点击查看免费下载相关推荐基于 Next.js 14 静态导出模板构建高性能落地页与营销站点Dillinger 实践指南基于 Next.js 14 静态导出模板构建高性能落地页与营销站点Dillinger 实践指南 本文以仓库内 .agent/skills/app build前端开发工具Next.js 静态导出Static Export实战指南以 with-static-export 示例构建纯静态站点Next.js 静态导出Static Export实战指南以 with static export 示例构建纯静态站点 在 Next.js 中开启静态导出前端Web框架SSR后端如何用 ipatool 从 App Store 下载 IPA 文件认证、取包、拿历史版本一次讲清如何用 ipatool 从 App Store 下载 IPA 文件认证、取包、拿历史版本一次讲清 想分析某个 App 的某个旧版本却发现手机里只能装到最新版CLI上一篇用Python解析HTML页面XPath与Beautiful Soup从入门到实战Python-100-Days下一篇Backstage 后端插件扩展点Extension Points完整指南从定义到设计实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 基于 Next.js 静态导出的高转化落地页模板：AAS 项目 nextjs-static 实战指南
AI 技能AI 插件人工智能【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills点击查看免费下载本文以 agentic-awesome-skills 仓库中app-builder技能的nextjs-static项目模板为核心系统讲解如何用 Next.js 14 静态导出 TypeScript Tailwind CSS Framer Motion 搭建 Landing Page、个人作品集与营销站点。读完本文你将掌握静态导出的完整配置、落地页区块的组织方法、动画模式的选择依据以及一键部署到任意静态托管的完整流程。该模板位于 plugins/agentic-awesome-skills-claude/skills/app-builder/templates/nextjs-static/TEMPLATE.md是 app-builder 技能提供的 13 个项目模板之一。在技能编排体系中当用户请求中出现portfolio、personal、cv、landing、promotional、marketing等关键词时项目类型检测 会将其归类为「Portfolio / Landing Page」并精确路由到本模板只读取本模板文件即可开始搭建无需加载其他模板。技术栈选型模板规定的技术栈如下组件技术选型框架Next.js 14静态导出 Static Export语言TypeScript样式Tailwind CSS动画Framer Motion图标Lucide ReactSEONext SEO这套组合的核心设计意图非常明确静态站点追求极致的首屏性能与部署简单性因此刻意不引入数据库、认证等后端依赖。需要说明的是仓库中 tech-stack.md 记录的 2025 默认 Web 栈是 Next.js 16 Tailwind CSS v4 React 19 Server Components Turbopack而本模板固定标注 Next.js 14是因为output: export静态导出模式在 14 版本已完全成熟稳定。如果你新建项目时使用更新版本的 Next.js本模板的目录结构与导出配置依然适用。TypeScript为模板中的{{name}}占位符、路由与组件提供类型约束配合路径别名减少深层相对导入Tailwind CSS移动优先的原子化样式模板中所有落地页区块均按 Tailwind 的响应式类组织Framer Motion负责入场、滚动显现与悬停动效是模板强调「premium animations」的载体Lucide React轻量图标库供 Hero、Features 等区块使用Next SEO为每个页面注入统一的title、description、OG 标签等元信息。目录结构设计模板给出了一个精简、职责分明的目录骨架project-name/ ├── src/ │ ├── app/ │ │ ├── layout.tsx │ │ ├── page.tsx # Landing │ │ ├── about/ │ │ ├── contact/ │ │ └── blog/ │ ├── components/ │ │ ├── layout/ # Header, Footer │ │ ├── sections/ # Hero, Features, CTA │ │ └── ui/ │ └── lib/ ├── content/ # Markdown content ├── public/ └── next.config.js各部分的职责划分与仓库中 scaffolding.md 倡导的「薄路由 组件分层」理念一脉相承src/app/Next.js App Router 路由层layout.tsx定义全局布局Header/Footer、字体、SEO 元信息page.tsx是落地首页about/、contact/、blog/是二级路由各自拥有独立page.tsxsrc/components/layout/站点级框架组件Header、Footer全站复用src/components/sections/落地页的「段落级」组件如 Hero、Features、CTA每个区块一个文件便于独立增删与调整顺序src/components/ui/可复用的基础 UI 组件按钮、卡片、标签等与 scaffolding.md 中shared/components/ui/的分层思路一致content/存放 Markdown 内容如博客文章、案例内容配合静态导出在构建期转为 HTMLpublic/静态资源目录favicon、logo、图片等无需经过打包直接引用next.config.js承载静态导出配置见下一节。静态导出配置一行决定「纯静态」模板给出的next.config.js是整个技术方案的关键// next.config.js const nextConfig { output: export, images: { unoptimized: true }, trailingSlash: true, };三个配置项的含义与影响如下配置项作用说明output: export构建时生成纯静态 HTML/CSS/JS禁用所有 Node.js 运行时能力无 API Routes、无 Server Actions、无 middlewarenext build产物可直接由任意静态服务器托管images: { unoptimized: true }关闭 Next.js 内置图片优化静态导出模式下没有图片优化服务必须关闭否则next/image会在构建或运行时报错同时意味着图片应自行压缩trailingSlash: true生成/about/形式的路径路径带尾部斜杠对多数静态托管与 CDN 缓存更友好避免目录重定向配套的目录结构也隐含了静态站的数据策略content/目录中的 Markdown 通过构建期的读取例如在getStaticProps或 App Router 的generateStaticParams中读取在构建时生成页面运行期不再有服务端计算这保证了任意主机上的一致表现。落地页区块组织模板将落地页划分为五个标准区块构成一条完整的转化漏斗区块目的Hero主标题Main headline CTA 按钮用户的第一印象决定首屏停留Features产品核心卖点/利益点列表Testimonials客户证言提供社交证明Social proofPricing定价方案CTA最终转化行动点在src/components/sections/下每个区块对应一个组件Hero.tsx、Features.tsx、Testimonials.tsx、Pricing.tsx、CTA.tsx在page.tsx中按序组合。这种「区块即组件」的组织方式有两个实战优势顺序可调调整区块顺序只需改page.tsx中的组件排列无需动区块内部逻辑可复用各区块也可被about/、contact/等二级页面按需复用避免重复实现。动画模式Framer Motion 四种用法模板归纳了四种高频动画模式模式适用场景Fade up淡入上移内容入场Content entry最通用的段落显现效果Stagger错落列表项List items如 Features 列表逐条依次显现Scroll reveal滚动显现进入视口时触发On viewport提升长页面的节奏感Hover悬停交互反馈Interactive feedback按钮、卡片、链接的悬停微动效结合 Framer Motion 的 API四种模式对应的实现要点为Fade upmotion.div配合initial{{ opacity: 0, y: 24 }}与whileInView/animate完成透明度与位移的入场Stagger父容器使用staggerChildren变体子项设置各自的hidden/show变体实现列表依次浮现Scroll reveal使用whileInView{{ opacity: 1 }}与viewport{{ once: true }}保证元素进入视口才显现且只播放一次HoverwhileHover{{ scale: 1.05 }}等属性提供即时的鼠标反馈。动画应服务于转化而非分散注意力模板将 Fade up / Scroll reveal 用于内容节奏、Hover 用于可交互元素正是「premium animations」与可用性之间的平衡。从零搭建五步上手模板给出了可直接执行的初始化流程创建项目{{name}}为项目名占位符实际创建时替换为你的项目名npx create-next-app {{name}} --typescript --tailwind --app--typescript启用 TypeScript--tailwind预装 Tailwind CSS--app使用 App Router与模板目录结构完全对齐安装依赖npm install framer-motion lucide-react next-seo配置静态导出将上一节的next.config.js写入项目根目录创建区块在src/components/sections/下按落地页区块表逐个实现 Hero、Features、Testimonials、Pricing、CTA并在page.tsx中组合本地开发验证npm run dev在开发服务器中核对页面效果后执行npm run build确认静态导出产物生成于out/目录再执行npx serve out或任意静态服务器本地验证产物行为。部署一次构建随处托管由于output: export的产物是纯静态文件部署矩阵覆盖所有主流静态托管方式平台方式Vercel自动Auto识别静态导出并直接发布Netlify自动AutoGitHub Pages推送到gh-pages分支任意主机上传out文件夹即可值得说明的实践细节Vercel / Netlify连上 Git 仓库后平台自动检测 Next.js 项目并执行构建output: export的项目会被当作纯静态站点发布无需额外配置GitHub Pages需要把构建产物out/的内容部署到gh-pages分支可配合 GitHub Actions 在 CI 中构建并推送任意主机 / 对象存储直接把out/目录上传到 Nginx、Apache、S3 静态网站托管等即可上线无需 Node.js 运行时。由于trailingSlash: true部署时建议确认托管方对/about/这类带尾斜杠路径的映射一致避免 404。最佳实践清单模板在结尾给出了四条工程质量准则可视为本模板的验收标准静态导出换取最大性能output: export让整站只有静态资源首屏加载与缓存命中率达到静态方案的上限Framer Motion 提供高级动画用声明式的动效提升品牌质感但保持克制、以转化目标为准移动优先的响应式设计所有区块按 Tailwind 的sm:/md:/lg:断点自移动端向上构建每个页面都有 SEO 元数据借助 Next SEO 为layout.tsx与每个路由设置title、description、OG 标签确保落地页在搜索结果与社交分享中呈现良好。此外结合 app-builder 技能的整体约束使用本模板时还需注意模板适用于与 Landing Page / 作品集 / 营销页明确匹配的任务产物上线前仍需经过环境验证、测试与专家评审模板输出不能替代针对具体环境的校验。小结nextjs-static是 agentic-awesome-skills 仓库中面向「落地页 / 作品集 / 营销站点」场景的精简模板用 Next.js 14 静态导出保证性能与部署自由度用 Framer Motion Tailwind CSS 支撑视觉与动效用五个标准区块覆盖完整转化漏斗。当你向 app-builder 发起landing、portfolio或marketing类需求时技能会自动路由到本模板按「创建项目 → 装依赖 → 配导出 → 建区块 → 开发验证」五步即可在几分钟内得到可部署到任意静态托管的站点。赞分享AI 技能AI 插件人工智能【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills点击查看免费下载相关推荐基于 Next.js 14 静态导出模板构建高性能落地页与营销站点Dillinger 实践指南基于 Next.js 14 静态导出模板构建高性能落地页与营销站点Dillinger 实践指南 本文以仓库内 .agent/skills/app build前端开发工具Next.js 静态导出Static Export实战指南以 with-static-export 示例构建纯静态站点Next.js 静态导出Static Export实战指南以 with static export 示例构建纯静态站点 在 Next.js 中开启静态导出前端Web框架SSR后端如何用 ipatool 从 App Store 下载 IPA 文件认证、取包、拿历史版本一次讲清如何用 ipatool 从 App Store 下载 IPA 文件认证、取包、拿历史版本一次讲清 想分析某个 App 的某个旧版本却发现手机里只能装到最新版CLI上一篇用Python解析HTML页面XPath与Beautiful Soup从入门到实战Python-100-Days下一篇Backstage 后端插件扩展点Extension Points完整指南从定义到设计实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考