这是一个使用 Spotify API 的 Next.js 完全入门教程

在这段视频中，我与 Ebonie（又名MetalAndCoffee_）——一位网页开发者、金属 DJ 和 Twitch 主播——一起在 Next.js 中设置一个新项目，使用 Spotify API 来策划音乐推荐。

本视频教程深入讲解了 Next.js 应用程序的结构，适合完全的初学者。我还演示了一些技巧，帮助你提高项目的可访问性，并改善开发者的体验，包括如何使用便捷的 bash 脚本设置新的 Next.js 项目，以及如何在 Next.js 中避免使用相对路径导入。

在这个项目中，我们使用`getStaticProps()`在构建时从 Spotify 获取数据，从而生成无需客户端 JavaScript 即可运行的静态页面。我们还使用`getStaticPaths()`在构建时利用 Spotify API 提供的数据生成 100 多个动态路由。效果非常好！

源代码

在 GitHub 上查看此项目的代码。

视频概要

点击以下链接跳转到视频的相关部分。

• 项目描述
• 为什么要使用 Next.js？
• 使用动态路由构建 Next.js 应用程序
• 探索 Next.js 应用的文件夹结构
• Next.js 页面目录
• Next.js API 目录和无服务器函数
• Next.js 公共目录
• Next.js 样式目录
• 添加自定义的 _document.js 文件，以便在 HTML 标签上添加 lang 属性。
• 添加 jsconfig.json 文件以避免相对路径导入
• 首先编辑 pages/index.js
• Next.js Head 组件
• CSS Modules 能为你带来什么
• Next.js 页面文件的结构
• 使用 Next.js 进行数据获取
• 设置 getStaticProps() 并将数据传递给页面组件
• 在 Next.js 中使用环境变量和 .env 文件
• 使用 JavaScript fetch 从 Spotify 获取流派列表（getStaticProps() 方法）。
• 设置 getStaticPaths() 函数，以便使用来自 Spotify 的数据生成动态路由。
• 在 getStaticProps() 中使用动态路由参数从 Spotify 获取曲目推荐。
• 使用 Next.js Link 实现页面路由之间的客户端过渡
• 创建一个 React 组件来渲染 Spotify 曲目信息
• 使用 Next Image 优化图片，实现延迟加载、源集设置，并防止累积布局偏移。
• CSS模块文件命名规范以及如何构建可扩展的项目结构
• 使用增量静态重建 (ISR) 在服务器上重建数据更改后的网站

这段视频是2021年7月30日星期五在Twitch上直播录制的。