Issues with implementing Speed Insights on a Vercel deployment have arisen as an error is encountered during the build process. The error message reads:
Failed to compile.
./node_modules/@vercel/speed-insights/dist/next/index.mjs
Module not found: Can't resolve 'next/navigation.js' in '/vercel/path0/node_modules/@vercel/speed-insights/dist/next'
To address this, I have installed the required dependencies using:
yarn add @vercel/speed-insights
In addition, I have included the SpeedInsights component in _app.tsx through the following code snippet:
import React from 'react';
import '../styles/global.css';
import Head from 'next/head';
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next';
const App = ({ Component, pageProps }) => {
const inputRef = React.useRef<HTMLInputElement>(null);
const onClickAnywhere = () => {
inputRef.current.focus();
};
return (
<>
<Head>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
key="viewport"
maximum-scale="1"
/>
</Head>
<div
className="text-light-foreground dark:text-dark-foreground min-w-max text-xs md:min-w-
full md:text-base"
onClick={onClickAnywhere}
>
<main className="bg-light-background dark:bg-dark-background w-full h-full p-2">
<Component {...pageProps} inputRef={inputRef} />
</main>
</div>
<Analytics />
<SpeedInsights />
</>
);
};
Your assistance in resolving this issue would be greatly appreciated.