pnpm dlx create-next-app@latest
lern nextjs
chapter1
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"
chapter2
app/ui/global.css 全てのルートに適用されるCSS トップレベルでインポートしておくのがよい。app/layout.ts
Tailwind
CSSModules
どちらも使えるし、併用することもできる
clsx cssのclass nameを簡単に切り替えることができるライブラリ
chapter3
layout shiftは避けるべき
next/image コンポーネントで画像最適化を実現できる
chapter4
URLの階層はフォルダで実現する
フォルダの中にpage.tsxを配置する必要がある。つまり/app/dashboard/page.tsxというファイルが/dashboardというURLのパスに対応する。
layout.tsx にレイアウトを書いていく
ルートレイアウト（app/layout.tsx）は必要。全てのページで共有されるレイアウト。,
chapter5 ページ間のナビゲーション
<a>タグでリンクすると毎回ページ全体がリフレッシュされてしまう。→next/Linkコンポーネントを使うとクライアントサイドナビゲーションを実現できる。
またコード分割とプリフェッチが行われる。
usePathname()フックで現在のパスを取得できる。clsxと組み合わせて動的にスタイルを変更できる。
chapter6 データベースのセットアップ
VercelのPostgresを利用できるようにセットアップする
SDKをインストールする
pnpm add @vercel/postgres
データをシードする ※ドキュメントと手順が違う
### 環境変数をセットする export POSTGRES_URL=xxxxxxxxx ### seedスクリプトを実行 node scripts/seed.js
chapter7 データをフェッチする
React Server Componentsを使う
chapter8 静的レンダリング、動的レンダリング
chapter9 ストリーミング
loading.tsxファイル
ページがローディング中の表示を切り替えることができる
<Suspense>の利用
chapter10 パーシャルプリレンダリング
experimental_ppr = true
chapter11 検索フォームとページネーションの追加
- 検索条件をURLパラメーターに反映する
デバウンシング：キー入力ごとに実行させない。最適化させる。
pnpm add use-debounce
chapter12 データの追加・更新・削除
revalidatePathでprefetchのキャッシュを更新する
chapter13 エラーハンドリング
try catchでエラーハンドリングする リダイレクトはtry catchの外に記述する error.tsx でデフォルトのエラーハンドリング、エラー表示を行える リソースが存在しない場合は notFound() がある → not-found.tsxも作る
chapter14 アクセシビリティの改善
Nextjs には eslint-plugin-jsx-a11y が含まれている
Client-sideバリデーション - requiredでブラウザのバリデーションが効く
Server-sideバリデーション - useActionState フックを使う ※useActionStateはCanaryリリースのものなのでuseFormStateを使うのもあり 参考Issue
ARIA(Accessible Rich Internet Applications)
chapter15 認証の追加
NextAuth.jsを使う方法がある
pnpm i next-auth@beta
下記コマンドでランダムキーを作成し、.envファイルにAUTH_SECRETという環境変数で設定する
openssl rand -base64 32
chapter15 メタデータの追加
Nextjsでは2つの方法で設定できる
- コンフィグベース
- ファイルベース
