Как сделать мультидоменность на Next.js?

Question

[djEban]

Есть следующая структура страниц

pages
- [host]
  - index.tsx
  - about.tsx

Есть следующий мидлвейр

const PROD_HOST = "prod.com";
const PUBLIC_RX = /\.(.*)$/;

function middleware(req) {
    const host = req.headers.get("host");
    const path = req.nextUrl.pathname;

    if (host !== PROD_HOST) {
      if (isIgnored(path)) {
          return NextResponse.next();
      }
      const newPath = `${host}/${path}`;
      return NextResponse.rewrite(new URL(newPath, req.nextUrl));
    }

    return NextResponse.next();
}

function isIgnored(path) {
    return path.startsWith("/_next") || path.startsWith("/static") || PUBLIC_RX.test(path);
}

Здесь я просто игнорирую все статические файлы, а реврайчу только страницы.

При первом заходе все отлично грузится - пропсы прилетают как на сервере, так и на клиенте. Но при навигации на другие страницы пропсы на сервере есть, а вот на клиенте - пустой объект. В девтулзах запрос за json'ом страницы (там все ее пропсы) завершается успехом, но пропсы все равно не прилетают на клиенте.

В чем может быть проблема? Может сталкивался кто с этим?

UPD:
Например, зашел на страницу index.tsx, далее пошел на about.tsx, в консоли запрос /_next/development/about.json, пропсы внутри файла есть, а вот на клиенте их нет

Также заметил, что если заходишь на первую страницу, рядом с запросом за json есть кверя ?host=... А вот когда уже на клиенте переходишь куда-то, в запросе этой квери почему-то нет. Может в этом причина? Но как такое пофиксить? Некст не предоставляет нам доступ к таким данным

Answer 1

[djEban]

Ну что сказать, это жоска, 6 часов убитого времени и вот в чем лично у меня была проблема , может кто столкнется

Былая функция-обертка, условно такая

async function withHost(getStaticPropsData) {
    const getStaticProps = async (ctx) => {
        const response = await getHost(ctx.params.host);
        const gspData = await getStaticPropsData(ctx);
        return {
            props: { host: response.data, ...gpsData.props }
        }
    };

    const getStaticPaths = async () => {
        const response = await ServerCache.get("hosts");
        return {
            paths: response.data.map(...), 
            fallback: "blocking" 
        };
    }

    return { getStaticPaths, getStaticProps };
};

Здесь все просто: каждую хост-страницу оборачиваю в данную обертку, чтобы получить статические пути + для каждой страницы базовую информацию о хосте

Проблема была, не догадаетесь, в том, что я экспортировал getStaticPaths (!!!) и использовал вот так:

// index.tsx

export const { getStaticPaths, getStaticProps } = withHost(() => ({
    props: {}
}))

Достаточно было вынести gsp в отдельную функцию и использовать ее лично для каждого роута

export const getStaticProps  = withHost(() => ({
    props: {}
}))

export const getStaticPaths = getHostsPaths();