今パートの目標
前回はNext.jsアプリを起動できDocker環境の構築をしました。
今回はその環境にNext.js✖️Typescript✖️tailwindcssのアプリを作成していきたいと思います。
環境について
- Next.js 14.2.3
- Typescript 5
- Node.js 20
- tailwindcss 3.4.0
- macOS Sonoma 14.1.1
- Docker Desktop 4.18.0
Next.jsアプリを作成する
Dockerイメージを作成する
まずは、前回作成したDockerファイルを元にDockerイメージを作成します。
cd ~/develop/share-favplace-frontdocker-compose buildDockerDesktopまたはCLIで一応確認しておきましょう。
docker image lsREPOSITORYが{コンテナ名}-{サービス名}となっているものがあれば作成できています。
Next.jsアプリを作成する
Dockerイメージが作成できたらNext.jsアプリを作成していきます。
docker-compose run --rm front npx create-next-app {アプリ名} --typescriptコマンドの説明をしていきます
docker-compose run <サービス名> <コマンド>
Dockerコンテナを作成し、コンテナ内で引数に渡したコマンドを実行します。
今回でいえば以下コマンドです。
npx create-next-app {アプリ名} --typescript–rm
コマンドを実行した後コンテナを削除するというオプションです。
npx create-next-app <アプリ名> –template typescript
引数に渡したアプリ名でNext.jsアプリを作成するコマンドです。
–template typescript
Typescriptを使用するアプリを作成する際のオプションです。
コマンドを実行すると以下のように聞かれるのでyを入力しEnterを押します。
Ok to proceed? (y)以下のように設定を選択してインストールしします。
メッセージが出力され、コマンド実行時に指定したフォルダ名のアプリが作成されていればOKです。
✔ 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 (@/*)? … Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /app/share-favplace-front.
...
Success! Created share-favplace-front at /app/share-favplace-frontNext.jsアプリを移動する
Next.jsアプリを作成できましたが、今回はDockerファイルなどを作成する際に先にアプリフォルダを作成してしまっているので「アプリフォルダ/アプリフォルダ」のような構成になってしまっているかと思います。
なので、以下コマンドで一つにまとめます。
# ファイル移動
mv アプリフォルダ/{*,.*} ./
# フォルダ削除
rmdir アプリフォルダNext.jsアプリを起動する
下記コマンドでコンテナを作成＆Next.jsを起動します。
docker-compose up -dしばらく待って、Next.jsが起動した後、Webブラウザでhttp://localhost:3000を開きます。
以下画面が表示されればOKです。
まとめ
今回はDocker環境にNext.js✖️Typescript✖️tailwindcssのアプリケーションを作成しました。
次回はgithubにリポジトリを作成し、apiとfrontのソースコードをgit管理していきたいと思います。
コメント