🐺
Next.jsのrewritesでリクエストをmockに向ける
はじめに
Next.jsで作成されたアプリケーションとは別で管理しているmock serverに対して
ブラウザからのリクエストを送信させるようにしてみた。
結論
next.config.js Optionに用意されているrewritesを利用して
URLプロキシにより開発時はmock serverに送信させます。
実装
module.exports = {
async rewrites() {
return [
{
source: '/:path*',
destination: 'http://localhost:3100/:path*',
},
]
},
}
本記事ではすべてのNext.jsルートをチェックした後
Next.jsを既存のmock serverへのプロキシにフォールバックさせています。
sourceの/:path*はワイルドカードを駆使して全てのリクエストにマッチさせるように宣言しています。
destinationにはmock serverのpathを指定しています。
外部APIへのMock
外部APIのmockは、REST APIを採用している場合であれば
rewritesを使用してmock serverにリクエストするように設定しています。
本プロジェクトでは、hostを環境変数で設定するように実装をしているため
開発時はNext.jsのbaseUrlと同様にすることでプロキシ対象になるようにしています。
※ライブラリのMockに関してはライブラリ毎に用意されていることもあるためここでは割愛します。
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL // http://localhost:3000
function fetch(`${baseUrl}/hoge/`, 'GET').then(...) // localhost:3100に対して送信される
その他機能
今回は使用しませんでしたがnext.configのOptionには
正規表現を駆使したPath MatchingやQueryのMatchingも用意されています。
Discussion