フロントエンド開発で定番のNext.js+TypeScript、WSL2上での環境構築手順を説明！

フロントエンド開発初心者の筆者がReact + TypeScriptデビューすることに

私は今まで実務でフロントエンドの開発を全く行ったことがありません。つまり全くのド素人です。そんな私がとある事情により、急きょReactとTypeScriptを利用してフロントエンド開発に関わることになりました。

とりあえずはフロントエンド開発とはなんぞや、ということをキャッチアップしながらも、一旦は開発環境を構築してみようと思い、手順を本記事に整理してみました。フロントエンドは本当に初心者なのですが、Next.jsを使うといい感じに開発できるといううわさを聞いたので、今回はNext.js + TypeScriptでの開発を行うための環境構築を行ってみようと思います。

Next.js + TypeScriptでの開発を行う上での環境構築

上記で触れた通り、本記事ではフロントエンド開発初心者である私が、昨今のフロントエンド開発で定番となっているフレームワークReactとTypeScriptを利用したWebアプリケーション開発のための開発環境構築において、ReactベースのフレームワークであるNext.jsを利用した、「Next.js + TypeScript」の環境構築手順をご説明いたします。

なお、本記事の環境構築についてはWindows10上のWSL2を利用して行っています。

作業用ディレクトリの作成

作業用ディレクトリとして、以下のように任意の名前のディレクトリを作成します

mkdir -p ~/workspace/react-next-app
cd ~/workspace/react-next-app

Dockerfileとdocker-compose.ymlの作成

作業ディレクトリ内にDockerfileとdocker-compose.ymlを作成します

Dockerfile

FROM --platform=linux/x86_64 node:16.14.2

RUN apt-get update
RUN apt-get install -y locales
RUN locale-gen ja_JP.UTF-8
RUN localedef -f UTF-8 -i ja_JP ja_JP
ENV LANG=ja_JP.UTF-8
ENV TZ=Asia/Tokyo
WORKDIR /app

docker-compose.yml

version: '3'
services:
app:
build: .
tty: true
ports:
- 3000:3000
volumes:
- .:/app

Dockerの起動

以下のコマンドを実行してDockerコンテナを起動します

docker-compose up -d
docker-compose exec app bash

Next.jsプロジェクトの作成

起動したコンテナのコンソール上で以下のコマンドを実行し、Next.jsのプロジェクトを作成します

yarn create next-app --ts

途中で表示される「What is your project named?」にはそのままEnterキーを押せば問題ないです。

Next.jsアプリケーションの起動

コンテナ内のmy-appディレクトリに移動してyarn devコマンドを実行することでアプリケーションが起動します。

cd my-app
yarn dev

ブラウザから http://localhost:3000/ に接続してアプリケーション画面が表示されることを確認します。

以上でNext.js + TypeScriptによるWebアプリケーション開発環境の構築が完了しました。