[NextJS]~Checkout画面: NextJS環境を構築しよう!~

こんにちは、KOUKIです。

Go言語でショッピング関連のAPIを作成しました。

また、フロントエンド側では、Admin画面とAmbassador画面を実装しています。

今回から、NextJSでCheckout画面の作成に入ります。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

事前準備

ファイル

NextJSプロジェクトの作成

NextJSプロジェクトを以下の手順で作成しましょう。

  1. NextJSプロジェクトを作成
  2. NextJS用のDockerfileを作成
  3. docker-compose.ymlにサービスとして追加
  4. ビルドして起動

NextJSプロジェクトを作成

NextJSのプロジェクトを作成するには、NodeJSが必要のようです。※ Set up

以下の記事にある通り、ローカル環境にNodeJSをインストールしましょう。

インストールが完了したら、下記のコマンドを実行します。

コマンドが成功したら、カレントディレクトリに「next-checkout」ディレクトリが生成されます。

NextJS用のDockerfileを作成

CheckoutのDockerfileを用意します。

docker-compose.ymlにサービスとして追加

airの設定変更

Goのairを使ってホットリロード実現しているのですが、NextJSプロジェクトを監視対象に含めるとDockerの起動が遅くなるので、監視対象外にしておきます。

TypeScriptの準備

TypeScriptが使えるように準備しましょう。

npm installを実行後、tsconfig.jsonファイルは、以下のようになります。

ビルドして起動

コンテナをビルドして、起動します。

コンテナが立ち上がったら、ブラウザから「http://localhost:5000」へアクセスしてください。

上記の画面が出てきたら成功です。

次回

次回は、テンプレートを作成しましょう

記事まとめ

学習

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

Dockerfile-nextjs-checkout

docker-compose.yml

.air.toml

tsconfig.json

コメントを残す