我使用 t3-stack（Next.js）创建了一个全栈且类型安全的个人网站！

简介

首先，非常感谢 Dev.to 上超过 1000 位粉丝的支持！我简直不敢相信我们能走到今天这一步。我甚至从未想过自己能走到今天。非常感谢所有粉丝和阅读我内容的朋友们，爱你们！

如果你是一名 Web 开发者，那么你肯定需要在某个时候搭建一个作品集网站或个人网站，毕竟每个开发者都有自己独特的方法，使用独特的框架。但说到作品集网站，大多数都只注重前端，很少甚至没有后端，但我的情况并非如此。

Next.js 一直是我构建 Web 应用的首选，但我希望为我的网站提供一个类型安全的全栈解决方案，所以我决定使用t3-stack ！我是create-t3-app的忠实粉丝，也是其代码库的维护者。这篇博客并非教程，更像是我个人网站的一次演练和探索。

最初的想法

我最初的想法是一个极简的网站，导航栏尽量简洁，看起来更像侧边栏。设计灵感多少受到了leerob 网站的启发。除此之外，我还希望我的网站能够显示一些很酷的动态实时数据，比如我的 Spotify 数据、从dev.to获取的博客文章，以及一个可以给我留言的留言簿！

注意：如果您不想读到最后，可以访问此处的网站并在此处查看源代码。如果您喜欢，别忘了给项目点个星！

堆栈

正如我已经说过的，我在我的网站上使用了 t3-stack，它基本上由以下部分组成：

• Next.js 作为框架
• Tailwind CSS 用于样式
• Prisma 作为 ORM
• 用于类型安全 API 的 tRPC
• NextAuth.js 用于身份验证

您会惊讶地发现，我在我的个人网站上使用了所有这些令人惊叹的技术！

主页

构建 Web 应用时，我首先要做的就是制作它的首页。我上面已经提到过我想要的导航栏是什么样子，我的设计灵感来自 leerob.io。现在，是时候实现它了。在花费大量时间使用 Tailwind CSS 进行调试和构建之后，我终于制作出了这个我非常喜欢的首页——

主页在移动版本上看起来有点不同 -

静态页面

现在我想构建的下一个东西是静态页面，例如/about，/now和/links。第一个听起来很清楚，它是“关于我”页面。/now它包含我最近在做什么的信息，/links并将我的所有链接列在一个页面上。

前两个时代内容非常丰富，所以我决定使用 Markdown 和Tailwind 的排版插件进行样式设计。我还使用了Showdown来获取 Markdown 并将其转换为 HTML。以上代码可以在网站的 GitHub 仓库中找到。

链接页面是使用map()包含所有链接信息的对象中的函数生成的，如下所示 -

export type Link = {
  name: string;
  url: string;
  value: string;
  icon: IconType;
};
export type Links = Link[];

export const links: Links = [
  {
    name: "Discord",
    url: "https://discord.com/users/784363251940458516",
    value: "asheeshh#4872",
    icon: SiDiscord,
  },
  {
    name: "GitHub",
    url: "https://github.com/asrvd",
    value: "@asrvd",
    icon: SiGithub,
  },
    ...
]

注意，所有代码都是类型安全的，这是 Web 开发者的最佳实践之一。类型安全不应该是可有可无的。IconType 是从 react-icons 库导入的。

Spotify 统计页面

精彩的部分开始了，Spotify 统计页面是通过获取我的 Spotify 数据（例如“当前正在播放的歌曲”、“热门艺术家”和“热门曲目”）制作的，这些数据都是从last.fm API 获取的。我使用了 SWR 进行数据获取，这使得构建类型安全的数据获取非常容易。

我为每个 API 都设置了 3 个不同的路由，这些路由会过滤掉响应，这样我就能只获取我正在使用的内容，这也有助于简化类型安全。页面会实时更新。页面如下所示：

留言簿

这是我个人网站里我最喜欢的部分，我非常喜欢这个概念。这个想法源自leerob 的留言簿。我想做一个类似的功能，让人们可以在网站上给我和其他人留言。

后端组件就派上用场了，比如数据库、tRPC、身份验证和 Prisma。我的数据库使用了Planetscale 的免费套餐。整个后端都是使用 tRPC 和 Prisma 构建的，它们都兼顾了类型安全，并且拥有绝对出色的 DX 性能。

基本上，每当有人访问留言簿页面时，他们都可以看到所有之前发布的消息，但必须登录才能发布消息。NextAuth.js 使在 Next.js 中实现身份验证变得非常容易。登录后，您可以发送最多 100 个字的短信，并使用Zod进行验证。

前往留言簿，发送您自己的留言。页面如下：

Cmd+K 界面

我还在我的网站上添加了一个 Cmd+K 界面，以便更轻松地进行无鼠标导航。它使用kbar和 Tailwind CSS 样式制作。它的外观如下：

结论

总的来说，我非常喜欢这个网站最终的呈现效果，我还计划添加更多页面和更酷炫的功能！如果您正在寻找这个网站，它是使用 Vercel @ asrvd.me部署的，源代码可以在GitHub Repo上找到。

感谢阅读，下篇博客再见！