[36歳から始めるシステム開発] Next.js環境構築

IRバンクデータを活用した株投資情報システムの開発に、Next.jsを使用することにしました。

開発を始めた経緯は以下の記事をご参照ください。

今回の記事では、私がNext.jsで開発環境を整えた方法を共有します。

Next.jsとは

Next.jsはReactをベースにしたフレームワークです。

Webサイトの構築に特化されており、画面表示が早くなる仕組みや、作成・修正した資源を効率よく反映することができます。
上記の仕組みから、Next.jsを使用することで開発効率を上げることが可能です。

画面開発はReactでの開発を考えていましたが、自分の知見を広げるためにNext.jsを試すことにしました。

プロジェクトの作成手順

Next.jsプロジェクトを作成するには、以下のコマンドを使います：

npx create-next-app@latest [プロジェクト名]

npxコマンドを使用するためには、Node.jsとnpm（Node Package Manager）がインストールされている必要があります。
Node.jsはJavaScriptをサーバーサイドで動かすためのソフトウェアで、npmはそのパッケージ管理ツールです。

Node.jsは公式サイトからインストールできますので、こちらのサイトなどを参考に準備をしておきます。
（Node.jsと同時に、npmもインストールされます）

プロジェクト作成時の選択

プロジェクト作成のコマンド入力後、以下のような選択肢が表示されます。

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

今回の私のプロジェクトにおいては、全て「No」にしました。
TypeScrip、Tailwind CSSなど新しい言語で作成してみるのも良いですが、その分、学習するのが難しく開発スピードが落ちるからです。

実際に全てYesにしてプロジェクト作成を試みましたが、現状の私の知見では実装が困難でした。

ローカルホストを立ち上げ

プロジェクト作成が完了したら、以下のコマンドでローカルホストが立ち上がります。

cd [プロジェクト名]
npm run dev

立ち上がったら、ブラウザ画面で「http://localhost:3000/」にアクセスできるか確認します。

Next.js 初期画面

上記の画面が表示されたら、プロジェクト作成は成功です。

ログイン画面とHome画面の仮実装

プロジェクトが作成できましたので、ログイン画面とHome画面を以下のように仮実装してみました。

1. ログイン画面の作成：簡単なフォームを作り、ユーザーがIDとパスワードを入力。

2. 遷移の実装：ログインフォームの入力内容に基づいてHome画面に遷移。

ログイン画面の仮実装
メールアドレスとパスワードでログインする

ホーム画面の仮実装

参考にしたyoutube動画

Next.jsの使い方、Reactでの実装方法は下記の動画を参考にさせていただきました。

今後：Firebaseでの認証

ログイン機能の認証部分にはFirebaseを使う予定です。

今回の仮実装はメールアドレスとしていますが、Firebaseを利用することで認証機能の実装がシンプルになります。
また一定のセキュリティ上の安全性も確保できるからです。

まとめ

今回は、株投資情報システムの開発に使用するNext.jsの環境構築の方法を共有させていただきました。

Next.jsはReactでの開発を簡単に進めることが出来る便利なツールです。

もし私と同様に、これから何かシステムを作ってみようと思われる方はお試しいただくと良いです。

ちなみに、本記事の環境構築から仮実装まで数時間の作業時間で完了しました。
私のような駆け出しエンジニアが、短時間でこれくらいの事ができるのもAI時代の賜物だと実感しています。

Thanks to Chatgpt

質問やコメントがあれば、ぜひ気軽にお寄せください。