使用 Next.js 13 的 RSC 重写了个人站点

[tukon479]

花了点时间把原本被人称为很二次元风格的个人站点重写了，刚好试试 Next.js 13 的 App Router ，然后尝试了一种新的简洁风。有优秀的 SEO 性能，并在 LightHouse 中 Performance > 90%，Best practice > 90%。

技术栈除了 Next.js 之外，还用了 Framer motion ，Radix ，Tailwind ，Jotai 。

已经开源欢迎锐评。

Repo: https://github.com/Innei/Shiro

Preview: https://innei.in

[haolongsun]

tql,不过状态信息怎么实现的呀，就当前能知道正在做什么这个，是本地有一个监控程序？

[tukon479]

@haolongsun 有个上报程序，简单用 swift 写了一个

[wmwm]

UI 做的实在是好看👍。我也是用 nextjs13 app router 写的 https://wmwm.me ，界面没你这么炫酷。图床是用 minio 搭建的，用户注册时的邮箱验证码是用 docker-mailserver 搭建的，评论系统是基于 mariadb 数据库搭建的，markdown 的解析用的是 unified.js

[x77]

简历也放？

[ChrisFreeMan]

简约美观👍

[zsj1029]

已 star 非常棒，最佳实践很难得，学习一下

[tukon479]

@zsj1029 感谢

[knightdf]

后端仔表示真牛逼

[tyzandhr]

捉虫：
https://innei.in/about#性格属性 中，“体制弱者”应为“体育弱者”
https://innei.in/about#兴趣爱好 中，“二次元傻 ruan”应为“二次元傻 luan”

[theprimone]

点击切换主题之后的变化有点秀啊，看了下代码，见都没见过的 API 😦

[Xusually]

捉虫：
https://status.innei.in/status/main
最下面
WebDva -> WebDav

[chenzhe]

别的地方点击切换页面之后都没遇到这个问题，在导航栏点完 [手记] 之后，无法只用浏览器的前进或后台来切换页面。

[tukon479]

@tyzandhr 感谢指出已改正

[tukon479]

@chenzhe 感谢反馈

[lemayi]

非常棒的最佳实践代码！感谢 OP ！

[tukon479]

@theprimone 实验性的 API 从 vitepress ~~抄的~~

[zkaip]

马克，共同学习。

[rus4db]

好看

[Keyblade]

https://laobinghu.top/
这个怎么跟你的长得一模一样的..

[Keyblade]

@Keyblade #19 对不起没仔细看，才看到楼主是主题作者..分享了的

[Promisei]

请问一下大佬们，你们博客的 UI 设计是怎么想出来的，我自己也想做一个，但就是 Ui 界面没有头绪

[tukon479]

@Promisei 抄就对了

[fxixixixixi]

好看好看👍，我想借鉴借鉴

[cyberpoint]

请教个问题。jotai 的状态怎么在 react 外部修改和清除。我看新的官网文档写了可以在外部操作了。但是具体方法没找到。

[GTim]

部署的时候用的什么套件？我也想做一个，就是还没下定决心要怎么部署

[hua123s]

@cyberpoint https://jotai.org/docs/core/store store.set

[codenotkey]

好像有点交互小问题，复现方法。
1.点开一篇文章（弹出了文章 dialog ），
2.使用带有快速前进和返回的鼠标，url 在变化，
3.但 dialog 挡住了页面，

[K332]

说个无伤大雅的小 bug,手记那一页左侧的导航栏如果快速划过,会让赞助码卡在页面上(是彩蛋吗😂).
友链是比较吸引我的点,只要关注一个就不用到处去关注每个人的个人博客了(个人博客资源站?似乎可行🤔)

[tukon479]

@GTim 直接 vercel 把

[tukon479]

@K332 移到那个咖啡的 button 上会消失。快速移动的时候好像没有感知到 mouseleave 事件

[tukon479]

@codenotkey 啊 感谢反馈

[tukon479]

@cyberpoint e.g. https://github.com/Innei/Shiro/blob/main/src/atoms/activity.ts

[kisnows]

@tukon479 博主评论系统怎么解决的，自己存储吗

[sechi]

最下面的实时在线人数有 bug ，复现流程未知。似乎接收到新数据后旧数据并没有清除，而是直接插在了后面。

[zoeliu]

这个透明的代码块预览很喜欢~~~ 感觉一点儿也不割裂

另外 4k 以上屏幕看起来字体小了些

[tukon479]

@sechi 这是 framer motion 的 bug ，现在没有解。

[tukon479]

@zoeliu 14 号太小了么，我现在用的 5K 的屏倒是感觉还好？

[tukon479]

@kisnows 自己写的，写的比较烂，两年前的代码了，最近像把服务端也重写了

[theprimone]

@tukon479 看 MDN 文档发现了一模一样的代码，哈哈哈 https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#controlling_animations_with_javascript

[theprimone]

分享一下，抄了，切起来真上头 https://tailwind-nextjs-typescript-starter-blog-yuns.vercel.app/ 😄