完成と次のステップ
fleama が公開されました
58 レッスンかけてやってきたことを並べると、こうなります。
- App Router — フォルダの形がそのまま URL になる作りで、7つの画面を並べた
- Server Components — 画面を開く前にサーバー側でデータを取り、最初の HTML に商品名を入れた
- 動的ルートと 404 — 商品 ID ごとのページを1枚のファイルで受け、無い ID には用意した画面を返した
- metadata — ページごとにタイトルと OGP を出し分けた
- route.ts — 自分で
/api/itemsを作り、同じアプリの中から呼んだ - デプロイ — 本番ビルドを通し、URL を持って公開した
1回目に見た「空っぽの div id="root" だけが返る HTML」は、もうどこにもありません。検索エンジンにも人にも中身が届くアプリになりました。
これはポートフォリオになる
公開した URL は、そのまま人に見せられます。見せるときに語れることが、作ったものと同じくらい大事です。
「React で作ったフリマアプリを Next.js に移しました。SPA だと最初の HTML が空で検索に載らないので、App Router で書き直してサーバー側で組み立てるようにしました。商品ページには metadata を付けて、SNS に貼ったときもカードが出ます」
これが言えるなら、フレームワークを使えるだけでなく、なぜそれを選んだのかを説明できる人として見てもらえます。求人票にある「Next.js」の1行が意味しているのは、だいたいここまでです。
次の一歩
まだ本物ではないところが1つ残っています。データです。route.ts で作った /api/items は、返す中身をコードに直接書いていました。アプリを作り直せば消えますし、誰かが出品したものも残りません。
ここを本物にするのが Node.js入門 です。データベースに繋いだ API を自分で書き、fleama の画面は変えないまま、出品したものが残るようにします。API を自分で持てるようになると、作れるものの幅が一気に広がります。
もう1つの道が サーバー構築入門 です。自サーバー案の回で書いた fleama-next.service の続きで、置き場所から運用までを自分の手に持ちます。
どちらへ進むにしても、手元には動いている fleama が残っています。次に習うことは、全部これに足していけます。おつかれさまでした。
演習
できるようになったことを書き出し、fleama を人に見せるときの一言と、次に進む道をまとめます。