AI 技能AI 插件人工智能【免費(fèi)下載鏈接】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.項(xiàng)目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills點(diǎn)擊查看免費(fèi)下載本文以 agentic-awesome-skills 倉(cāng)庫(kù)中app-builder技能的nextjs-static項(xiàng)目模板為核心系統(tǒng)講解如何用 Next.js 14 靜態(tài)導(dǎo)出 TypeScript Tailwind CSS Framer Motion 搭建 Landing Page、個(gè)人作品集與營(yíng)銷(xiāo)站點(diǎn)。讀完本文你將掌握靜態(tài)導(dǎo)出的完整配置、落地頁(yè)區(qū)塊的組織方法、動(dòng)畫(huà)模式的選擇依據(jù)以及一鍵部署到任意靜態(tài)托管的完整流程。該模板位于 plugins/agentic-awesome-skills-claude/skills/app-builder/templates/nextjs-static/TEMPLATE.md是 app-builder 技能提供的 13 個(gè)項(xiàng)目模板之一。在技能編排體系中當(dāng)用戶請(qǐng)求中出現(xiàn)portfolio、personal、cv、landing、promotional、marketing等關(guān)鍵詞時(shí)項(xiàng)目類(lèi)型檢測(cè) 會(huì)將其歸類(lèi)為「Portfolio / Landing Page」并精確路由到本模板只讀取本模板文件即可開(kāi)始搭建無(wú)需加載其他模板。技術(shù)棧選型模板規(guī)定的技術(shù)棧如下組件技術(shù)選型框架Next.js 14靜態(tài)導(dǎo)出 Static Export語(yǔ)言TypeScript樣式Tailwind CSS動(dòng)畫(huà)Framer Motion圖標(biāo)Lucide ReactSEONext SEO這套組合的核心設(shè)計(jì)意圖非常明確靜態(tài)站點(diǎn)追求極致的首屏性能與部署簡(jiǎn)單性因此刻意不引入數(shù)據(jù)庫(kù)、認(rèn)證等后端依賴(lài)。需要說(shuō)明的是倉(cāng)庫(kù)中 tech-stack.md 記錄的 2025 默認(rèn) Web 棧是 Next.js 16 Tailwind CSS v4 React 19 Server Components Turbopack而本模板固定標(biāo)注 Next.js 14是因?yàn)閛utput: export靜態(tài)導(dǎo)出模式在 14 版本已完全成熟穩(wěn)定。如果你新建項(xiàng)目時(shí)使用更新版本的 Next.js本模板的目錄結(jié)構(gòu)與導(dǎo)出配置依然適用。TypeScript為模板中的{{name}}占位符、路由與組件提供類(lèi)型約束配合路徑別名減少深層相對(duì)導(dǎo)入Tailwind CSS移動(dòng)優(yōu)先的原子化樣式模板中所有落地頁(yè)區(qū)塊均按 Tailwind 的響應(yīng)式類(lèi)組織Framer Motion負(fù)責(zé)入場(chǎng)、滾動(dòng)顯現(xiàn)與懸停動(dòng)效是模板強(qiáng)調(diào)「premium animations」的載體Lucide React輕量圖標(biāo)庫(kù)供 Hero、Features 等區(qū)塊使用Next SEO為每個(gè)頁(yè)面注入統(tǒng)一的title、description、OG 標(biāo)簽等元信息。目錄結(jié)構(gòu)設(shè)計(jì)模板給出了一個(gè)精簡(jiǎn)、職責(zé)分明的目錄骨架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各部分的職責(zé)劃分與倉(cāng)庫(kù)中 scaffolding.md 倡導(dǎo)的「薄路由 組件分層」理念一脈相承src/app/Next.js App Router 路由層layout.tsx定義全局布局Header/Footer、字體、SEO 元信息page.tsx是落地首頁(yè)about/、contact/、blog/是二級(jí)路由各自擁有獨(dú)立page.tsxsrc/components/layout/站點(diǎn)級(jí)框架組件Header、Footer全站復(fù)用src/components/sections/落地頁(yè)的「段落級(jí)」組件如 Hero、Features、CTA每個(gè)區(qū)塊一個(gè)文件便于獨(dú)立增刪與調(diào)整順序src/components/ui/可復(fù)用的基礎(chǔ) UI 組件按鈕、卡片、標(biāo)簽等與 scaffolding.md 中shared/components/ui/的分層思路一致content/存放 Markdown 內(nèi)容如博客文章、案例內(nèi)容配合靜態(tài)導(dǎo)出在構(gòu)建期轉(zhuǎn)為 HTMLpublic/靜態(tài)資源目錄favicon、logo、圖片等無(wú)需經(jīng)過(guò)打包直接引用next.config.js承載靜態(tài)導(dǎo)出配置見(jiàn)下一節(jié)。靜態(tài)導(dǎo)出配置一行決定「純靜態(tài)」模板給出的next.config.js是整個(gè)技術(shù)方案的關(guān)鍵// next.config.js const nextConfig { output: export, images: { unoptimized: true }, trailingSlash: true, };三個(gè)配置項(xiàng)的含義與影響如下配置項(xiàng)作用說(shuō)明output: export構(gòu)建時(shí)生成純靜態(tài) HTML/CSS/JS禁用所有 Node.js 運(yùn)行時(shí)能力無(wú) API Routes、無(wú) Server Actions、無(wú) middlewarenext build產(chǎn)物可直接由任意靜態(tài)服務(wù)器托管images: { unoptimized: true }關(guān)閉 Next.js 內(nèi)置圖片優(yōu)化靜態(tài)導(dǎo)出模式下沒(méi)有圖片優(yōu)化服務(wù)必須關(guān)閉否則next/image會(huì)在構(gòu)建或運(yùn)行時(shí)報(bào)錯(cuò)同時(shí)意味著圖片應(yīng)自行壓縮trailingSlash: true生成/about/形式的路徑路徑帶尾部斜杠對(duì)多數(shù)靜態(tài)托管與 CDN 緩存更友好避免目錄重定向配套的目錄結(jié)構(gòu)也隱含了靜態(tài)站的數(shù)據(jù)策略content/目錄中的 Markdown 通過(guò)構(gòu)建期的讀取例如在getStaticProps或 App Router 的generateStaticParams中讀取在構(gòu)建時(shí)生成頁(yè)面運(yùn)行期不再有服務(wù)端計(jì)算這保證了任意主機(jī)上的一致表現(xiàn)。落地頁(yè)區(qū)塊組織模板將落地頁(yè)劃分為五個(gè)標(biāo)準(zhǔn)區(qū)塊構(gòu)成一條完整的轉(zhuǎn)化漏斗區(qū)塊目的Hero主標(biāo)題Main headline CTA 按鈕用戶的第一印象決定首屏停留Features產(chǎn)品核心賣(mài)點(diǎn)/利益點(diǎn)列表Testimonials客戶證言提供社交證明Social proofPricing定價(jià)方案CTA最終轉(zhuǎn)化行動(dòng)點(diǎn)在src/components/sections/下每個(gè)區(qū)塊對(duì)應(yīng)一個(gè)組件Hero.tsx、Features.tsx、Testimonials.tsx、Pricing.tsx、CTA.tsx在page.tsx中按序組合。這種「區(qū)塊即組件」的組織方式有兩個(gè)實(shí)戰(zhàn)優(yōu)勢(shì)順序可調(diào)調(diào)整區(qū)塊順序只需改page.tsx中的組件排列無(wú)需動(dòng)區(qū)塊內(nèi)部邏輯可復(fù)用各區(qū)塊也可被about/、contact/等二級(jí)頁(yè)面按需復(fù)用避免重復(fù)實(shí)現(xiàn)。動(dòng)畫(huà)模式Framer Motion 四種用法模板歸納了四種高頻動(dòng)畫(huà)模式模式適用場(chǎng)景Fade up淡入上移內(nèi)容入場(chǎng)Content entry最通用的段落顯現(xiàn)效果Stagger錯(cuò)落列表項(xiàng)List items如 Features 列表逐條依次顯現(xiàn)Scroll reveal滾動(dòng)顯現(xiàn)進(jìn)入視口時(shí)觸發(fā)On viewport提升長(zhǎng)頁(yè)面的節(jié)奏感Hover懸停交互反饋Interactive feedback按鈕、卡片、鏈接的懸停微動(dòng)效結(jié)合 Framer Motion 的 API四種模式對(duì)應(yīng)的實(shí)現(xiàn)要點(diǎn)為Fade upmotion.div配合initial{{ opacity: 0, y: 24 }}與whileInView/animate完成透明度與位移的入場(chǎng)Stagger父容器使用staggerChildren變體子項(xiàng)設(shè)置各自的hidden/show變體實(shí)現(xiàn)列表依次浮現(xiàn)Scroll reveal使用whileInView{{ opacity: 1 }}與viewport{{ once: true }}保證元素進(jìn)入視口才顯現(xiàn)且只播放一次HoverwhileHover{{ scale: 1.05 }}等屬性提供即時(shí)的鼠標(biāo)反饋。動(dòng)畫(huà)應(yīng)服務(wù)于轉(zhuǎn)化而非分散注意力模板將 Fade up / Scroll reveal 用于內(nèi)容節(jié)奏、Hover 用于可交互元素正是「premium animations」與可用性之間的平衡。從零搭建五步上手模板給出了可直接執(zhí)行的初始化流程創(chuàng)建項(xiàng)目{{name}}為項(xiàng)目名占位符實(shí)際創(chuàng)建時(shí)替換為你的項(xiàng)目名npx create-next-app {{name}} --typescript --tailwind --app--typescript啟用 TypeScript--tailwind預(yù)裝 Tailwind CSS--app使用 App Router與模板目錄結(jié)構(gòu)完全對(duì)齊安裝依賴(lài)npm install framer-motion lucide-react next-seo配置靜態(tài)導(dǎo)出將上一節(jié)的next.config.js寫(xiě)入項(xiàng)目根目錄創(chuàng)建區(qū)塊在src/components/sections/下按落地頁(yè)區(qū)塊表逐個(gè)實(shí)現(xiàn) Hero、Features、Testimonials、Pricing、CTA并在page.tsx中組合本地開(kāi)發(fā)驗(yàn)證npm run dev在開(kāi)發(fā)服務(wù)器中核對(duì)頁(yè)面效果后執(zhí)行npm run build確認(rèn)靜態(tài)導(dǎo)出產(chǎn)物生成于out/目錄再執(zhí)行npx serve out或任意靜態(tài)服務(wù)器本地驗(yàn)證產(chǎn)物行為。部署一次構(gòu)建隨處托管由于output: export的產(chǎn)物是純靜態(tài)文件部署矩陣覆蓋所有主流靜態(tài)托管方式平臺(tái)方式Vercel自動(dòng)Auto識(shí)別靜態(tài)導(dǎo)出并直接發(fā)布Netlify自動(dòng)AutoGitHub Pages推送到gh-pages分支任意主機(jī)上傳out文件夾即可值得說(shuō)明的實(shí)踐細(xì)節(jié)Vercel / Netlify連上 Git 倉(cāng)庫(kù)后平臺(tái)自動(dòng)檢測(cè) Next.js 項(xiàng)目并執(zhí)行構(gòu)建output: export的項(xiàng)目會(huì)被當(dāng)作純靜態(tài)站點(diǎn)發(fā)布無(wú)需額外配置GitHub Pages需要把構(gòu)建產(chǎn)物out/的內(nèi)容部署到gh-pages分支可配合 GitHub Actions 在 CI 中構(gòu)建并推送任意主機(jī) / 對(duì)象存儲(chǔ)直接把out/目錄上傳到 Nginx、Apache、S3 靜態(tài)網(wǎng)站托管等即可上線無(wú)需 Node.js 運(yùn)行時(shí)。由于trailingSlash: true部署時(shí)建議確認(rèn)托管方對(duì)/about/這類(lèi)帶尾斜杠路徑的映射一致避免 404。最佳實(shí)踐清單模板在結(jié)尾給出了四條工程質(zhì)量準(zhǔn)則可視為本模板的驗(yàn)收標(biāo)準(zhǔn)靜態(tài)導(dǎo)出換取最大性能output: export讓整站只有靜態(tài)資源首屏加載與緩存命中率達(dá)到靜態(tài)方案的上限Framer Motion 提供高級(jí)動(dòng)畫(huà)用聲明式的動(dòng)效提升品牌質(zhì)感但保持克制、以轉(zhuǎn)化目標(biāo)為準(zhǔn)移動(dòng)優(yōu)先的響應(yīng)式設(shè)計(jì)所有區(qū)塊按 Tailwind 的sm:/md:/lg:斷點(diǎn)自移動(dòng)端向上構(gòu)建每個(gè)頁(yè)面都有 SEO 元數(shù)據(jù)借助 Next SEO 為layout.tsx與每個(gè)路由設(shè)置title、description、OG 標(biāo)簽確保落地頁(yè)在搜索結(jié)果與社交分享中呈現(xiàn)良好。此外結(jié)合 app-builder 技能的整體約束使用本模板時(shí)還需注意模板適用于與 Landing Page / 作品集 / 營(yíng)銷(xiāo)頁(yè)明確匹配的任務(wù)產(chǎn)物上線前仍需經(jīng)過(guò)環(huán)境驗(yàn)證、測(cè)試與專(zhuān)家評(píng)審模板輸出不能替代針對(duì)具體環(huán)境的校驗(yàn)。小結(jié)nextjs-static是 agentic-awesome-skills 倉(cāng)庫(kù)中面向「落地頁(yè) / 作品集 / 營(yíng)銷(xiāo)站點(diǎn)」場(chǎng)景的精簡(jiǎn)模板用 Next.js 14 靜態(tài)導(dǎo)出保證性能與部署自由度用 Framer Motion Tailwind CSS 支撐視覺(jué)與動(dòng)效用五個(gè)標(biāo)準(zhǔn)區(qū)塊覆蓋完整轉(zhuǎn)化漏斗。當(dāng)你向 app-builder 發(fā)起landing、portfolio或marketing類(lèi)需求時(shí)技能會(huì)自動(dòng)路由到本模板按「創(chuàng)建項(xiàng)目 → 裝依賴(lài) → 配導(dǎo)出 → 建區(qū)塊 → 開(kāi)發(fā)驗(yàn)證」五步即可在幾分鐘內(nèi)得到可部署到任意靜態(tài)托管的站點(diǎn)。贊分享AI 技能AI 插件人工智能【免費(fèi)下載鏈接】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.項(xiàng)目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills點(diǎn)擊查看免費(fèi)下載相關(guān)推薦基于 Next.js 14 靜態(tài)導(dǎo)出模板構(gòu)建高性能落地頁(yè)與營(yíng)銷(xiāo)站點(diǎn)Dillinger 實(shí)踐指南基于 Next.js 14 靜態(tài)導(dǎo)出模板構(gòu)建高性能落地頁(yè)與營(yíng)銷(xiāo)站點(diǎn)Dillinger 實(shí)踐指南 本文以倉(cāng)庫(kù)內(nèi) .agent/skills/app build前端開(kāi)發(fā)工具Next.js 靜態(tài)導(dǎo)出Static Export實(shí)戰(zhàn)指南以 with-static-export 示例構(gòu)建純靜態(tài)站點(diǎn)Next.js 靜態(tài)導(dǎo)出Static Export實(shí)戰(zhàn)指南以 with static export 示例構(gòu)建純靜態(tài)站點(diǎn) 在 Next.js 中開(kāi)啟靜態(tài)導(dǎo)出前端Web框架SSR后端如何用 ipatool 從 App Store 下載 IPA 文件認(rèn)證、取包、拿歷史版本一次講清如何用 ipatool 從 App Store 下載 IPA 文件認(rèn)證、取包、拿歷史版本一次講清 想分析某個(gè) App 的某個(gè)舊版本卻發(fā)現(xiàn)手機(jī)里只能裝到最新版CLI上一篇用Python解析HTML頁(yè)面XPath與Beautiful Soup從入門(mén)到實(shí)戰(zhàn)Python-100-Days下一篇Backstage 后端插件擴(kuò)展點(diǎn)Extension Points完整指南從定義到設(shè)計(jì)實(shí)踐創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考