Next.js 13以降でポートフォリオを作成している良さげなリポジトリ紹介

Next.js 13以降でポートフォリオを作成している良さげなリポジトリ紹介

Next.js

どうも、こんにちは!昨年の年末に書いた記事から時が経ち、気づけばこんなに時間が流れていました。久々の更新となりますが、やっと書くことにしました。

フロントエンドの世界、特にNext.jsの進化は本当に目を見張るものです。最近、Next.js 14の発表がありましたが、13からその進化がさらに加速して、新機能の追加が盛りだくさん。正直、キャッチアップするのが大変なくらいです。

このブログ自体もNext.jsで構築されているので、アップデートの際に色々とリサーチをしていたんです。その中で見つけたいくつかの良さげなリポジトリを今回はシェアしたいと思います。ほぼ私のメモですが、Next.jsでの個人サイトの制作を考えている方や、すでに使っている方の参考になれば嬉しいです。

b-r.io

特徴

  • Markdownの変換にContentlayerを利用
  • シンプルかつ洗礼されたデザイン
  • Prismaを利用したPage Viewのカウント機能

感想

 Next.js 13 (App Router)を利用しているのは勿論のこと、Next.jsが推してる周辺ライブラリ(ContentlayerやPrismaなど)?も活用しているのが良いです!

またサイト見てわかる通り、デザインもシンプルでモダンな印象です!主要な機能も揃っているので参考すると良さそうです!

リポジトリへのリンク

slog.website

特徴

  • Next Authを利用した認証機能(コメントができるようになる)
  • Prismaを利用した記事管理機能

感想

機能としてはブログのみですが、コメント機能がついてたりこだわりを感じました!

こちらもNext.jsが推してる周辺ライブラリ(Next AuthやPrismaなど)?を使っているので参考になりそうです!

リポジトリへのリンク

blog.kfirfitousi.com

特徴

  • Markdownの変換にContentlayerを利用
  • giscusを利用したコメント機能
  • Storybook v7 でちゃんと書いている

感想

giscusを知りませんでした!記事のコメント機能が手軽にできそうで良さそうです!

また、Storybookあまり書いたことないので、私は参考になりそう(?)

リポジトリへのリンク

さいごに

良さげなリポジトリを公開してくれれて感謝です。私のサイトもそろそろ作り直そうかな!