【体験Next.js&TypeScript】Material UIを使ってデザインを整える（全5回）

動画解説

解説動画の中で使っているコードを確認したい場合は、このページの後半でまとめている参考資料の中の「解説で使っているサンプルコード(GitHub)」から確認できます。

【Part1】Material UIを使うための事前準備

【Part2】モバイル用のヘッダー&メニュー実装

【Part3】PC用のヘッダー&メニュー実装

【Part4】Post一覧の見た目をGridで整える

【Part5】Cardを使ってデザインを整える

参考資料

• Next.js
  • Custom ‘App’（_app.jsについて書かれているページ）
  • Custom ‘Document’（_document.jsについて書かれているページ）
  • useRouter
  • next/link
• Material UI
  • トップページ
  • Installation
  • Server Rendering（Next.jsのサンプルコードのリンクが書かれているページ）
  • Drawer
  • App Bar
  • Material Icons
  • Hidden
  • Divider
  • Typography
  • Grid
  • Container
  • Card
  • Paper
  • makeStyles
  • createStyles
• React
  • リストと key（Reactでリスト表示を行うときに「key」を設定する理由）
• 解説で使っているサンプルコード(GitHub)
• Unsplash Source（画像のランダム表示で使っているサービス）