Next.jsで作ったWebアプリが2つあり、その1つをもう一つのドメインのサブディレクトリで表示させるために、rewritesの設定をしました。ページは表示されましたが、正常に動いていないようでした。Webブラウザのコンソールを確認すると、以下のエラーが発生していました。

リソースをロードできていないようでした。アセットがあるパスとアセットを読み込むパスが異なっていることが原因で発生しているエラーです。

エラーを解消する方法

サブディレクトリで表示させているプロジェクトのnext.config.mjsでbasePathを設定します。

const nextConfig = {
    basePath: '/apps/app2',
};

rewrite前のURLが変わるため、親のプロジェクトのnext.config.mjsのdestinationの値を変更する必要があります。

const nextConfig = {
    async rewrites() {
        return [
            {
                source: '/apps/app2',
                destination: 'https://xxxx.vercel.app/apps/app2',
            },
            {
                source: '/apps/app2/:match*',
                destination: 'https://xxxx.vercel.app/apps/app2/:match*',
            },
        ];
    },
    // ...

ローカル環境ではhttp://localhost:3000で表示させる

basePathを設定すると、ローカル環境でのホームのURLが http://localhost:3000/apps/app2 のようになります。

本番環境かそうでないかで条件分岐することで、ローカル環境ではhttp://localhost:3000で表示させることができます。

const isProd = process.env.NODE_ENV === 'production';
const basePath = isProd ? '/apps/app2' : '';

/** @type {import('next').NextConfig} */
const nextConfig = {
    basePath: basePath,
};

export default nextConfig;

publicフォルダに入っている画像を表示させる

画像がpublic/images/test.jpgにあるとします。以下のコードでは、画像が表示されません。

<Image src="/images/test.jpg" width="640" height="360" alt="test" />

次のように書くことで、publicフォルダに入っている画像のパスが正しくなり、画像が表示されます。basePathを環境変数にしました。

NEXT_PUBLIC_BASE_PATH=/apps/app2

const isProd = process.env.NODE_ENV === 'production';
const basePath = isProd ? process.env.NEXT_PUBLIC_BASE_PATH : '';

/** @type {import('next').NextConfig} */
const nextConfig = {
    basePath: basePath,
};

export default nextConfig;

const isProd = process.env.NODE_ENV === 'production';
export const basePath = isProd ? process.env.NEXT_PUBLIC_BASE_PATH : '';

import React from 'react';
import basePath from '@/lib/utils';

const Page = () => {
    return (
        <div>
            <Image src={basePath + '/images/test.jpg'}  width="640" height="360" alt="test" />
        </div>
    );
}

export default Page;

参考ページ

• next.config.js Options: rewrites | Next.js
• next.config.js Options: basePath | Next.js
• How can I serve multiple projects under a single domain?