Personalizar templates por subdominios | midudev - Aprende y Mejora en Programación JavaScript | Page 1

Hola chicos estoy haciendo un servicio que requiere que cada cliente tenga su propio sitio web del tipo multi-tenant.

Hasta ahora lo que he investigado hice un middleware:

import { NextResponse } from 'next/server'

const SUBDOMAINS = [{ subdomain: 'customer1' }, { subdomain: 'customer2' }]
const ALLOWED_DOMAINS = ['localhost:3000', 'mydomain.app']

export const config = {
  matcher: [
    '/((?!api/|_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)'
  ]
}
export default async function middleware (req) {
  const url = req.nextUrl
  const hostname = req.headers.get('host')
  const subdomain = hostname.split('.')[0]

  const isAllowedDomain = ALLOWED_DOMAINS.some(domain => hostname.includes(domain))

  if (isAllowedDomain && !SUBDOMAINS.some(d => d.subdomain === subdomain)) {
    return NextResponse.next()
  }

  return NextResponse.rewrite(new URL(`/${subdomain}${url.pathname}`, req.url))
}

Y luego en mi estructura de directorios tengo en un [subdomain]

├── src
│    ├── app
│    │   ├── middleware.js
│    │   ├── [subdomain]
│    │   │   └── page.jsx

El tema que para recuperar el nombre del subdominio en el page de [subdomain] lo hacen de esta forma en la guía que conseguí:

'use client'

import { useParams } from 'next/navigation'

export default function Component () {
  const params = useParams()
  const tenant = params.subdomain
  console.log(tenant)

  return (
    <h1>Hola {tenant}</h1>
  )
}

y se pierde el SSR y precisamente como es una página que será publica una especie de landing page necesitamos aprovechar lo mejor posible el SEO y con ello el SSR.

#Personalizar templates por subdominios