3

I have a multi-domain website in NextJs. I want to fetch data based on domain and device type. Now I can recognize the domain but I want to have the user-agent in rewrites rules and use it in the getStaticProps function. Here are my rules in the next.config.js file.

async rewrites() {
    return {
        afterFiles: [
            {
                has: [
                    {
                        type: 'host',
                        value: '(?<host>.*)',
                    },
                    {
                        type: 'header',
                        key: 'User-Agent',
                        value: '(?<ua>.*)',
                    },
                ],
                source: '/',
                destination: '/organizations/:host?ua=:ua',
            },
        ],
    };
},

Do you know how to catch user-agent in the rewrite? or do you have any other solution? I want to recognize device types (mobile, tablet, or desktop) and render different DOM based on them.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
elyas.m
  • 1,260
  • 1
  • 13
  • 20
  • _"I want to have the user-agent in rewrites rules and use it in the getStaticProps function"_ - `getStaticProps` runs on the server at [build time](https://nextjs.org/docs/basic-features/data-fetching#only-runs-at-build-time). You don't have access to request-specific information like headers or user-agent in it. – juliomalves Nov 10 '21 at 22:29
  • Thanks for your reply. I know that, but I want to predict that. for example, I generate two versions of my page in build time (mobile and desktop) and after that in runtime based on request choose the proper builder page. I do this strategy for the host (I have a couple of organizations which has separate domain). – elyas.m Nov 11 '21 at 07:04
  • I see, fair enough. With the above rule, does the user-agent not get added as a query string, or does the rewrite not happen at all? – juliomalves Nov 11 '21 at 08:02
  • In query params, I have the host value and the ua not included . – elyas.m Nov 11 '21 at 09:47
  • @juliomalves would you check this, it is similar issue https://stackoverflow.com/questions/71968407/how-to-url-rewrite-based-on-host-in-next-js – János Jul 15 '22 at 17:08
  • @juliomalves I would not use user agent is the response, but I would check wether it contains a certain substring, do you know how could I do it? https://stackoverflow.com/questions/73000041/how-to-use-has-object-when-rewriting-url-in-next-js – János Jul 15 '22 at 22:23
  • Your question just solved my issue for static generation based on host, thank you @elyas.m :) – ΔO 'delta zero' Feb 05 '23 at 17:51

1 Answers1

1

I solved this issue with the NextJs middleware feature. 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);
}
elyas.m
  • 1,260
  • 1
  • 13
  • 20