近年、Webアプリケーションを作成する場合に「React」を使用して開発する傾向があります。
さらに「React」を使用したフレームワークとして「Next.js」があり、設定や構成が最初から環境を構築するより楽なので、導入されることが多いです。
今回、導入までについて記事にしていきます。
また言語は「TypeScript」を使用しております。
実行環境
- Mac Intel Ventura 13.1
- node 18.4.0
- yarn 1.22.17
- react 18.2.0
- next 13.1.6
- typescript 4.9.5
準備
「Next.js」で、プロジェクトを作成する場合には、「Node.js」と「yarn」をインストールする必要があります。
以下の方法で、「Next.js」の開発環境を作成します。
Node.jsがインストールされているか確認する
まずは、以下のコマンドで「Node.js」がインストールされているか確認します。
$ node -vインストールされている場合は、以下のようにバージョンが表示される。
v18.4.0インストールしていない場合は、「Node.js」をインストールしてください。
「yarn」のインストール
「Next.js」では、「yarn」を使ってインストールします。
そのため、まずは以下のコマンドで「yarn」をインストールします。
$ npm install -g yarn以下のコマンドで、「yarn」がインストールされているか確認します。
$ yarn -v問題なくインストールされていた場合は、以下のようにバージョンが表示されます。
1.22.17「Next.js」の、プロジェクトを作成してアプリケーションを開発する
準備が出来ましたので、「Next.js」のプロジェクトを作成して、アプリケーションを開発していきましょう。
「Next.js」プロジェクトの作成コマンド
以下のコマンドで、「Next.js」プロジェクトを作成します。
$ npx create-next-app sample-app --typescript「sample-app」に、アプリケーション名を入力します。
またアプリケーション名に、大文字は使用できませんので注意してください。
yarn を使用せずに、プロジェクトを作成する場合
「yarn」がインストールしていない環境では、以下のコマンドでプロジェクトを作成する事ができます。
$ npx create-next-app sample-app --use-npm --typescript「Next.js」の起動
「Next.js」のインストールが完了したら、アプリケーションを起動しましょう。
まずは先ほど作成したプロジェクトに移動します。
$ cd sample-appそして以下のコマンドで、アプリケーションを起動します。
$ yarn dev「http://localhost/:3000」にアクセスすると、以下の画面が表示されるようになります。
もし画像が表示されない場合は、コマンド実行時に表示するメッセージ内にURLが表示されているので、そこにアクセスします。
また終了する場合は、キーボードの「Ctrl + c」を同時に押すことで終了できます。
これで「Next.js」+「TypeScript」の環境構築が完了しました。
アプリケーションを開発していきましょう！