Next.js開発作業チートシート

by bills · 2024年11月1日

主に自分用。随時更新。

pnpm利用
VSCode利用
GitHub管理
GitHub Pages公開

手順系

新規環境初回（nodejs/npmはディストリビューションで導入済で不要な場合あり）

sudo apt install nodejs npm
sudo npm install -g pnpm

新規アプリケーション作成

Next.jsアプリ作成

npx create-next-app@latest <アプリ名> --use-pnpm

利用機能等について問い合わせがされるので必要に応じて選択（たいていはデフォルトでよい）。<アプリ名>のフォルダが作成される。

Git

.gitignoreに以下追加

*.swp
/.vscode/

VSCodeデバッグ

.vscode/launch.jsonに以下設定

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "pnpm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "pnpm run dev",
      "console": "integratedTerminal",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

GitHubリポジトリ

GitHub

アプリ名と同じ名前のリポジトリを作成

READMEやLICENSE等は設定しない（してもよいが初回ローカルからpushが素直にできない）。
- 後からGitHub側でLICENSE追加する場合
  - リポジトリ画面 > Add file > ファイル名にLICENSE入力でライセンステンプレート選択
リポジトリURL（https://github.com/<GitHubユーザ名>/<リポジトリ名>.git取得
- 作成直後のQuick setupか、Code > Local > Clone > HTTPS

ローカル

git remote add origin <リポジトリURL>

ローカルでコピーした場合のリモートリポジトリ再設定は以下。

git remote -v
git remote set-url origin <リポジトリURL>
git remote -v

git switch main
git push -u origin main
（認証）

リモートリポジトリ変更をローカルに取り込み

git switch main
git pull --rebase

Node.jsモジュール

package.json記述の関連パッケージインストール（アプリケーション作成・既存リポジトリクローン時等の初回）

pnpm i

新規パッケージ追加インストール

実行時利用パッケージ（package.json：dependencies）

pnpm install --save <パッケージ>

開発時利用パッケージ（package.json：devDependencies）

pnpm install --save-dev <パッケージ>

パッケージアップデート

更新バージョン存在確認

pnpm outdated

アップデート（package.jsonのバージョン番号更新なし）

pnpm update

アップデート（package.jsonのバージョン番号更新あり）

pnpm install (--save-dev>) <パッケージ名>@latest

静的サイト生成（＋カスタムドメイン）関連

Next.js 14(+pnpm)でGitHub Pagesホスティング(+カスタムドメイン)

Next.js 15注

next.config.mjs → next.config.ts
- experimental missingSuspenseWithCSRBailoutは指定不可
Route Handler (REST API)は指示行指定
- export const dynamic = 'force-static';
searchParams(useSearchParams)関連イディオム変更
Next.js 15
Upgrading: Version 15

概念系

Next.jsアプリケーションディレクトリ構成

パス	概要
`/app`	route、コンポーネント、ロジック
`/app/lib`	関数、再利用ユーティリティ関数、データフェッチ関数
`/app/ui`	UIコンポーネント
`/app/ui/global.css`	全体共通CSS
`/public`	静的アセット（画像など）
`next.config.ts(バージョンにより.mjsなど)`	構成設定

/app配下のサブディレクトリ構造がURLのパス

/app → https://.../
/app/aaa → https://.../aaa
/app/aaa/bbb → https://.../aaa/bbb

Imageでの/public参照は/指定

/public/aaa.png → /aaa.png

サブディレクトリのNext.jsでの名称

パス	呼称
`/app`	Route Segment
`/app/aaa/`	Segment
`/app/aaa/bbb`	Leaf Segment

各サブフォルダで以下のファイルを配置するとアクセス可能なパスとなる（なければ外部からアクセスされない）。layout.tsxの定義はサブディレクトリにも適用される。

ファイル名	コンポーネント関数名	参照関係
`page.tsx`	`Page`	`layout.tsx`で`props`「`children`」として参照される下位のHTML要素を構成
`layout.tsx`	`RooteLayout` / `Layout`	`page.tsx`の`Page`コンポーネントを`props`「`children`」として参照しHTML要素を構成

ストリーミング（NOW LOADINGスケルトン）

スコープ	実装概要	実装詳細	備考
ページ（配下セグメント継承あり）	`loading.tsx`	`export default function Loading() {` `return 【スケルトン表示JSX】;` `}`	`page.tsx`に並置
ページ（配下セグメント継承無し）	`(<任意ディレクトリ>)/loading.tsx`	↑	`page.tsx`に並置 Webブラウザ上任意ディレクトリはパスに現れない
コンポーネント	`Suspense`	`import { Suspense } from 'react'; <Suspense fallback={【スケルトン表示コンポーネント】}> 【遅延コンポーネント】 </Suspense>`

CSS

clsx：条件で適用クラス切替

import clsx from 'clsx';
<... className={clsx(
  '【共通スタイル】',
  {
    '【特定条件スタイル1】': 【条件式1】,
    '【特定条件スタイル2】': 【条件式2】,
    ：
  },
)}

フォント

Google Fonts

/app/ui/fonts.ts （パス、ファイル（そもそも別ファイルにするか）は任意）

import { 【Googleフォント名】 } from 'next/font/google';
export const 【フォント任意参照名】 = 【Googleフォント名】({
  【以下任意】
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
});

/app/layout.ts

import { 【フォント任意参照名】 } from '@/app/ui/fonts';
<body【など】 className={${【フォント任意参照名】.className} antialiased 【その他スタイル指定】>

Font Awesome

パッケージインストール（パッケージは利用フォントによる）
注意：以降、パッケージの@と/の間（npmユーザ名）はfo”r”tawesome

pnpm install --save @fortawesome/fontawesome-svg-core
pnpm install --save @fortawesome/free-solid-svg-icons
pnpm install --save @fortawesome/free-regular-svg-icons
pnpm install --save @fortawesome/free-brands-svg-icons
pnpm install --save @fortawesome/react-fontawesome@latest

layout.tsx（例）

import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/style.css';
config.autoAddCss = false;

page.tsx（例）

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBluesky } from '@fortawesome/free-brancs-svg-icons'; // 利用したいもの次第

JSX内（例）

<FontAwesomeIcon icon={faBluesky} className="..." />

Next.js開発作業チートシート

手順系

新規環境初回（nodejs/npmはディストリビューションで導入済で不要な場合あり）

新規アプリケーション作成

Next.jsアプリ作成

Git

VSCodeデバッグ

GitHubリポジトリ

GitHub

ローカル

Node.jsモジュール

新規パッケージ追加インストール

パッケージアップデート

静的サイト生成（＋カスタムドメイン）関連

概念系

Next.jsアプリケーションディレクトリ構成

サブディレクトリのNext.jsでの名称

ストリーミング（NOW LOADINGスケルトン）

CSS

フォント

Google Fonts

Font Awesome

おすすめ

コメントを残すコメントをキャンセル

Next.js開発作業チートシート

手順系

新規環境初回（nodejs/npmはディストリビューションで導入済で不要な場合あり）

新規アプリケーション作成

Next.jsアプリ作成

Git

VSCodeデバッグ

GitHubリポジトリ

GitHub

ローカル

Node.jsモジュール

新規パッケージ追加インストール

パッケージアップデート

静的サイト生成（＋カスタムドメイン）関連

概念系

Next.jsアプリケーションディレクトリ構成

サブディレクトリのNext.jsでの名称

ストリーミング（NOW LOADINGスケルトン）

CSS

フォント

Google Fonts

Font Awesome

おすすめ

Blueskyのハンドルをカスタムドメインに変更（かつ任意のサブ名称・サブドメインをつける）

Next.js 14(+pnpm)でGitHub Pagesホスティング(+カスタムドメイン)

AWS/Azureのリソース管理（の違い）

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル