はじめに

最近、一人チャットアプリが欲しくてNextjsを使い始めました。
フロント：Next.js、バックエンド：Spring Boot で、一旦開発。

その後、デザインを集中して直したくて、バックエンドをモック化したいなーって思い。mswを利用する際に、ハマった点を残しておきます。

構成

next 15.1.7
react ^19.0.0
react-dom ^19.0.0
msw ^2.7.1

前提

モック化したかったのは、クライアント側からのリクエストをモック化。
※ サーバ側からのリクエストのモック化ではない。

ハマったところ

の手順をベースに進めていましたが、以下を App Routerの場合、どこに書けばよいのか。

enableMocking().then(() => {
  ReactDOM.render(<App />, rootElement)
})

色々な記事を見ていて、以下のQiitaのおまけに記載の

以下のPRに辿り着く。

の examples/with-next/app/layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <MSWProvider>{children}</MSWProvider>
      </body>
    </html>
  )
}

で、発見！
無事にモック化できて、快適なモックライフをまんきつ中。

お世話になった記事