はじめに
約半年ほどReactを中心に学習していたのですが、今回初めてNext.jsを触ってみました。
実際に手を動かしながら勉強したうえでの所感や、Reactとの違いをまとめます。
作成したアプリ
内容
技術ブログ
使用言語
React、Next.js(v14)、TypeScript
UI
tailwind css
DaisyUI
テスト
Jest
React Testing Library
その他使用した技術
Turbopack
micro CMS
Qiita API
Github
Firebase
実装内容
今回は記事の取得のみを行いました。記事の投稿や編集機能はつけていません。
micro CMSで作成したブログ記事の取得
自分のQiita APIを使った記事の取得
（サムネは取得が難しいため、固定の画像を使っています。）
作成の流れ
アプリ作成の大まかな流れはこちらです。
１．環境構築
今回はTurbopackを使用しました。
２．CI/CD構築（Github Actions）
今回に限らず、アプリを作成するたびに構築しています。
３．Qiita APIをたたいて記事取得
４．Micro CMSにテスト記事を登録し、データ取得
５．各ページの実装
レイアウトはtailwind.cssで最低限整えました。
６．テスト作成（Jest）
ページ毎ではなく、コンポーネント毎にテストを分けて書きました。
Reactと比較してみて
※Next.js v14の情報になります。
・ルーティング設定が簡単
Reactだとreact-routerをインストールしてパスを指定する実装が必要でしたが、Next.jsではディレクトリ構成がそのままパスになります。
これは非常にわかりやすいと思いました。
例えば、/personal のページを作成したい場合は、personalディレクトリを切ってその中にpage.tsxを作成します。
・サーバー側もクライアント側も実装可能
Next.jsはデフォルトだとサーバーサイドコンポーネントですが、ファイルの冒頭に "use client" を記述するだけで、簡単にクライアントコンポーネントに切り替えられます。
クライアントコンポーネントに切り替えるタイミングとして、わかりやすいものを挙げてみました。
（あくまでも一例ですが）
・コンポーネントに情報を保持したい（useState,useEffectの使用）
・ユーザー操作に関するイベントを割り当てたい（OnclickやOnchangeなど）
ただし、クライアントコンポーネントを多用することはパフォーマンスの低下につながる＆他コンポーネントへの影響を考える必要があるため、注意が必要です。
おわりに
今回はあくまでも「APIをたたいて取得したデータを表示する」くらいしかやっていないので、Next.jsの恩恵を十分に受けられたわけではないと思います。
それでも実際にこうして何か作ってみることで、Reactとの違いをざっくりと体感できたので面白かったです。やはり手を動かしてみることが一番。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします👇