【イントロダクション】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルのイントロダクションに関するメモです

Next.jsの公式チュートリアルの該当ページ
前置き
作るもの
概要
前提
システム要件

Next.jsの公式チュートリアルの該当ページ

Learn Next.js | Next.js

Learn how to build a full-stack web application with the free, Next.js App Router Course.

前置き

本チュートリアルでは、Next.js（App Router）でフルスタックウェブアプリを作成します

作るもの

簡単な財務ダッシュボードを作ります。

（とはいえ、あまり完成品のイメージがわかない。。。）

機能としては

パブリックに公開されているページ
ログイン
ログイン後に見れるダッシュボード
ユーザが請求書を追加、編集、削除できる
データベースも使用

概要

UIを整える
画像、リンク、フォントの最適化
ルーティング
DBからのデータの取得
検索とページネーション
キャッシュ
エラー処理
バリデーションとアクセシビリティ
認証
メタデータ

前提

JavaScriptおよびReactの基本を理解していること

Reactを触ったことないよという方はReact Foundationsコースを先に受講するとよいです

システム要件

Node.js 18.17.0以降がインストールされている。
OS：macOS、Windows（WSLでも可）、Linux

今回私は、WindowsPCでWSL2のUbuntu 22.04.4、Node.js 18.17.1を使います

// Ubuntu
$ cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04.4 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.4 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy

// Node.js
$ node -v
v18.17.1