Zenn
👀

【Next.js】で1ペラサイトを作ってみた

2024/08/25に公開
Next.js
React
TypeScript
Vercel
Tailwind CSS
tech

Next.js, React(+その界隈の技術)をキャッチアップしたいと思い、
アウトプットとしてwebサイト( https://yota-suzuki.jp )を作成しました！
本記事はその振り返りです。

概要

使用技術の図

詳細

PG, FW（作成時点）

  • Next.js @ 14.2.4（App Router）
  • React @ 18.3.1
  • TypeScript @ 5.4.5
  • tailwindcss @ 3.4.4

ソースコード管理

  • GitHub

CI/CD、ホスティングサービス

  • Vercel

コンテンツ管理

  • MicroCMS
  • (Zenn)

デザインツール

  • Figma

参考にした手法

  • Atomic Design

ライブラリ類（主なもの）

  • i18n（多言語機能）系：i18next@23.12.1, next-i18n-router@5.5.1
  • ステート管理：jotai@2.9.3
  • MicroCMS：microcms-js-sdk@3.1.2

言語切替については、
ステートやレンダリングについてキャッチアップしたかったのでそこも兼ねて作った

作成の経緯

  • 最近の動向を見ているなかで、ReactやNext.js、tailwindcssが流行っているようで気になっていた
  • 今後の案件営業にあたってReact周りを使用してポートフォリオを作りたかった

率直な振り返り

  • WordPress(PHP)やFlutter(Dart)の経験があるからか、コンポーネント指向や状態管理周りに対して理解しやすかった
  • TypeScriptについてもそこまでキャッチアップせずに実装できた
  • tailwindcss めちゃめちゃ使いやすい！これからも使えるシーンがあったら積極的に使っていきたいかも！
  • APIでのJSON取得、データ加工から画面への表示も思っていたより簡単に実装できた
  • Vercelでの設定、デプロイが簡単すぎた（GitHubにプッシュするだけで自動でデプロイしてくれる）

おわりに

JSまわりの技術に対して何となくしかキャッチアップ出来ていない状態でしたが、使いやすくて驚きました！👍
「フロントエンドとバックエンドの境界が無くなってくる」という考察をどこかで見ましたが、実際に触ってみて腑に落ちました。
Xaas系に任せられるものは任せて、開発者はアプリの本質にリソースを割けるようになってくるのかなー、なんて思ったり
今後、個人開発でのwebアプリは要件が合えばNext.js、Reactで良いかなと思いました。
実装の詳細についてはまた気が向いたら別記事にでもしようかと思います！

作ったサイト

https://yota-suzuki.jp/ja

Discussion