当サイトをNext.jsでリニューアルしました！

当事業サイトをNext.jsでリニューアルしました。今回はデザイナーさんにデザインして頂きました！以前はWordPressで作成していましたが、変更点は以下の通りです。フロント部分をNext.jsで構築ブログ部分をmicroCMSで実装サーバーはレンタルサーバーからvercelに移行お問い合わせフォームのメール送信機能を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にリニューアルしたので、さらにパフォーマンスを上げられるようがんばります！以上です！