VIDEO LESSON

Next.jsのディレクトリ構成：pages・app・publicと各ファイルの役割の解説動画

再生時間 7:04動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回は、ネクストジェイエスのディレクトリ構成です。
0:04プロジェクトの中のどのフォルダーへ何を置くのかを、ページズルーターとタイプスクリプトの構成で学びます。
0:12ポイントは、ファイル名や配置場所そのものに意味がある場所と、開発者が整理のために作る場所があることです。
0:21この違いを押さえると、部品を追加したつもりでページが増えてしまったり、設定ファイルを誤った場所へ置いたりする間違いを減らせます。
0:31今回はソースをエスアールシーへ置く構成を例に、全体像から順に確認していきましょう。
0:37まず全体像です。
0:38パブリックと設定ファイルはプロジェクトのルートへ置きます。
0:42パブリックをエスアールシーの中へ移す構成ではありません。
0:46ソース側には、ページズ、コンポーネンツ、リブ、タイプス、スタイルズが並びます。
0:52ツリーのファイルは役割を示す例で、すべてを最初から用意する必要はありません。
0:57エスアールシーを使わずルートにページズを置く構成も可能ですが、ルートのページズとエスアールシー・ページズを併設して、
1:03両方を同じように使うことは避けてください。
1:09置き場所が二重になると、どちらが使われるのか分かりにくくなります。
1:14ページズルーターでは、通常のページファイルの位置がユーアールエルになります。
1:19インデックス・ティーエスエックスはルートのスラッシュに、アバウト・ティーエスエックスはスラッシュ・アバウトに対応します。
1:27ポスツの中の角括弧アイディーは、記事アイディーを含む動的なユーアールエルです。
1:32フォーオーフォーは見つからないページの表示を変えるためのファイルで、エーピーアイの中のファイルは画面ではなくリクエストを処理します。
1:41注意点は、ページズへ一般的な部品や補助ファイルを置くと、意図しないページとして扱われることがあることです。
1:48再利用する部品はコンポーネンツなどへ分けましょう。
1:52共通設定を担う特殊ファイルを見ます。
1:54アンダースコア・エーピーピー・ティーエスエックスです。
1:58コンポーネントには現在のページが渡され、ページプロップスにはページ用のデータが入ります。
2:04全ページ共通のプロバイダーやレイアウトも、必要な範囲でここへ配置できます。
2:10ページズルーターの通常のグローバル・シーエスエスは、このファイルから読み込みます。
2:16部品に閉じたスタイルにはシーエスエス・モジュールズを使えます。
2:20既にあるファイルへ変更を加えるときは、ほかの共通処理を残したまま編集してください。
2:26共通の入り口なので、影響は全ページに及びます。
2:29もう一つの特殊ファイル、アンダースコア・ドキュメント・ティーエスエックスです。
2:35これはサーバー側で使われる、エイチティーエムエル文書全体の骨組みを扱います。
2:40ページの状態やクリック処理を管理する場所ではありません。
2:44各ページのタイトルや説明文は、ページズルーターではネクスト・ヘッドなどでページごとに設定します。
2:50ここで使うヘッドはネクスト・ドキュメントから読み込む部品で、ネクスト・ヘッドとは役割が異なります。
2:57アプリルーターのレイアウト・ティーエスエックスとも混同しないようにしてください。
3:03骨組みと中身の担当を分けて覚えましょう。
3:05整理のためのフォルダーを見ます。
3:07コンポーネンツにはカードやヘッダー、リブには共通関数、タイプスには共有する型を置くと、
3:11役割を追いやすくなります。
3:15例は日付表示の補助関数、フォーマットデートです。
3:18文字列を受け取り、日時として解釈できなければエラーを投げ、できれば日本向けの形式へ整えます。
3:24実行環境のタイムゾーンに任せず、アジア・トウキョウと表示基準を指定している点がポイントです。
3:30検証では、二千二十六年九月十九日の日時が二千二十六年九月十九日と表示され、
3:34無効な文字列では記事のエラーメッセージになることを確認しました。
3:38タイプスへ置く型と、ページでの利用例です。
3:42アーティクル型は、アイディー、タイトル、公開日時を文字列で持つ形です。
3:47アバウトページは、リブからフォーマットデートを、タイプスからアーティクル型を読み込み、
3:51記事データを表示します。
3:55開発サーバーでスラッシュ・アバウトを開くと、型と補助関数を使ったページを確認できます。
4:01ただし注意点が二つあります。
4:03タイプスへ型を置いても、外部エーピーアイのジェイソンを検証したことにはなりません。
4:09また、ネクストが生成するネクスト・エンブ・ディー・ティーエスは通常手編集しません。
4:15置いただけで自動実行されるわけではなく、参照されたコードが処理される点も覚えておきましょう。
4:22パブリックの役割です。
4:24パブリック・ロゴ・エスブイジーは、スラッシュ・ロゴ・エスブイジーとして参照できます。
4:30ユーアールエルにパブリックという文字は含めません。
4:33検証でも、この対応を確認しました。
4:36逆に言えば、ここへ置いたものはそのまま公開されます。
4:39秘密の設定ファイルやエーピーキーなど、公開したくないものは絶対に置かないでください。
4:45画像はネクスト・イメージなどで表示できますが、静的出力では既定の画像最適化サーバーが使えないため、
4:49設定の調整が必要です。
4:54また、パブリックのジャバスクリプトやシーエスエスは置いただけではページへ読み込まれません。
5:00通常のシーエスエスはソース側からインポートします。
5:03エーピーアイと生成物の境界を理解します。
5:06ページズ・エーピーアイではエーピーアイ・ルーツを定義できますが、データベースへの接続や入力検証は自分で実装する必要があります。
5:15ファイルを置くだけで保存の仕組みが作られるわけではありません。
5:19静的出力ではエーピーアイ・ルーツ自体が動かせないため、外部エーピーアイなどを別に用意します。
5:26次に生成物です。
5:27ノード・モジュールズはインストールされた依存パッケージ、ドット・ネクストはビルドや開発用の生成物で、
5:33どちらも直接編集してソースの代わりに使う場所ではありません。
5:38依存関係はパッケージ・ジェイソンとロックファイルで管理します。
5:43静的出力の成果物はアウトへ出て、再生成して公開するものです。
5:47アプリルーターの構成を読むときの注意です。
5:50アプリルーターでは、アプリ・ページ・ティーエスエックス、アプリ・レイアウト・ティーエスエックス、
5:56アプリ・ノットファウンド、そしてエーピーアイ配下のルート・ティーエスなどを使います。
6:02ページズルーターのアンダースコア・エーピーピーやアンダースコア・ドキュメント、
6:07ページズ・エーピーアイを、そのまま同じ意味で配置するものではありません。
6:12移行のために両ルーターを併用する構成もありますが、同じユーアールエルを両方で定義しないことなどの制約があります。
6:20新しい記事や公式サンプルを読むときは、どちらのルーターを対象にしているかを最初に確認する習慣を付けましょう。
6:27最後に、配置の間違いを見つける確認手順とまとめです。
6:31一つ目はルーティングされる場所の確認です。
6:33表示されるユーアールエルはルーターの規則で決まるため、共有部品をページズ配下へ置くとページとして扱われる場合があります。
6:41部品や共通処理を置く場所と、公開するページを分けてください。
6:45二つ目は公開ファイルと秘密情報の区別です。
6:47パブリックへ置いたファイルは配信対象です。
6:50環境変数も、名前と読み込む場所によってクライアントへ渡る可能性があるため、
6:53生成物を確認してください。
6:56意味のある配置と整理のための配置。
6:59この物差しでフォルダーを見分けられるようになれば、構成で迷う場面は大きく減ります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Next.jsのPages Routerのディレクトリ構成を解説。pages・public・components・lib・typesの役割、_appと_document、生成物とApp Routerの違いを整理します。

解説記事・サンプルコードを読む：Next.jsのディレクトリ構成：pages・app・publicと各ファイルの役割 →