ブログ

先日に引き続きMSWとFakerの導入を試す。

サーバー側の設定では前回行った instrumentation.ts を使った設定は削除する。

instrumentation.ts による設定はホットリロードに対応しておらず不具合が出るとのこと。

https://github.com/mswjs/examples/pull/101

layout.ts でやるといいらしい。

if (process.env.NEXT_RUNTIME === "nodejs" && process.env.NEXT_PUBLIC_ENABLE_MSW === "true") {
  const { server } = await import("@/lib/msw/setup/server");
  server.listen();
}

クライアント側では Suspense と use を使って、コンテンツの表示をService Workerが起動するまで待つよう変更する。

"use client";

import { ReactNode, Suspense, use } from "react"

type Props = {
  children: ReactNode;
}

const mockEnablePromise = generateMockEnablePromise();

async function generateMockEnablePromise() {
  if ( typeof window !== 'undefined' ) {
    const { worker } = await import('../setup/browser');
    return worker.start();
  }
  return Promise.resolve();
}

export default function MswProvider({ children }: Props) {
  return <Suspense fallback={null}><Inner>{children}</Inner></Suspense>;
}

function Inner({ children }: Props) {
  use(mockEnablePromise);
  return <>{children}</>;
}

本番ビルドに含まれないように、 MswProvider を使う箇所（ layout.tsx ）で分岐させて動的に読み込む。（本番では NEXT_PUBLIC_ENABLE_MSW を false に固定する）

async function MswProvider({children}: {children: ReactNode}) {
  if (process.env.NEXT_PUBLIC_ENABLE_MSW === "true") {
    const MswProvider = (await import('@/lib/msw/provider')).default;
    return <MswProvider>{children}</MswProvider>
  }
  return <>{children}</>;
}

NEXT_PUBLIC_ENABLE_MSW ではなく ENABLE_MSW で試してみたところビルドに含まれてしまったので NEXT_PUBLIC をつけた。クライアント用ビルド時に ENABLE_MSW が見れない → if文のなかみ（ import('@/lib/msw/provider') ）が残る → 一緒にビルドされる、という感じな気がする。

不要なifが除外される前提で書くのはあまり良くないのかもしれない、、、

あとService Worker用のスクリプト（ mockServiceWorker.js ）がデプロイに含まれないよう .gitignore に追加する。この方法がベストかわからないが mockServiceWorker.js は

npx msw init public --no-save

で自動生成できるのでgitに含めなくても問題はない。 --no-save は package.json に設定を追加しないオプション。すでに設定があっても聞いてくる？みたいなので指定。

async function MswProvider({children}: {children: ReactNode}) {
  if (process.env.NEXT_PUBLIC_ENABLE_MSW === "true") {
    const MswProvider = (await import('@/lib/msw/provider')).default;
    return <MswProvider>{children}</MswProvider>
  }
  return <>{children}</>;
}

Stitch

https://stitch.withgoogle.com/

AIでアプリやWebサイトのデザインが作れるツール。Google製。ベータ版。

• テキストのみでの指示
• ワイヤフレームなどの画像をもとにした指示

どちらも可能。

成果物はデザインデータではなく、Tailwind CSSを使用したHTML/CSS形式で出力される。

公式サイトには「Figmaにエクスポートして〜」と書いてあるけど、、、Figmaの拡張機能を使えばHTMLからインポートできるらしいからそれのことかな？

そのため良くも悪くもTailwind CSSで実装しやすいデザインが出力される印象。