Multidomain project (multisite) on NextJS

Hello! I'm a frontend developer at an e-commerce company.

I won’t talk for a long time about myself, about the company and how the need to write such a project arose; I will immediately begin to describe the solution.

Let's imagine that you have about 500-1000 domains and 5-10 different website designs, distributed between these domains something like this:

  1. domain.com, domain-[city].com, domain-[subproduct]-[city].com – “grid” 1

  2. domain2.com, domain2-[city].com, domain2-[anything]-[city].com – “grid” 2

  3. 4.5…

All sites need “one” admin panel, the databases are different. There is one design for each “grid”. Each unique domain has its own unique addresses for products/goods/services and its own product data. No redirects. All pages will be generated on the server (SSG + ISR).

Due to the last two conditions from SEO specialists, there are not many options for implementing such a project.

I used NextJS (Pages router). Since the addresses domain.com/[firstLevel] There may be a product/service, a category of product/service, an info page, or any other page, there is only one way to obtain data – to completely receive all the information on the page from the backend.

— IN folder /pages created

  • […slug].tsx

  • admin folder

  • deleted index.tsx

— IN next.config.js you need to specify the following settings to get the hostname in getStaticProps in […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*',
      },
    ];
  },

— IN getStaticProps in […slug].tsx:

Now the context contains the hostname in ctx.params.slug and the entire page path. Using React query we do

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

baseApi determined based on the received host.

also in getStaticProps you can request domainData, where there will be information on the domain (phone numbers, addresses, info for the header/footer, domain info: api, etc…) and get this data from the cache where needed

In getStaticPaths:

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

— Passing baseApi down to the component dynamic page (DynamicPage), there I repeat the request for pageData, get the data on the page, which contains:

  • page type (switch/case)

  • bread crumbs

  • content (output based on page block conditions)

  • CEO

— I make differences in CSS (fonts, colors) through