このアドベントカレンダーのテーマ
この連載は、
技術初心者・非エンジニアの私が、ChatGPT を相棒にしながら
Next.js で Webアプリ（ブックマークアプリ）を 0 から作り切るまでの 24 日間の記録
です。
よくある
- 「プロンプト投げたらツールが全部やってくれる」
- 「AIにコード書かせてコピペして終わり」
みたいな話ではなく、
- 手を動かすのはあくまで自分
- ChatGPT は先生・相棒・レビュー係
- わからないところを、その場で聞きながら進める
というスタイルで進めていきます。
「非エンジニアでも、ChatGPT をうまく使えば Webアプリ開発ってここまでできるのか」という実録にしたいです。
DAY1から読む↓
今日やること
Day4 のテーマは 「Next.js のフォルダ構造を理解し、はじめて自分のページを作る」 です。
Day3で「Hello Next.js」を表示できたのですがそこからどうしたらいいのかはてんでわからないので、きょうもChatGPTにお世話になりながら頑張っていきます。
Step 1. VS Codeで Next.js プロジェクトの中身を覗く
my-app フォルダを VS Code で開いたけれど…
正直、何が何なのかわからない。
ということで ChatGPT に質問。
Q：app/ フォルダって何？page.tsx は何者？
ChatGPT の回答(要約)：
- app/：Next.js (App Router) の心臓部
- page.tsx：そのフォルダの「ページ」になるファイル
- フォルダ構造＝URL構造 になるのが最大の特徴
つまり：
app/page.tsx → /
app/bookmarks/page.tsx → /bookmarks
app/bookmarks/[id]/page.tsx → /bookmarks/1
とのこと。
フォルダ名＝URL という設計になっているという認識でよさそう。
Q：じゃあ、layout.tsxって何？
ChatGPT の回答(要約)：
結論：ページ共通の「外側の枠（レイアウト）」を作るファイル。
- どのページにも共通して表示したい部分を入れる
- HTML でいう
<html><body>の役割 - 中身（page.tsx）が children としてここに差し込まれる
📌 一言で言うと
layout.tsx は “共通部分”
page.tsx は “各ページの中身” を書く場所。
🏠 例えるなら
layout.tsx = 玄関・廊下など建物の共通エリア
page.tsx = 各部屋の中
建物の骨組みは共通だけど、部屋ごとに中身が違うイメージ。
Step 2. /bookmarks ページを自分でつくってみる
いよいよ実践。
app/bookmarks/page.tsx を新規作成
VS Codeで、
app/
bookmarks/
page.tsx
を作って、こう書く。
export default function BookmarksPage() {
return (
<main>
<h1>Bookmarks Page</h1>
</main>
);
}
このコードの解説byChatGPT
💡 このコードは何をしている？
「/bookmarks というURLにアクセスしたときに表示されるページ」
を定義している。
Next.js（App Router）は
app/bookmarks/page.tsx が /bookmarks ページになる
というルールだから、このコード＝ページの中身。
🔍 コード解説（ざっくり）
export default function BookmarksPage() {
return (
<main>
<h1>Bookmarks Page</h1>
</main>
);
}
① export default function BookmarksPage() { ... }
- React の「コンポーネント」というもの
- ページを関数として定義している
- この“関数の戻り値”が画面に表示される
“default export” にすることで
Next.js がこのファイルをページとして認識する。
② return ( ... )
- この中に書いたものがブラウザに表示される
③ <main> ... </main>
- HTML の
<main>要素 - ページの「主な内容」を表す部分
④ <h1>Bookmarks Page</h1>
- 大見出し（タイトル）
- 実際に画面に表示される文字
ブラウザには そのまま「Bookmarks Page」 と出る。
保存してブラウザで：
http://localhost:3000/bookmarks
にアクセス。
ページができていることを確認。
Step 3. トップページから /bookmarks へリンクを貼る
今度は作ったページを、トップページから飛べるように変更。
app/page.tsx をこんな感じに書き換える。
import Link from "next/link";
export default function Home() {
return (
<main>
<h1>Hello Next.js</h1>
<Link href="/bookmarks">ブックマーク一覧へ</Link>
</main>
);
}
このコードの解説byChatGPT
💡 このコードは何？
これは トップページ（/） のコンポーネントで、
- タイトルを表示
- /bookmarks へのリンクを設置
している Next.js のページ。
🔍 コードの解説
import Link from "next/link";
✔ next/link から Link コンポーネントを読み込む
- Next.js が用意している「ページ遷移用」の特別なタグ
-
<a>タグの高性能版 - ページ遷移が高速になる
export default function Home() {
✔ ページのコンポーネント（トップページ）
app/page.tsx にあるので URL は / になる。
return (
<main>
<h1>Hello Next.js</h1>
<Link href="/bookmarks">ブックマーク一覧へ</Link>
</main>
);
✔ <main>：ページの主内容
✔ <h1>：タイトル表示
✔ <Link href="/bookmarks">ブックマーク一覧へ</Link>
-
/bookmarksページへ飛ぶためのリンク - クリックすると
→app/bookmarks/page.tsxを表示する - ページ全体を再読み込みせずにサクッと遷移できる（Next.js の強み）
保存してブラウザで確認。
「ブックマーク一覧へ」を押すと、http://localhost:3000/bookmarks に遷移した！
Step 4. 今日一番「わかった」こと
Day4 の学びとして一番大きかったのはこれ：
Next.jsは、フォルダ構造でページが決まるらしい。
ということ。
逆に、Next.js以外ではそうでない構造になっていて、それを学ばなければならないということに、今、危機感を覚えています。怖すぎ。
Day4 の締め：今日できたこと・明日やること
今日できたこと
- VS Code の中で app/ 以下を理解し始めた
- 「page.tsx はページになる」ことを理解した
- /bookmarks ページを自分で作った
- フォルダ構造＝URL 構造という Next.js の魅力を知った
- トップページ → /bookmarks の遷移を作れた
今日は「アプリの最初の形」ができた日。らしいです。
明日やること（Day5）
Day5 は、ついに フォーム に挑戦します。
- 入力フォームを作る
- 「URLを保存するための最初のUI」を作る
- ChatGPT に React の
useStateを教えてもらう - 入力した文字を画面で表示してみる
いよいよ”アプリ感” が出てくる…のか？？