Мультидоменный проект (мультисайт) на NextJS

Привет! Я frontend-разработчик в одной компании, занимающейся электронной коммерцией.

Не буду долго рассказывать о себе, о компании и о том, как возникла потребность написать подобный проект, сразу приступлю к описанию решения.

Представим, что у вас порядка 500-1000 доменов и 5-10 разных дизайнов сайтов, распределенных между этими доменами примерно так:

1. domain.com, domain-[city].com, domain-[subproduct]-[city].com - "сетка" 1

2. domain2.com, domain2-[city].com, domain2-[anything]-[city].com - "сетка" 2

3. 4,5...

Для всех сайтов нужна "одна" админка, БД разные. Для каждой "сетки" один дизайн. На каждом уникальном домене свои уникальные адреса продуктов/товаров/услуг и свои данные по продуктам. Никаких редиректов. Все страницы будем генерировать на сервере (SSG + ISR).

Из-за двух последних условий от SEOшников, вариантов реализации подобного проекта остается не так много.

Я использовал NextJS (Pages router). Так как по адресам domain.com/[firstLevel] может находиться и товар/услуга, и категория товара/услуги, и инфо страница, и любая другая страница, остается только один путь получения данных - полностью получать с бэка всю информацию по странице.

--- В папке /pages создал

• [...slug].tsx

• папку admin

  • [adminFoldersAndRoutes] - в реале не один динамический путь, а много папок и файлов

• удалил index.tsx

--- В next.config.js необходимо прописать следующие настройки, чтобы получать имя хоста в getStaticProps в [...slug].tsx:

async rewrites() {
    return [
      {
        source: '/admin/:path*',
        destination: '/admin/:path*',
      },
      {
        has: [
          {
            type: 'host',
            value: '(?<host>.*)',
          },
        ],
        source: '/',
        destination: '/:host',
      },
      {
        has: [
          {
            type: 'host',
            value: '(?<host>.*)',
          },
        ],
        source: '/:path*',
        destination: '/:host/:path*',
      },
    ];
  },

--- В getStaticProps в [...slug].tsx:

Теперь в context попадает имя хоста в ctx.params.slug и весь путь страницы. С помощью React query делаем

 queryClient.prefetchQuery({
        queryFn: () => getPageData({ baseApi, url }),
        queryKey: [QUERY_KEY_FETCH_PAGE_DATA, { baseApi, url }]
      }),

baseApi определяется на основании полученного хоста.

Также в getStaticProps можно запросить domainData, где будет информация по домену (телефоны, адреса, инфо для шапки/футера, инфо домена: апи и тд...) и доставать эти данные из кэша там, где надо

В getStaticPaths:

export const getStaticPaths = async (): Promise<any> => ({
  fallback: 'blocking',
  paths: []
})

--- Передаю baseApi вниз в компонент динамической страницы (DynamicPage), там повторяю запрос на pageData, достаю данные по странице, которые содержат:

• тип страницы (switch/case)

• хлебные крошки

• содержание (вывод по условиям блоков страниц)

• СЕО

--- Различия по CSS (шрифты, цвета) делаю через <style> в DynamicPage по условиям из domainData.

--- В админке необходимо создать управление всеми сущностями, которые есть на сайтах: товары, услуги, категории товаров/услуг, страницы, пользователи, бренды и всё, всё, всё! И самое главное у всех страниц необходимо создать управление СЕО. В итоге - это в основном множество таблиц и полей форм сущностей. Админка вся на getServerSideProps и частично на CSR. На любые методы PUT/PATCH/DELETE/POST необходимо в ответ получать адреса ревалидации с бэка и отправлять на внутреннее api NextJS:

/** обработчик обновления страниц */
export default async function handler (req: NextApiRequest, res:NextApiResponse): Promise<void> {
  if (req?.method !== 'POST') {
    return res.status(405).json({ message: 'Метод не разрешен' })
  }

  try {
    if (req?.body?.secret !== process.env.REVALIDATE_TOKEN) {
      return res.status(401).json({ message: 'Неверный токен' })
    }

    if (!Array.isArray(req.body.url)) {
      return res.status(400).json({ message: 'Не правильный формат урл' })
    }

    /** промисы */
    const revalidatePromises = req?.body?.url?.map(async (url: string) => res.revalidate(url))

    /** результаты */
    const results = await Promise.allSettled(revalidatePromises)

    /** кол-во успешных */
    const successfulRevalidations = results.filter(result => result.status === 'fulfilled').length

    return res.json({ revalidated: true, successfulRevalidations })
  } catch (err) {
    return res.status(500).send('Ошибка ревалидации из хэндлера')
  }
}

Единственное неудобство - необходимость в каждый запрос передавать baseApi.

Честно говоря, до сих пор пишу и поддерживаю этот проект и ощущение, что где-то, что-то делаю не так, но все работает: страницы генерируются, регенирируются по запросу. Важные данные по цене и наличию делаю клиентскими.

Может кто-то делал что-то подобное, интересно мнение по поводу этого подхода.