はじめに
学内で使われているツールを新しくするにあたって、実装の段階ではNext.jsができた方が良いだろうという話になりました。Next.jsは聞いたことがあるものの、触ったこともなければどんなことができるのかも知りませんでした。前から気になっていたのもあり学ぶのに絶好のチャンスということで、できることを増やして実装できる幅を広げるためにもやってみることにしました。「習うより慣れよ」ということで、インストールから簡単に何か動くものを作れるまでをゴールにしています。
本記事はインストールもまだしていないような初めての方向けです。
インストール
Node.jsのインストール
すでにインストール済みの方は飛ばしてもらって大丈夫です。
Next.jsはNode.js上で動作するフレームワークのため、Node.jsが必須です。
Node.jsをダウンロードしてインストールします。
Download Node.js(LTS)をクリックしてダウンロードしてください。その後は画面に従ってインストールを行ってください。オプションはデフォルトのままで大丈夫です。
私は何故かWindowsインストーラーパッケージではなくzipファイルがダウンロードされてしまいましたが、展開して中のexeファイルを実行することでインストールできました。
Next.jsプロジェクトの作成
コマンドプロンプトを開きます。
以下のコマンドを入力してnpxをインストールしてください。
npm i -g npx
どうやらnpxが上手くインストールされていないことでエラーが発生してしまうことがあるようなので、おまじないとしてnpxをインストールしておきましょう。
次に以下のコマンドを入力してプロジェクトを作成します。
// hoge-hoge-appには好きな名前を書いてください
npx create-next-app@latest hoge-hoge-app
入力後、各設定を聞かれるので好みに合わせてYesかNoを選択していきましょう。Yes/Noを矢印キーで選んだ後にEnterを押すことで選択できます。(自分で入力するもんだと思っていたために戸惑いました……。)
私は以下のように設定しました。
PS C:\Users\username\project> npx create-next-app hoge-hoge-app
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No
答え終わると自動的にプロジェクトが作成されます。
開発サーバの起動
先ほど作成したディレクトリhoge-hoge-appに移動します。
cd hoge-hoge-app
開発サーバの起動を実行します。
npm run dev
サーバの起動が開始されるとターミナルに以下のような出力がされます。
C:\Users\username\project\hoge-hoge-app>npm run dev
> hoge-hoge-app@0.1.0 dev
> next dev
▲ Next.js 14.2.14
- Local: http://localhost:3000
✓ Starting...
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
✓ Ready in 2.2s
○ Compiling / ...
✓ Compiled / in 8.3s (543 modules)
✓ Compiled in 894ms (253 modules)
GET / 200 in 9302ms
○ Compiling /favicon.ico ...
✓ Compiled /favicon.ico in 7.1s (303 modules)
GET /favicon.ico 200 in 7434ms
この状態で、ブラウザでhttp://localhost:3000にアクセスをします。
Next.jsのデフォルトのページが見れたら、成功です！
終了するときはCtrl+Cを入力してください。
何か作ってみよう！～コスパ計算機～
何か試しに動かしてみたいと思っても、難しすぎると自分でも何をしているのかさっぱりわからず勉強にならない恐れがあるので、中身のプログラムは簡単に実装できるようなものでひとまず動くものを完成させることにします。
その名も「コスパ計算機」！
買い物をしているときに出くわす、「大容量」「お徳用」とでかでかと書かれた商品たち。お得な感じで溢れているんですが、グラム単位の値段を計算すると通常サイズと大して変わらないどころか厳密には高いことありますよね。絶対にお得な方を購入したい私は、複数の計算結果を並べて表示し比較できる便利ツールを作ることに決めました。
開発サーバの起動
開発サーバはビルド作業を行わなくても変更が常に反映されるので便利です。
次のコマンドで実行できます。
npm run dev
プログラムを記述して完成
プロジェクトをTypeScriptで作成しているのでTypeScriptで書きます。appディレクトリ直下のpage.tsxはルートページに対応しており、今回はここを編集していきます。
私は初めてのTypeScriptだったので、いろんな人のコードを参考にしながら見よう見まねで書きました。
シンプルですが完成したのがこちらになります。
コスト計算機
左から、商品名などを入力する「item」、「値段」、「内容量」の枠になっており、入力後に計算ボタンを押すと下部に追加されていくようになっています。
公開する
プログラムは完成しましたが、公開しなければローカルでしか使うことができないのでVercelで公開をすることにします。公開には以下のものが必要です。
- Git
- GitHub
- Vercel
GitのダウンロードやGitHubのアカウント作成、リポジトリ作成やプッシュなどについては省略します。
Vercelでアカウントを作成し、GitHubのアカウントと連携させます。連携すると、GitHubのリポジトリが表示されるようになるので今回作成したものの「Import」ボタンを押します。
プロジェクト名などを設定したら右下の「Deploy」ボタンを押します。ビルドが行われます。無事にビルドが完了すると完了画面が表示され、ホームにプロジェクトが追加されていることが確認できます。
「Domains」のリンクに飛ぶと作成したページにアクセスが可能です。今回は仮ドメインのままにしていますが、ドメインを割り当てることもできるようです。
終わりに
今回は簡単なシステムのみだったのでNext.jsの良さを生かせていないと思いますが、環境構築やプロジェクトを公開するまでの一連の流れを学ぶという初めの一歩を踏み出せたのは良かったです。今後はデザインを付けていくなどしてさらに使えるようにしていきたいです。
最後まで読んでいただきありがとうございました！
Discussion