当事業サイトをNext.jsでリニューアルしました。
今回はデザイナーさんにデザインして頂きました！

以前はWordPressで作成していましたが、変更点は以下の通りです。

1. フロント部分をNext.jsで構築
2. ブログ部分をmicroCMSで実装
3. サーバーはレンタルサーバーからvercelに移行
4. お問い合わせフォームのメール送信機能をnodemailerで実装

簡潔に説明していきます。

フロント部分をNext.jsで構築

Next.jsとはRect.jsベースのJavaScriptフレームワークです。

特徴としてSSG SSR ISRをページの特性に合わせて導入することでパーフォーマンスの高いWebサイトが作成できます。
JavaScriptは本来ブラウザで実装されるものですが、サーバーで実行することにより処理の高速化が可能です。

ブログ機能をヘッドレスCMS「microCMS」で実装

このようなブログの機能をmicroCMSで実装しました。
ブログ機能のプログラムをサーバーごと提供してくれます。

処理の流れとしては

• 自サーバーからmicroCMSに記事情報を要求
• microCMSのサーバーから自サーバーに記事情報を受信
• 自サーバーのサイトで記事情報を取得して表示

といった感じです。

サーバーをVercelに移行

Next.jsのサイトを公開するにはNode.jsが実装できるサーバーにアップすることが条件となります。
レンタルサーバーでもできなくはないですが、手間がかかりそうだったので候補から外しました。

Vercelならgithubと連携し、簡単にデプロイができました。
VercelはNext.jsを作っている会社なので相性が抜群です。

お問い合わせフォームのメール送信機能をnodemailerで実装

お問い合わせフォームのメール送信機能はnode.jsのモジュール「nodemailer」で実装しました。
比較的簡単に設定でき、HTMLメール・添付ファイルなどにも対応していて多機能です。

まとめ

next.js + microCMSで自社サイトを作成しました。
next.jsではバージョン13系から導入されたapp router で作成しています。
コンポーネントが原則サーバーコンポーネントとなり理にかなった構造だと思いました。

パフォーマンスをあげたいという思いからWordPressからnext.jsにリニューアルしたので、さらにパフォーマンスを上げられるようがんばります！

以上です！