はじめに
最近、一人チャットアプリが欲しくて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>
)
}
で、発見！
無事にモック化できて、快適なモックライフをまんきつ中。
お世話になった記事