Next.js Discord

Discord Forum

Problem with speed insights

Answered
Sloth bear posted this in #help-forum
Open in Discord
Sloth bearOP
I have been trying to use Vercel's speed insights but I keep getting a navigation error when I include it in my _app.tsx file.

import { useParams, usePathname, useSearchParams } from "next/navigation.js";
         ^^^^^^^^^
SyntaxError: Named export 'useParams' not found. The requested module 'next/navigation.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
Answered by riský
@Sloth bear what nextjs version are you on anyway, maybe you should update to that version specified
View full answer

17 Replies

Sloth bearOP
I only get that error when I include the SpeedInsights component

import '../styles/globals.css';
import 'react-toastify/dist/ReactToastify.css';
import type { AppProps } from 'next/app';
import { SpeedInsights } from '@vercel/speed-insights/next';

function StudyTime({ Component, pageProps }: AppProps) {

  if (typeof document !== 'undefined') {
    const theme = localStorage.getItem('theme') || 'light';
    document.documentElement.classList.add(theme);
  }

  return (
    <>
      <Component {...pageProps} />
      <SpeedInsights />
    </>
  );
}

export default StudyTime;
riský
there are 2 issues i see here:
1. next/navigation is for app dir not pages
2. you should be able to import without .js (it may confuse itself with it)
Sloth bearOP
yeah i am using pages, and what od you mean by the 2nd point?
oh i see i'm not importing next/navigation myself anywhere, i think its speed insights
i dont even know what that navigation is for, im just trying to get speed insights to work
next/navigation is next/router for app dir (they changed some things)
but i do wonder why you cant use speed insights on pages dir
Sloth bearOP
oh i see, so is there anything i can do?
riský
well... one would think that you have done it correctly as the docs have
Sloth bearOP
yes i was following the docs, yet i still ran into the issue
riský
can you try the "older nextjs version" method maybe
riský
@Sloth bear what nextjs version are you on anyway, maybe you should update to that version specified
Answer
Sloth bearOP
ahhh yes
i was on 13.1
i updated it to 13.5
no more error now, thanks!