Переписывает на основе user-agent в nextjs

Question

У меня есть мультидоменный сайт в NextJs. Я хочу получать данные в зависимости от домена и типа устройства. Теперь я могу распознать домен, но я хочу, чтобы пользовательский агент переписывал правила и использовал его в функции getStaticProps. Вот мои правила в файле 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',
            },
        ],
    };
},

Вы знаете, как поймать user-agent при переписывании? или у вас есть другое решение? Я хочу распознавать типы устройств (мобильные, планшетные или настольные) и отображать различные модели DOM на их основе.

Answer 1

Я решил эту проблему с помощью функции промежуточного программного обеспечения 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);
}