Yu ShinozakiさんのUdemy講座でNext.js14を学習しました。

Next.js14を使用すると、これまでフロントエンド・バックエンドを別々のアプリケーションで構成し、別々のサーバにデプロイしていたものを、Nextjs.14のみで開発することができるようになります。

　

---

🚀講座について

詳細は以下のUdemyリンクをご確認ください。

動画再生5.5時間 　林がかけた時間11.75時間

　

学習の過程では、タスク管理アプリを作成しました。MongoDB📒へのCRUD(Create、Read、Update、Delete）操作、html及びCSSの勉強にもなりました。

作成したアプリ

Next.js14で作成したブログ（SSR、ルートハンドラーサーバーアクションを使用）へのリンク

　

　

---

🚀Next.js14を使用するとできるようになること

キーワードは以下の３つです。

〇AppRouter

〇ルートハンドラー

〇サーバーアクション

🐡AppRouter

　開発者にとって、ReactではReactRouterDomにより記述をしなければならなかったルーティングの記述が、ディレクトリ階層で実現可能となり実装が楽になりました。

　ユーザにとっては、ページ切り替えがよりスムーズに行えるようになりました。

🐡ルートハンドラとサーバアクション

　ルートハンドラとサーバアクションを使用することで、今まではフロントエンド、バックエンドを別々で開発し、サーバーにデプロイしていたものをNext.jsのみで実現可能となりました。

　以下に現在のReact開発との対比イメージ図を掲載します。

　

つまり、Nex.jsでフロントエンドもバックエンドも構築可能です。

　

以下デプロイまでの詳細です。

Next.jsを使用しない例　デプロイまで：

フロントエンド：HTML、CSS、JavaScript(React）⇒Vercel or Firebaseにデプロイ

バックエンド:Node.js(Express）⇒CloudRunにデプロイ

Next.jsを使用する例　デプロイまで：

フロントエンド+バックエンド：HTML、CSS、JavaScript(Next.js）⇒Vercel or Firebaseにデプロイ

　

🚀まとめ

　Next.js14の登場により既存のフロントエンド開発、バックエンド開発の境界がなくなっていく可能性があると感じます。実際にインフルエンサーでそのような発言をしている方がいました。

　使い分けとしては、社員情報など多くのアプリで共有するAPIは既存のバックエンド開発で行い、特定のアプリに特化したAPIはそのアプリのフロントエンドごとオールインワンでNext.js14で構築するのが良いかなと思っています。当面は、**React+Node.js(Express)+kintone（kERNフルスタック）**を主流に開発していきたいと考えています。

←ホームに戻る