🌟
【イントロダクション】Next.jsのチュートリアルをやってみた
Next.js の公式チュートリアルのイントロダクションに関するメモです
Next.js の公式チュートリアルの該当ページ
前置き
本チュートリアルでは、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
Node.js をインストールしていない場合は ↓ の記事を参考にしてみて下さい
次章のメモ
Discussion