appの中に、新しいページを足せる- 自分のURL
/mypageを画面に出せる - 見た目を「部品（コンポーネント）」に分けられる
前の回で見た app の地図をつかいます。20〜30分。
ページの作り方：フォルダ＋page
Next.jsでは、URLは app の中のフォルダの名前で決まります。そして、そのフォルダに page.tsx という名前のファイルを置くと、それが画面になります。
たとえば /mypage というURLを出したいなら、こう作ります↓
// app の中に mypage フォルダ → その中に page.tsx
app/mypage/page.tsx
つまり フォルダ名＝URL、page.tsx＝そのページの中身。これだけで /mypage ができます。
コンポーネント：見た目を返す関数
page.tsx の中には、関数を1つ書きます。この「見た目を 返す関数」のことを コンポーネント（部品）と言います。中身はこんな形↓
export default function MyPage() {
return <h1>わたしのページ</h1>
}
return のうしろに、HTMLみたいな <h1>…</h1> が書けています。これを JSX と言って、「JSの中に書けるHTMLみたいなもの」です。
このファイルを保存するだけで、ブラウザの /mypage に「わたしのページ」が出ます。リストに足したりする手間はいりません。
npm run dev が動いている状態で、つぎをやってみよう。
appの中にmypageフォルダを作り、その中にpage.tsxを置く- 上の例をそのまま書いて保存し、
localhost:3000/mypageを開く（「わたしのページ」が出る！） returnの中に、見出しのほかに<p>すきなもの</p>など文を足してみる- （よゆうがあれば）あいさつ部分を別の関数（部品）に分けて、それを
returnの中で使ってみる
ヒント： return の中に部品を2つ以上ならべるときは、まわりを <div> … </div> で1つにまとめると、うまくいくよ。
💡 AIに聞いてみよう：「
return の中に書くのは、ふつうのHTML？ HTMLとのちがいは何？」と聞いてみよう。JSX という言葉の意味が、もっとはっきりするよ。
- ページを足すには何を作る？（→ フォルダと
page.tsx） /mypageを出すフォルダの名前は？（→mypage）- コンポーネントって何？（→ 見た目を返す関数）
つぎの回（だい20）では、本物のアプリ /kuku を読んで、入力→しょり→出力の流れを追います。