業務でのアプリケーション開発にNext.jsを使用します。

Posted date at 2024-07-21

　勤怠入力管理アプリケーションの開発業務に、ReactのフレームワークであるNext.jsを使用します。おそらく日本の製造業で、業務アプリケーションを内製でNext.jsで開発した会社は10社あるか無いかだと思います。

　Next.jsについてはこれまで何度も説明しましたので、ここではしません。

🚀Next.jsで開発するアプリケーション

　工場と営業社員の勤怠入力・管理を行うアプリケーションです。要件は今後人事総務課と詰める予定です。

　現段階では、入力機能では、社員番号による、個別または複数社員一括入力の他、ICカードや顔認証も選択できるようにしようと考えています。GPS機能も実装します。

　管理機能では、勤怠情報と残業・休暇申請の情報を併せて表示して、未打刻や時間のずれをアラート表示するような機能を実装したいと考えています。

　これまでのReactとの比較で説明します。

〇React＋Node.js/Express（これまでの構成）

　フロントエンドをReact、バックエンドをNode.js/Expressで開発します。フロントエンドはFirebaseHostingにデプロイし、バックエンドはCloudRunにデプロイします。Node.js/Expressからkintoneアプリに連携します。

〇Next.js（今回取り扱う構成）

　フロントエンドとバックエンド両方をNext.jsで開発します。デプロイはCloudRunです。バックエンドの開発にはNext.js14から用意されたAPIルートとサーバアクションを使用します。

　認証もFirebaseではなく、Next.jsでの実装に特化したNextAuthを使用します。実現機能としては、FiregaseAuthenticationと同じで森松ドメインに制限したGoogleAuth認証です。

　業務でのReact開発と並行して時間をかけて学んできました。

〇Udemy講座

　①【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座

　②モダンフレームワークのNext.jsでショッピングサイトを構築してみよう【Stripeで決済システム構築】

〇Udemy講座

　③【Next.js13】最新バージョンのNext.js13をマイクロブログ構築しながら基礎と本質を学ぶ講座

　④Next.jsとNotionで高速で動く自作ブログを１から開発する実践マスター講座【デプロイ運用まで解説】

　⑤【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座

　⑥電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座

　⑦【2024年最新】React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript

　⑧【2024年最新】Next.jsフルスタックWebアプリケーション開発入門

〇Youtube動画

　➈Next.jsエンジニアが間違える5つの勘違いNext.jsエンジニアが間違える5つの勘違い

　⑩Next.jsのディレクトリ構成のベストプラクティスを知っていますか？

　開発に慣れてきたReact+Node.jsを使えば要件を満たせるアプリケーションを比較的正確な見積の中で作れると思います。

　しかしながら、これまでもそうでしたが、技術の幅を広げるためにも、恐怖と不安を抱えつつも新しい技術にトライしなければなりません。今回も、自分には無理なんじゃないかと思ったり、何が分からないかが分からなくなるような、苦しい日が何日か続くと思います。

　何とかやりきりたいと思います。

　技術以外での作業時間を節約したいので、後から大きな変更がないように確認・打合せを進めたいと考えます。