⛳

VercelにデプロイしたNext13(App Router)のRSCでのコンソールの見方

2023/11/21に公開

はじめに

こんにちは、エンジニアをしつつ、個人開発で起業した橋田と申します。

いきなりですが、Next.jsのApp Router難しくないですか？
プログラミング初心者にはサーバー側で動くコードとクライアント側で動くコードがあるという概念自体難しいのではないかと私は感じています。

現状もよく「ここはクライアントサイドで動かすべきか、サーバ側で処理すべきか」ということを悩みます。

Next.jsはversion 13からデフォルトでサーバー側でコードが動くようになりました。
クライアント側で処理を走らせるには'use client'という記述が必要です。

私は主にprintデバッグを使用します。
ブレイクポイントを設定してデバッグするという方法ももちろん有効ですが、私は簡単にデータの中身を確認したい場合などはconsole.logを使用します。

let obj = {name: "Alice", age: 25};
console.log(obj);

しかし、ここでNext.jsのRSC（React Server Component）の場合、サーバーサイドで処理が走るため、ブラウザのデベロッパーツールにはコンソールログが表示されません！

コンソールログが使えないとなると、開発が非常に不便になりますよね。

しかし安心してください！方法はあります！

Node.jsのアプリケーションで npm run dev などのコマンドを使用して開発サーバーを起動した場合、そのサーバー上で実行される console.log の出力は、そのコマンドを実行しているターミナルやコマンドプロンプトに表示されます。

それでは、Vercelにデプロイしている場合はどうでしょう？

Vercelにデプロイしたアプリケーションの場合、サーバーサイドでのconsole.log出力は、直接ブラウザのコンソールに表示されるわけではありません。これは、サーバーがリモートに存在し、その出力はサーバーのコンソールに記録されるためです。Vercelでのログ確認には次の方法があります：

まず、vercelのURLを開きます

logs→timeLineを選択し、Liveを選択してください

以下詳細

エンジニア初心者にとって、ログの確認は非常に重要です。
エンジニア初心者が開発をスムーズに行うためには、ログを確認し、エラーの原因を特定できるようになる必要があります。

今回Next13でログの確認する方法が記事を探してもあまり出てこなかったため、この記事を書きました。

参考になれば幸いです。

是非とも記事への反応やTwitter(X)のフォローをいただけると嬉しいです。
よろしくお願いいたします。