プロジェクト構成
プロジェクトの作り方
自分のパソコンで Next.js のプロジェクトを始めるときは、次の1行です。
npx create-next-app@latest fleama-nextいくつか質問されます。このコースでは TypeScript を使う、App Router を使う、の2つだけ「はい」を選んでおけば足ります。
できあがる形
出来上がったフォルダの中で、これから毎日触るのは app/ だけです。
fleama-next/
app/
layout.tsx 全ページを囲む枠
page.tsx / のページ
globals.css 全体のスタイル
public/ 画像などそのまま配るもの
package.jsonapp/ の中は、フォルダの形がそのまま URL になります。app/page.tsx は / のページ、app/items/page.tsx は /items のページです。ここが Next.js のいちばん大きな決まりごとで、次の章で本格的に扱います。
名前が決まっているファイル
app/ の中では、ファイル名そのものに意味があります。今日覚えるのは2つです。
page.tsx は、その URL で表示される中身です。関数を export default で1つ出します。
layout.tsx は、その下にあるページ全部を囲む枠です。ヘッダーやフッターのように、どのページでも出るものを置きます。app/layout.tsx はいちばん外側の枠なので、<html> と <body> を自分で書きます。ここだけは特別です。
囲まれる中身は children で受け取ります。React実践で書いた children と同じものです。
演習
app/page.tsx を書いて、最初のページを出します。