【Learn】新しくなったNext.jsのチュートリアルをやってみた【Next.js】【株式会社ライトコード】

※弊社エンジニアの記事になります。

はじめに

こんにちは！ライトコードでは主にPHP,Laravelを使用したWEB開発経験を積んできました、かんだむです。10月末にNext.js 14 がリリースされ、色々な発表がありました。
https://nextjs.org/blog/next-14#nextjs-learn-course

バックエンドメインでそれまでのNext.jsについてはほとんど知識がなかったのですが、GAとなったServer ActionsがまるでPHPじゃないか！という反響に興味をもち、今回14のリリースに合わせて刷新された公式チュートリアルに取り組んでみようと思いました。
今回やっていくのはこちらです。
https://nextjs.org/learn

チュートリアルの概要

今回のチュートリアルでは、CRUD処理を一通り備え、ログイン機能や検索機能がついた請求ダッシュボードアプリを作成します。GAされたばかりのServer Actionsをガッツリ使っていき、フルスタックフレームワークとしてNext.jsを使用します。
全16チャプターで構成されており、さらっとやるなら1チャプターあたり15 ~ 30分あたりで終わりますが、しっかり理解しようと関連ドキュメントを見に行ったりする必要があります。
対象範囲は開発を学び始めた初心者 ~ 新しくNext.jsを学びたい他フレームワークの経験者でしょうか。今回GAになったばかりの新機能が前提とされているため、従来のNext.js開発者でも楽しめそうです。

おもしろポイント

チュートリアルの細かい内容は割愛して、個人的にいいと思った内容や面白かったところを書いていこうと思います。

択一式のクイズ

チャプターの途中にそれまでの説明が理解できているか、簡単な択一式のクイズが用意されています。一つ抜粋するとこんな感じです。

公式が出しているガイドやチュートリアルでクイズが出てくるのは初めての体験だったのですが、シンプルな択一式で難易度もちょうどよく、とてもいい体験でした。改めて説明を読み返したりするいいフックになっていて、これは研修担当になったとき取り入れようと思いました。

Vercelを使った開発体験の良さ

散々言われていると思いますし、自身も以前に触ったことはありますが、Vercelを使ったデプロイの簡便さがもうハンパじゃないです。
本チュートリアルでは半ばでGithubへのコードプッシュとVercelを使ったアプリ公開、Vercel Postgresとの連携があります。
Vercelでのプロジェクト作成からアプリ公開までは一瞬で終わり、あとはGithubのMainブランチへ更新があるたび勝手にアプリも更新されます。インフラやCI/CDの構築・設定も面白いですが、特に初心者においてとりあえずWEBに作ったものが躓かずに公開できるというのは素晴らしいと思います。経験者であっても、このプロジェクト作成の容易さを食らうと、とりあえずVercelで……という選択肢は全然ありなんじゃないかと感じました。

…