この記事は、日頃開発をしていて、ターミナルなどに表示されるけど、気にせずスルーしていたことをこの機会に明らかにしようと思い、調べた記事になります。
はじめに
最近は開発以外のところ（市場調査・要件定義・デザイン・グロース）をやるポジションにいましてあんまり開発はしてないのですが、個人的に開発をしている時や、前のインターン先でゴリゴリ開発していた時に
ターミナル操作やその他、出てくるよくわからないものを
「まあ、大体こういう感じのことを意味するんだろうな」と一時的に解釈・「現状問題ではないのでスルー」していました。
そこで 今回は、
今から振り返ってみて、あの時は気にしてなかったけど、開発してる時に出てくる「これって何？」のアレコレを解説しようと思います！！
解説するもの一覧
- yarn devした時に出てくるやつ
- buildした時に出てくるやつ
- DNS カスタムレコード・IPアドレス・ワイルドカード証明書などの関係性は？
- （こちら、やりたかったのですが、思っていた以上に長くなったので、次回に回します！すいません。）
前置き
自分は、フロントエンドをメインにやっていて、大体Next.js・Typescriptの構成でやっているので、web開発をやっている方に刺さる内容かもしれないです！
yarn devとbuildした時に出てくるターミナルのプロジェクトの環境はNext.js Recoil Tailwindとかを使っているwebアプリのものです。
また、至らぬ点などありましたら、コメントしていただいて、ご教授していただけると大変助かります！
ではやっていきましょう！！
ターミナル編
yarn devした時に出てくるやつ
こちらは手慣らしで、buildの方が内容濃いと思います
（pnpm start・npm startとかと同じ）
1. yarn devなどのstartコマンドを打つと↓このような文言がターミナルに表示されます。
> member-site-web@0.1.0 dev 〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site
> next dev --port 3333
ready - started server on 0.0.0.0:3333, url: http://localhost:3333
info - Loaded env from 〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.env.development
warn - You have enabled experimental feature(s).
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.
wait - compiling...
event - compiled client and server successfully in 1863 ms (781 modules)
startコマンドを実行する ＝ ローカルサーバーを起動しプロジェクトがコードからwebブラウザに表示すること
それを踏まえて、上のを読み解くと意外と普通のことを言っていました。
解説
> member-site-web@0.1.0 dev 〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site
> next dev --port 3333
yarn runでpackage.jsonで指定しているスクリプトを実行
ready - started server on 0.0.0.0:3333, url: http://localhost:3333
localサーバーを用意
info - Loaded env from 〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.env.development
envファイルを読みにいく（このプロジェクトはFirebaseの情報がenvファイルにあるのでそれを読みに行ってる）
warn - You have enabled experimental feature(s).
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.
「実験的な機能を有効にしました
実験的な機能はsemverでカバーされていないため、予期せぬアプリケーションの動作や破損を引き起こす可能性があります。自己責任で使用してください。」
と言っています。
調べてみると、Next.jsのプレリリース機能を使ってることを開発者に認識させるものだそうです。なのでこれこそ気にしなくて良いやつですね笑
https://github.com/vercel/next.js/discussions/32192#discussioncomment-1761787
wait - compiling...
JSXなどからJSに変換している
つまりは、jsxからブラウザが理解可能なjsに変換しているんですね。
参考（わかりやすい→https://nextjs.org/learn/foundations/how-nextjs-works/compiling）
event - compiled client and server successfully in 1863 ms (781 modules)
1ms=0.001秒なので今回のコンパイルにかかった時間は1.863秒。早い！！
この781という数は、node_modulesに入っているファイルの中で、今回のcompileに使用したファイル数なのかなと勝手に解釈してます笑
ちなmodulesはpackage manager(yarnとか)を使ってinstallしたライブラリのコードが凝縮されたものや、プロジェクトの実行に必要なフォルダとファイルがたくさん格納されてるやつです。
↑この中にも多数出てきた compiled client and server は
Next.jsはclientとserverどっちもレンダリングするので、双方が理解できるようにそれぞれコンパイルしている。（多分）
参考（https://nextjs.org/learn/foundations/how-nextjs-works/client-and-server）
2.urlのところ（http://localhost:3333 ） にアクセスすると、以下のようなものが、上記の下に追記されます（Recoil使ってる人だけでした）
長い、、、ただ、意外と小分けにするとそうでもないですね
wait - compiling...
event - compiled client and server successfully in 1364 ms (781 modules)
wait - compiling /root (client and server)...
wait - compiling...
event - compiled client and server successfully in 1429 ms (982 modules)
Expectation Violation: Duplicate atom key "currentUserState". This is a FATAL ERROR in
production. But it is safe to ignore this warning if it occurred because of
hot module replacement.
at expectationViolation (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:656:19)
at checkForDuplicateAtomKey (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:737:9)
at registerNode (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:748:5)
at baseAtom (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:8297:16)
at atom (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:8349:12)
at eval (webpack-internal:///./src/global-states/atoms.ts:11:70)
at Object../src/global-states/atoms.ts (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.next/server/pages/_app.js:242:1)
at __webpack_require__ (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/ui-libraries/AuthProvider.tsx:13:81)
at Function.__webpack_require__.a (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.next/server/webpack-runtime.js:111:13)
Expectation Violation: Duplicate atom key "currentUsersSkillLevelState". This is a FATAL ERROR in
production. But it is safe to ignore this warning if it occurred because of
hot module replacement.
at expectationViolation (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:656:19)
at checkForDuplicateAtomKey (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:737:9)
at registerNode (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:748:5)
at baseAtom (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:8297:16)
at atom (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:8349:12)
at eval (webpack-internal:///./src/global-states/atoms.ts:22:81)
at Object../src/global-states/atoms.ts (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.next/server/pages/_app.js:242:1)
at __webpack_require__ (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/ui-libraries/AuthProvider.tsx:13:81)
at Function.__webpack_require__.a (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.next/server/webpack-runtime.js:111:13)
解説
wait - compiling...
event - compiled client and server successfully in 1364 ms (781 modules)
wait - compiling /root (client and server)...
コンパイルして、例のごとくclientとserver用にコンパイルしてる。
compiling /rootこれはこのプロジェクトでrootフォルダだけ、パスを/にする様にしているためだと思います。
wait - compiling...
event - compiled client and server successfully in 1429 ms (982 modules)
またやってますね。飛ばします。
次↓
Expectation Violation: Duplicate atom key "currentUserState". This is a FATAL ERROR in
production. But it is safe to ignore this warning if it occurred because of
hot module replacement.
at expectationViolation (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:656:19)
at checkForDuplicateAtomKey (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:737:9)
at registerNode (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:748:5)
at baseAtom (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:8297:16)
at atom (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/node_modules/.pnpm/recoil@0.7.6_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/recoil/cjs/index.js:8349:12)
at eval (webpack-internal:///./src/global-states/atoms.ts:11:70)
at Object../src/global-states/atoms.ts (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.next/server/pages/_app.js:242:1)
at __webpack_require__ (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/ui-libraries/AuthProvider.tsx:13:81)
at Function.__webpack_require__.a (〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.next/server/webpack-runtime.js:111:13)
Expectation Violation: Duplicate atom key "currentUserState". This is a FATAL ERROR in
production. But it is safe to ignore this warning if it occurred because of
hot module replacement.
期待値違反。アトムキー "currentUserState "が重複しています。これは実運用では致命的なエラーになります。
になる。しかし、この警告がホットモジュール交換のために発生した場合は、無視しても大丈夫です。
しかし、ホットモジュール交換で発生した場合は、この警告を無視しても安全です。`
これは、Recoilのissueにもあったように、複数のエントリーポイントがあると一度作成したatomを複数回に渡って使用することがあってそれでduplicate keyになってしまうらしいです。
https://github.com/facebookexperimental/Recoil/issues/733
https://github.com/facebookexperimental/Recoil/issues/733#issuecomment-729255961
これの解決策
https://www.npmjs.com/package/next-intercept-stdout
（もう一つ同じようなものがありましたが、Recoilのatomで定義しているstateが違うだけで同じ内容だったので飛ばします）
build時に出てくる奴を解説する
yarn build などのコマンドを打つと以下のようなものが出てきます。
> member-site-web@0.1.0 build 〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site
> next build
info - Loaded env from 〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.env.production
warn - You have enabled experimental feature(s).
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.
info - Checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (20/20)
info - Finalizing page optimization
Page Size First Load JS
┌ /_app 0 B 247 kB
├ ○ /404 194 B 247 kB
├ ○ /admin/event 348 B 322 kB
├ ○ /admin/member 3.97 kB 343 kB
├ ○ /admin/one-on-one 353 B 322 kB
├ ○ /admin/question 351 B 322 kB
├ ○ /admin/root 349 B 322 kB
├ ○ /admin/study-meeting 25.5 kB 365 kB
├ ○ /admin/teaching-material 358 B 322 kB
├ ○ /event 346 B 322 kB
├ ○ /login 3.9 kB 271 kB
├ ○ /member 2.42 kB 324 kB
├ ○ /member/[id] 2.77 kB 325 kB
├ ○ /one-on-one 388 B 322 kB
├ ○ /question 1.09 kB 323 kB
├ ○ /root 1.45 kB 323 kB
├ ○ /signup 10.3 kB 315 kB
├ ○ /study-meeting 2.2 kB 324 kB
├ ○ /study-meeting/[title] 1.44 kB 323 kB
└ ○ /teaching-material 2.47 kB 324 kB
+ First Load JS shared by all 247 kB
├ chunks/framework-e75f20a0d9e1f5eb.js 45 kB
├ chunks/main-7b3a7f0170474df8.js 32.7 kB
├ chunks/pages/_app-19a6b35815b89bc7.js 168 kB
├ chunks/webpack-df4cf1c8d23aa877.js 1.03 kB
└ css/6b30c753fa712fe3.css 3.57 kB
○ (Static) automatically rendered as static HTML (uses no initial props)
解説
基本的に、Next.jsアプリケーションをbuildすると、実際のHTMLが生成されます。
そこでgetStaticPropsなどの関数を実行して、ページをpre-renderingするのですが、あらかじめbuildできるページも把握した上で、それを実行するという流れがあることを踏まえると、読みやすいかもしれないです🫡
参考資料
僕自身もSSR・SSG・CSR・ISRをちゃんと理解しないと。。いけない。。
（https://nextjs.org/docs/basic-features/data-fetching/overview）
> member-site-web@0.1.0 build 〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site
> next build
yarn buildコマンドでpackage.jsonにあるスクリプト next buildを実行します
info - Loaded env from 〇〇〇〇〇〇〇〇/02-programing/02-team-develop/03-Tech.Uni/00-programing/member-site/.env.production
warn - You have enabled experimental feature(s).
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.
buildの時は、 .env.productionファイルを読み込むように設定しているので、本番用のデータを見に行っています。
例のごとく、warningが出ていますね。これは無視しましょう😂
info - Checking validity of types
型の有効性をチェックしている。型エラーがあれば、このタイミングでエラー文を返してくれます。
info - Creating an optimized production build
info - Compiled successfully
最適化された本番buildを作成しています
と言っています。
これはproduction buildではdevelopment buildに比べてパフォーマンスやその他本番利用の面での最適化（Optimize）されたbuildをしているんですね。
Reactすごい！
参考（https://reactjs.org/docs/optimizing-performance.html#use-the-production-build）
info - Collecting page data
info - Generating static pages (20/20)
おそらく、このcollecting page dataの段階で
SSG(static side generationの略で、先にReact ComponentをHTMLファイルに変換してそのHTMLファイルをクライアントに送信することでユーザーのリクエストごとにページを生成する必要なく、すぐにページ表示できるやつ)、static pageを生成しているのでしょう
参考（https://dev.to/anshuman_bhardwaj/what-the-heck-is-ssg-static-site-generation-explained-with-nextjs-5cja）
で、その20ページが下の画像ですね。↓
ここでいうSizeとFirst Load JSを少し説明します。
- First Load JS
- ユーザーがサーバーからページにアクセスする際にダウンロードされるアセットの数
- Size
- 別のページに対してFirst Loadを行った後で、そのページへのクライアントサイドの遷移を実行するためにダウンロードされたアセットの数
（これは翻訳しただけですが参考資料はこちら→https://nextjs.org/docs/api-reference/cli#build）
だから、sizeの方が小さくて、First Load JSの方が大きいんですね！
First Load JSはパフォーマンスが左から高い順に緑・黄色・赤で表示される。
となると、このプロジェクトはあまりパフォーマンスがよろしくないってことですね、、😥（改善します…）
↑上記プロジェクトでは表示されていないのですが、
├ ● /hogehoge/[id] (ISR: 10 Seconds) (10630 ms) 4.17 kB 223 kB
├ ├ /foofoo/250
├ └ [+216 more paths]
ISRとかを使用している場合は◯ではなく●で表示されます。
+ First Load JS shared by all 247 kB
├ chunks/framework-e75f20a0d9e1f5eb.js 45 kB
├ chunks/main-7b3a7f0170474df8.js 32.7 kB
├ chunks/pages/_app-19a6b35815b89bc7.js 168 kB
├ chunks/webpack-df4cf1c8d23aa877.js 1.03 kB
└ css/6b30c753fa712fe3.css 3.57 kB
このFirst Load JS shared by allというのは全てのページで必要な共有ファイル（＝_app.tsx ）に関連するファイルとしてbuildされるらしいです。
で、このchunks系のファイルによって、
チャンクによって、コードをバンドルに分離することができます。バンドルとは、関連するチャンクを1つのファイルにパッケージ化したものです。Create React App、Gatsby、Next.jsなどのツールは、アプリケーションをバンドルするためにwebpackを使用します。webpackのようなバンドルは、すべてのアプリケーションファイルをインポートして、単一のバンドルにマージします。
参考資料曰く、そうらしいですが、よくわかりませんでした笑。
で、このchunksなんたらはどこにいるんだ。。と思ったらbuildしてproduction環境で開いたブラウザで、開発環境を開いて
フォルダを辿っていったところにありました😆
○ (Static) automatically rendered as static HTML (uses no initial props)
自動的に静的なHTMLとしてレンダリングされた。
やりました！！
というわけですね
まとめ
お疲れ様でした！！
要は、Next.jsの仕様に基づいて色々やってくれてるのを表示していたということですね。
調べていく中で、既存のプロジェクトの改善もできたり、今後パフォーマンス含めて改善していかねばなと、思いました。
最後まで読んでいただきありがとうございました！
もし、コーヒーを買っていただけると、すごく励みになります
https://www.buymeacoffee.com/shinyamamoto
あとがき
また、このNext.jsのLearnを読み直さないといけないな
あ、まってNext.js 13キャッチアップしてない😱
時間は有限です。技術は浦島太郎の玉手箱か
