2019年に、Nuxt.jsで構築したこのブログをNext.js + TypeScriptに一新しました。

変更理由としては、Nuxt.jsのバージョンが古く、新規機能を追加するのが少し大変になっていました。

また、Vueに関する情報のアップデートが出来てないくて、Vue3に関するキャッチアップが必要でした。

現職で、フロントエンドの開発はReac.jsがメインになっているので、学習も兼ねてNext.jsで作り直すことにしました。

開発環境のbefore

	Version
node	v14
nuxt	2.0.0

after

	Version
node	v16
react	18.1.0
next	12.1.6

移行作業で大変だった事

Vue.js特有の書き方をしている部分は大変でした。

特に、Template内のv-ifや、@clickなどのディレクティブは置き換えが大変でした。

Template内をコピペで貼り付けたときに大量にエラーが出た時はちょっと萎えました。

Next.jsに置き換えて良かった点

今まで、sitemap.xmlの生成をnuxt.config.jsで行なっていましたが、Next.jsでは各ページコンポーネントのgetStaticPaths関数を見て自動的に生成してくれるのがとても良かったです。

TSによる型の補完で、開発体験がとても良かったです。

HeadlessCMSにcontentfulを使用していますが、自動的に型定義ファイルを作成するスクリプトが公開されていて神かと思いました。

Contentful のレスポンスを TypeScript で取得する方法

これにより、contentfulで取得したレスポンスの値にも補完が効くようになりました。

ディレクトリ構成

ついでにディレクトリ構成もAtomic Design風に変更してみました。

現状は以下のようになっています。

├── MyHead.tsx
├── atoms
├── Layout.tsx
├── molecules
│   ├── BlogCard.tsx
│   ├── FavoriteCard.tsx
│   ├── Favorites.tsx
│   ├── Pagination.tsx
│   ├── Profile.tsx
│   ├── RelatedArticle.tsx
│   └── Tags.tsx
├── organisms
│   └── SideBar.tsx
└── template

ここに関しては全然進んでないです。
元のコンポーネントをそのまま移動させたらこうなるかなという感じでした。。

Atomsまで細かく分解できていないので、今後ちゃんとしたAtomic Design構成になるようにしていきたいです。

ページ構成変更

今まではトップページが記事一覧になっていたのですが、/posts/{pageNumber}を記事一覧ページとなるように変更しました。

GA4導入

ユニバーサル アナリティクスが来年にサポートが終了してしまうため、GA4に移行しました。

積み残しタスク

1. テスト実装
2. プロフィールページの実装
3. VLOGページ作成

テストに関してはマストで行いたい項目です。

Youtubeで流行りのVlogを投稿するページを作りたいです。
Vと言っても、VideoのVではなく、VoiceのVですが。

まとめ

保守が楽になりそうです。

やはりReact + TSの開発体験がとても良いです。

久しぶりにぶっ続けで12時間コーディングしました。
意識が朦朧としているので、後日記事の内容を修正しますw