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にコミットして終了です。
ありがとうございました！