SpeedInsights and Analytics for different endpoints

Help
1

My site has 2 endpoints that are in the same nextjs project
/ is the main endpoint for customers
/admin is for admin

I want to isolate their stats in SpeedInsights and Analytics so I’ve tried doing like this.

'use client'

import { usePathname } from "next/navigation";
import { SpeedInsights } from "@vercel/speed-insights/next"
import { Analytics } from "@vercel/analytics/react"

type InsightsProps = {}

export const Insights = ({ }: InsightsProps) => {
    const pathname = usePathname();

    const isAdminPortal = pathname.startsWith('/admin');

    const endpoint = isAdminPortal
        ? `${process.env.NEXT_PUBLIC_SITE_URL}/admin/_vercel/speed-insights/vitals`
        : `${process.env.NEXT_PUBLIC_SITE_URL}/_vercel/speed-insights/vitals`

    return <>
        {!isAdminPortal ? <Analytics /> : null}
        <SpeedInsights endpoint={endpoint} />
    </>
}

But I’m not sure if it works because the official docs is lack of information.

2

You should be able to breakdown speed insights data by path:

3

Oh! So the score on the speed insights dashboard is not the overall score but the score of a specific path? I misunderstood it. So I should not implement as above, just place the < SpeedInsights /> component to the root layout. That’s it?

4

Yes that’s correct. :slight_smile:

5

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.