Next.jsのpagesディレクトリの役割を完全解説！初心者でもわかる旧ルーターの仕組み
生徒
「Next.jsって聞いたことはあるんですが、pagesディレクトリって何をする場所なんですか？」
先生
「pagesディレクトリは、Webサイトのページそのものを作るための大切な場所です。」
生徒
「フォルダにファイルを置くだけでページになるって本当ですか？」
先生
「本当です。Next.jsのpagesディレクトリは、ファイル名とURLがそのまま結びつく仕組みになっています。」
生徒
「それなら、パソコンに詳しくなくてもできそうですね。」
先生
「大丈夫です。順番に見ていけば、自然と理解できますよ。」
1. Next.jsとは何かをやさしく理解しよう
Next.jsは、JavaScriptを使ってWebサイトやWebアプリを作るための道具です。 特に、ページの表示が速く、検索エンジンにも強いWebサイトを作りやすい特徴があります。
プログラミング未経験の方は「フレームワーク」という言葉に不安を感じるかもしれませんが、 これは「便利な道具箱」だと思ってください。 Next.jsを使うことで、難しい設定をしなくても本格的なWebサイトが作れます。
2. pagesディレクトリとは？役割をシンプルに説明
pagesディレクトリは、Next.jsの中でも特に重要なフォルダです。 このフォルダの中に作ったファイルが、そのままWebページになります。
たとえば、pagesフォルダの中にindex.jsというファイルがあると、 それはトップページとして表示されます。 難しい設定ファイルを書かなくても、ファイルを置くだけでページが完成するのが特徴です。
3. pagesディレクトリとURLの関係
pagesディレクトリの最大の特徴は、ファイル名とURLが自動で対応する点です。 これは「ルーティング」と呼ばれる仕組みです。
ルーティングとは、URLと表示するページを結びつける仕組みのことです。 Next.jsのpagesルーターでは、この作業を自動で行ってくれます。
function About() {
return <h1>このページはAboutページです</h1>;
}
export default About;
4. index.jsの意味とトップページの仕組み
pagesディレクトリの中で特別な役割を持つのがindex.jsです。 index.jsは、そのフォルダの一番最初に表示されるページになります。
これはパソコンのフォルダを開いたときに、最初に表示されるファイルと同じ考え方です。 Webの世界でも、indexという名前は「最初」を意味します。
function Home() {
return <h1>ようこそNext.jsのトップページへ</h1>;
}
export default Home;
5. フォルダを使ったページ管理の考え方
pagesディレクトリの中では、フォルダを使ってページを整理できます。 フォルダ名もURLの一部になるため、構造がとても分かりやすくなります。
これは本棚にジャンルごとに本を分けて並べる感覚に近いです。 ページが増えても、迷わず管理できます。
function Profile() {
return <h1>プロフィールページ</h1>;
}
export default Profile;
6. pagesルーターが「旧ルーター」と呼ばれる理由
pagesディレクトリを使った仕組みは、Next.jsの初期から長く使われてきました。 現在は新しい仕組みも登場しているため、pagesルーターは「旧ルーター」と呼ばれています。
ただし、古いから使えないという意味ではありません。 今でも多くのWebサイトで利用されており、学習用としても非常に分かりやすい構成です。
7. pagesディレクトリが初心者に向いている理由
pagesディレクトリは、ファイルを置くだけでページができるため、 プログラミング未経験の方でも仕組みを直感的に理解できます。
「このファイルが、このページになる」という関係が目で見て分かるので、 Webサイトの全体像をつかみやすいのも大きなメリットです。
8. pagesディレクトリを使うときの注意点
pagesディレクトリでは、ファイル名がそのままURLになるため、 名前の付け方がとても重要です。 日本語ではなく、英語やローマ字を使うのが一般的です。
また、不要なファイルを置くと意図しないページができてしまうこともあります。 pagesフォルダは「ページ専用の場所」として意識して使いましょう。
