まくろぐ

📁Next.js 関連記事

  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. Material-UI を使う
    6. Material-UI のコンポーネントに独自の CSS スタイルを設定する (makeStyle)
    7. Bootstrap を使う
  3. 📁コンポーネントとレイアイト
    1. Next.js で各ページの head 要素をカスタマイズする (next/head)
    2. Next.js で全ページ共通のレイアウトを定義する(Layout コンポーネント)
    3. Next.js アプリでのリンク方法まとめ(Material-UI との連携なども) (next/link, next/router)
    4. Image コンポーネントで画像を表示する (next/image)
  4. 📁プリレンダリングとルーティング
    1. Next.js のプリレンダリング機能を使用する (getStaticProps)
    2. Next.js のダイナミックルーティング機能を利用する (getStaticPaths, getStaticProps, getServerSideProps)
    3. Next.js で Web API を作成する (API Routes)
    4. Next.js のページコンポーネントが Client と Server どちらで実行されているか調べる (isServer, isClient, NoSsr)
    5. Next.js でハッシュフラグメントを扱う(useHash カスタムフック)
    6. Next.js のコンポーネント内でクエリ文字列を取得する (next/router, useRouter)
    7. サーバーサイドで JSON や YAML ファイルを読み込む (fs.readFileSync)
  5. 📁その他
    1. Next.js の public 以下のファイルのパスを正しく扱う
    2. Next.js アプリのディレクトリ構成を考える(Atomic Design と Presentational and Container Components)
    3. Next.js で環境変数を扱う (.env, NEXT_PUBLIC, NODE_ENV)
まくろぐ
サイトマップまくへのメッセージ