Tengo un sitio web multidominio en NextJs. Quiero obtener datos según el dominio y el tipo de dispositivo. Ahora puedo reconocer el dominio, pero quiero tener el agente de usuario en las reglas de reescritura y usarlo en la función getStaticProps. Aquí están mis reglas en el archivo next.config.js.
async rewrites() { return { afterFiles: [ { has: [ { type: 'host', value: '(?<host>.*)', }, { type: 'header', key: 'User-Agent', value: '(?<ua>.*)', }, ], source: '/', destination: '/organizations/:host?ua=:ua', }, ], }; },¿Sabes cómo atrapar al agente de usuario en la reescritura? o tienes alguna otra solucion? Quiero reconocer los tipos de dispositivos (móviles, tabletas o computadoras de escritorio) y representar diferentes DOM en función de ellos.
Resolví este problema con la función de middleware de NextJs. https://nextjs.org/docs/advanced-features/middleware
import { NextRequest, NextResponse } from 'next/server'; import parser from 'ua-parser-js'; // RegExp for public files const PUBLIC_FILE = /\.(.*)$/; export async function middleware(req: NextRequest) { / Clone the URL const url = req.nextUrl.clone(); // Skip public files if (PUBLIC_FILE.test(url.pathname)) return; const ua = parser(req.headers.get('user-agent')!); const viewport = ua.device.type === 'mobile' ? 'mobile' : 'desktop'; url.pathname = `/${viewport}/${req.headers.get('host')}${url.pathname}`; return NextResponse.rewrite(url); }