個人サイトを作りました！
目次
はじめまして
こんにちは。さかです。
ずっと前から自分専用のサイトを作りたくて、今回やっと完成しました。
また、自分のプロフィールはこちらで簡単に書いていますので、覗いてみていただけたらうれしいです。
このサイトでは、デザインやweb技術などスキル的なことや趣味などの内容を投稿していけたらと思います。
今回は作成したサイトについて、お話できればと思います。
技術構成
構成は以下を採用しています。
- ・フレームワーク:Next.js 14 App Router
- ・ホスティングサービス:Vercel
- ・ライブラリ:Framer Motion
- ・ツール:ESLint、Prettier
- ・CMS:microCMS
- ・スタイル:Tailwind CSS
フレームワーク
Next.js 14 App Routerを採用しました。
最初、何を採用するか迷いましたが、Next.js 14ではApp Routerが推奨されているのと、Server Actionが新機能であるので勉強もかねて選びました。
ホスティングサービス
Vercelを採用しました。
以前こちらのサイトでVecelを使っていて使い慣れていることや、Next.jsとの相性が良かったので今回も使用しました。
ライブラリ
アニメーションライブラリとしてFramer Motionを採用しています。
他のライブラリも検討してみましたが、以前に使用経験があったことことや簡単にアニメーションを導入することができること、シンプルなアニメーションを実装したかったので今回も使用しました。また、Framer MotionはReact用のアニメーションライブラリなのでおすすめです。
ツール
開発現場ではよく使われているESLintとPrettierを導入しています。コードの品質向上とフォーマットの統一をするために使用しました。
CMS
コンテンツ管理はmicroCMSを採用しました。
コンテンツ管理がしやすいのと国産のヘッドレスCMSであるため、ドキュメントが理解しやすいのもあり、採用しました。
また、さまざまな機能があり、画像URLにパラメーターを付与するだけで最適化できるのでパフォーマンス向上できて非常に便利です。
スタイル
Tailwind CSSを使用しています。使ったことがなかったので採用してみましたが、クラスを付与するだけで簡単にスタイルを適用することができたり、レスポンシブデザインのサポートがあり、ブレークポイントごとに異なるスタイルをあてることができるのでとても使いやすかったです。
また、今回紹介できなかった実装方法については今後の記事で紹介できればと思います。
つまづいたこと
実装方法でつまづいたところは生成AIやドキュメント、ZennやQiitaなどのブログ記事を見ながら解決していきました。
その中で特に大事だと思ったところをお話しします。
レンダリング形式の理解
レンダリング形式のところでSSR, SSG の設定する際にSSGはgenerateStaticParamsを設定して静的に生成するようにしていました。
しかし、お問い合わせページは動的ページであるためSSRにする必要があり、generateStaticParamsを使用しないでビルドしてみたらエラーが出てきました。
原因を探しているとnext.config.mjsにoutput: 'export',と設定されていたのが原因でした。
これは静的サイトまたはSPAとしてビルドする設定で全てSSGまたはSPAになってしまい、SSRが効かなくなります。
ページごとに生成方法を分けたい場合はgenerateStaticParamsで定義することやdynamicという値でSSRやSSGの管理をすることでレンダリング形式を分ける必要があることを学ぶことができました。
また、App Routerは何も設定していないとサーバーサイドでレンダリングでされるため、クライアント側でレンダリングしたい場合は'use client'を付与するなどその時々で設定する必要があることを今回学ぶことができました。
参考リンク:
[Next.js] App Router環境下のページ毎のレンダリング形式の設定方法
シンタックスハイライト
記事にコードを記述するにあたり、シンタックスハイライトを導入してみました。
最初はhighlight.jsは使いましたが、シンタックスエラーが出てしまい、何かと原因を探してみたらNext.js14.3のバージョンのビルドプロセスに問題あるようで対応策が現在のところないということがわかりました。
他のライブラリを検討した結果、shikiを使用してみることにしました。
shikiはサーバーサイドレンダリングに対応しているため、クライアントサイドと分けずに使用することができ、スムーズに導入することができます。
prism.jsやhighlight.jsはクラアントサイドでレンダリングされるため、いづれか2つを採用する場合はクライアントサイドでレンダリングされることを念頭に実装する必要あります。
ですが、今後のアップデートも考えるとクライアントサイドでは対応しきれない箇所も出てくると思いますので、シンタックスハイライトを使用する際はshikiといったサーバーサイドでレンダリングされるライブラリを使用した方がパフォーマンス的にも良いと個人的には考えています。
参考リンク:
Next.js14系で作成している個人ブログにシンタックスハイライトを導入した
さいごに
はじめて、Next.jsを使って個人サイトを作りましたが、つまづきながらも満足して開発することができました。
ブログを投稿しつつ、新しい機能を追加していきたいと思っているのでサイトのアップデートも同時にしていきたいと思います。
ここまで読んでいただき、ありがとうございました。
