完成と次のステップ

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 を人に見せるときの一言と、次に進む道をまとめます。