lug-front
基于Next.js框架的现代化前端项目脚手架
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：lug-front。 它的用途是：基于Next.js框架的现代化前端项目脚手架 完整的 Skill 内容见：https://321skill.com/skills/lug-front/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要创建一个新的企业官网项目，请基于lug-front这个Next.js模板为我初始化项目结构，并解释一下`app`目录和`pages`目录的区别。”，它会引导你克隆仓库、安装依赖并启动项目，同时解释Next.js App Router的最新架构理念。
介绍
这是一个基于Next.js框架创建的前端项目模板，旨在帮助开发者快速启动和构建现代化的Web应用程序。它提供了一个标准化的开发起点，内置了Next.js的最佳实践和工具链，如开发服务器、字体优化等，有效解决了从零开始配置项目环境的繁琐问题。
使用方式非常简单，开发者只需克隆仓库并运行npm run dev等命令即可启动本地开发服务器，通过浏览器访问localhost:3000实时查看和编辑页面效果。项目结构清晰，遵循Next.js App Router约定，便于开发者理解和扩展。
该模板非常适合需要快速构建高性能、SEO友好型网站或Web应用的前端开发者、全栈开发者以及高校学生用于学习或完成课程项目。对于希望专注于业务逻辑而非底层配置的团队来说，也是一个高效的起点。
建议在使用前确保本地已安装Node.js环境。虽然此模板提供了良好的基础，但在用于生产环境前，仍需根据具体业务需求进行定制化开发、安全加固和性能优化。对于需要复杂后端逻辑或特定UI库的项目，可能需要额外集成。
核心特点
此Skill直接基于Next.js官方`create-next-app`工具生成，确保了与最新Next.js特性和最佳实践的同步，避免了手动配置可能引入的版本兼容性或配置错误问题。它提供了一个纯净、标准化的起点，而非一个预设了大量第三方库的臃肿模板。
注意事项
不适合需要特定技术栈（如特定UI库、状态管理方案）或复杂预设功能（如用户认证、数据库连接）的项目快速启动。
常见问题
如何修改默认的启动端口？
可以在`package.json`的dev脚本中添加`-p`参数，例如修改为`next dev -p 8080`。
这个模板包含TypeScript吗？
是的，这是一个TypeScript项目，文件扩展名为`.tsx`和`.ts`。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/lug-front/raw/index.md 读取 lug-front 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/lug-front/raw/index.md（查看排版版本）