nextjs

nextjsはreactのフロントエンドの開発フレームワークです。

今回はこちらのプロジェクトをセットアップする際に、nextjsの構築をおこなったので、備忘録として残します。

注意

こちらの記事でmonorepoを設定した後にnextjsを導入しました。

monorepo環境下で実行すると下記のようなエラーが出ました。

warning Missing version in workspace at "/Users/taijusanagi/Documents/workspace/taijusanagi/nftcert/packages/frontend", ignoring.
error An unexpected error occurred: "Cannot read property 'manifest' of undefined".

そのため、下記のmonorepoの設定をrootのpackage.jsonから外してから下記を行なっています。

  "private": true,
  "workspaces": [
    "packages/**"
  ],

手順

packages直下で、こちらのコマンドを実行します。

//こちらはnextjsのアプリケーションを作成するためのコマンドです。
//typescriptを使いたいので、--tsをつけています。

npx create-next-app --ts

//下記の質問の答えがdirectoryとpackage名になります。
What is your project named? … frontend

これでpackages/frontendにnextjsの設定ができました。

ターミナルに設定されている、下記を実行して動作確認をします。

cd frontend
yarn dev

下記のような画面がhttp://localhost:3000に表示されれば成功です！

create-next-appで作成されたpackage.jsonにはversionの情報がないので、記載します。

  "version": "0.0.1" //任意のバージョンを指定してください。

rootのpackage.jsonに下記を戻して、yarnのmonorepoの設定で動かせるか確認していきます。

  "private": true,
  "workspaces": [
    "packages/**"
  ],

rootのpackage.jsonに下記を追加します。

  "scripts": {
    "dev:frontend": "yarn workspace frontend dev"
  }

そして、yarn dev:frontendを実行してみると...

無事に動作しました。

monorepo環境では、各workspace内に表示されるyarn.lockは必要ないので削除します。

ここまででgitにコミットして終了です。

ありがとうございました！