I_AM_NOT_SPAM kobitoDevelopment

Next.js App Router: Suspense と Server Components

Suspense で Server Component を wrap する目的

Server Component が非同期処理（データフェッチ等）を含む場合、その完了までページ全体のレンダリングがブロックされる。Suspense 境界で囲むことで、該当コンポーネントの処理完了を待つ間 fallback を表示しつつ、ページの残りを先行してクライアントへストリーミングできる。

import { Suspense } from 'react';

export default function Page() {

Lambda Nano-functions アンチパターン

概要

1処理1Lambdaに細分化する設計パターン。通称 "Lambda per method" / "Nano-functions"。通常のプログラミングにおける関数分割をそのままLambda分割に持ち上げる構成。

問題点

1. レイテンシの劣化

httpOnly Cookie の誤解 ― 「読めない」は「悪用できない」ではない

よくある誤解

「Cookie を httpOnly にすれば JavaScript から読めないので安全」

半分正しく、半分間違い。httpOnly 属性は document.cookie 経由での読み取りを防ぐが、Cookie を読めなくても悪用できるという点が見落とされがち。

また、httpOnly は「Cookie 窃取による恒久的なセッションハイジャック（別端末からのログイン）」を防ぐ防具ではあるが、「今その瞬間、ユーザーのブラウザを操ること」は防げない。即死を避けるヘルメットであり、飛んでくる矢（XSS）そのものを防ぐ盾ではない。

ログアウト処理を GET で構築してはいけない理由（PHP）

結論

ログアウトは session_destroy() によるセッション破棄、すなわちサーバー側の状態変更操作である。HTTP の仕様上、状態変更操作には POST（または DELETE）を使用する。GET で実装した場合、以下の具体的な問題が発生する。

1. CSRF（クロスサイトリクエストフォージェリ）攻撃が成立する

Dependabot 導入ガイド

GitHub Dependabot による依存関係の自動更新管理。

Next.jsでmicroCMSの下書き機能を実装する際の注意点

前提

microCMSはヘッドレスCMSであり、APIでJSONを返すだけで、HTMLのレンダリング機能を持たない。下書きコンテンツが公開後にサイト上でどう表示されるかを確認するには、Next.js側に「下書きデータを受け取って本番と同じレイアウトで描画するモード」を実装する必要がある。

核心の問題

ISRで静的生成しているページで draftMode() や cookies() を isEnabled の分岐外（＝関数のトップレベルなど）で呼ぶと、Next.jsはそのページを動的ページと判定する。結果、全リクエストでサーバー実行され、ビルド時生成のHTMLキャッシュが使われなくなる。isEnabled === true の分岐内に閉じ込めれば、isEnabled === false 時は静的生成済みHTMLがそのまま返る。

	/**
	* 下方向に三角形のしっぽを持つ吹き出し形状。
	* CSS shape() 関数を使用し、clip-path で切り抜く。
	* border-shape でボーダーを描画する。
	*/
	.balloon {
	padding-block: 40px calc(40px + calc(12px * tan(60deg)));
	padding-inline: clamp(24px, 5%, 48px);
	clip-path: shape(
	from 12px 0,

	/**
	* 2カラムレイアウト（サイドバー + メインコンテンツ）
	*/

	.layout {
	display: flex;
	}

	.sidebar {
	width: 200px;

	export const ROUTES = {
	// トップページ
	HOME: '/',

	// 静的ページ
	ABOUT: '/about',
	CONTACT: '/contact',
	PRIVACY_POLICY: '/privacy-policy',

	// ニュース（一覧 + 動的詳細ページ）

	.box {
	margin-top: 150vh;
	margin-bottom: 150vh;
	width: 100%;
	height: 50vh;
	background-color: red;
	}

	.box {
	/* timeline-triggerとanimation-triggerを、--box-triggerという同名を用いて紐付ける */