DEV Community
·
使用React、TypeScript和Next.js构建吉他音阶可视化应用
💡
原文英文，约5000词，阅读约需18分钟。
📝
内容提要
本文介绍了一款使用React、TypeScript和Next.js开发的吉他音阶可视化应用。用户可以选择根音和音阶类型，应用通过静态页面生成优化SEO，方便用户探索吉他指板上的音符和音阶模式。
🎯
关键要点
- 本文介绍了一款使用React、TypeScript和Next.js开发的吉他音阶可视化应用。
- 用户可以选择根音和音阶类型，应用通过静态页面生成优化SEO。
- 应用包含两个主要视图：主页显示吉他指板上的所有音符，音阶页面允许用户选择根音和音阶。
- 为了确保SEO友好，应用采用静态页面生成，而非单页应用。
- 主页实现了NotesPage组件，使用了RadzionKit提供的样式组件。
- 应用通过Meta标签和标题来提升在搜索引擎中的排名。
- 使用ChatGPT生成内容时，保持项目背景信息以提高AI的理解能力。
- 应用的音阶选择包括大调、小调、布鲁斯、德里安、米克索利迪安、弗里吉亚、和声小调和旋律小调。
- 音阶页面使用动态路由，用户可以选择音阶类型、根音和音阶名称。
- 应用的代码包含在TypeScript单体仓库中，使用Next.js构建，依赖静态站点生成。
- 应用通过useChangeScale钩子更新URL，以便用户在更改音阶时重定向。
- 生成静态页面以提高SEO，使用getStaticPaths和getStaticProps函数。
- 音阶页面根据用户选择的音阶类型和根音动态生成标题和描述。
- 应用允许用户可视化音阶和五声音阶，帮助吉他手更好地理解指板。
❓
延伸问答
这款吉他音阶可视化应用的主要功能是什么？
该应用允许用户选择根音和音阶类型，并可视化吉他指板上的音符和音阶模式。
为什么选择使用静态页面生成而不是单页应用？
静态页面生成有助于优化SEO，且成本低，因为不需要服务器支持，可以通过CDN免费或低成本提供页面。
用户如何选择音阶类型和根音？
用户可以通过应用的控制面板选择音阶类型（如大调、小调等）和根音（12个音符中的任意一个）。
应用是如何提高搜索引擎排名的？
应用通过使用Meta标签和标题来提升在搜索引擎中的排名，同时生成静态页面以提高SEO友好性。
应用中包含哪些音阶类型？
应用包含大调、小调、布鲁斯、德里安、米克索利迪安、弗里吉亚、和声小调和旋律小调等音阶类型。
如何在应用中可视化五声音阶？
当选择五声音阶时，应用会显示五个五声音阶模式，每个模式在独立的指板上展示。
➡️
