まくろぐ
  1. 📁 Next.js アプリの環境構築
    1. Next.js で HelloWorld（プロジェクト作成からサーバー起動まで）
    2. Next.js のプロジェクトを TypeScript 化する
    3. Next.js アプリのソースコードを GitHub で管理する
    4. Next.js アプリを GitHub Actions でビルドして GitHub Pages で公開する
    5. Next.js アプリを Vercel で公開する
    6. Vercel のウェブサイトに独自ドメインを割り当てる
    7. Next.js で src からの相対パスで import できるようにする (tsconfig.json)
  2. 📁 スタイル設定 (CSS)
    1. すべてのページにグローバルな CSS を適用する (pages/_app.ts)
    2. コンポーネント単位の CSS を作成する (CSS Modules)
    3. Sass (scss/sass) を有効にする
    4. コンポーネント内に直接 CSS を記述する (styled-jsx)
    5. Bootstrap を使う
    6. Material-UI を使う
    7. MUI コンポーネント (v4) に独自のスタイルを設定する (makeStyles)
    8. MUI コンポーネント (v5) に独自のスタイルを設定する (sx prop、styled)
    9. MUI でカスタムコンポーネントに sx プロパティを渡せるようにする
  3. 📁 コンポーネントとレイアイト
    1. Next.js で各ページの head 要素をカスタマイズする (next/head)
    2. Next.js で全ページ共通のレイアウトを定義する（Layout コンポーネント）
    3. Image コンポーネントで画像を表示する (next/image)
    4. Next.js アプリでのリンク方法まとめ（mui/Material-UI との連携なども） (next/link, next/router)
  4. 📁 プリレンダリングとルーティング
    1. Next.js のプリレンダリング機能を使用する (getStaticProps)
    2. Next.js のダイナミックルーティング機能を利用する (getStaticPaths, getStaticProps, getServerSideProps)
    3. Next.js でハッシュフラグメントを扱う（useHash カスタムフック）
    4. Next.js でブラウザ履歴で戻るボタンを表示する (router.back)
    5. Next.js でローカル開発時 (next dev) のみ有効なデバッグページを作成する (getStaticProps)
    6. Next.js のコンポーネント内でクエリ文字列を取得する (next/router, useRouter)
    7. Next.js のページコンポーネントが Client と Server どちらで実行されているか調べる (isServer, isClient, NoSsr)
    8. サーバーサイドで JSON や YAML ファイルを読み込む (fs.readFileSync)
  5. 📁 API Routes
    1. Next.js の API Routes 機能で Web API を作成する
    2. Next.js から AWS DynamoDB にアクセスする
  6. 📁 その他
    1. Next.js アプリに Google Analytics を設定する (next/script)
    2. Next.js アプリのディレクトリ構成を考える（Atomic Design と Presentational and Container Components）
    3. Next.js で useState とローカルストレージ (localStorage) を連動させる
    4. Next.js で環境変数を扱う (.env, NEXT_PUBLIC, NODE_ENV)
    5. Next.js で開発環境で実行しているときに Web サイト上に dev 表示する (TargetEnvIndicator)
    6. Next.js の public 以下のファイルのパスを正しく扱う
React 関連記事
へ戻る
まくろぐ
サイトマップ ｜ まくへのメッセージ