NextJS 14 support

[philiphussak]

I'm on v0.4.0 and noticed it's currently only supporting Next 13.x in the peer dependencies, when I was about to update my Next project to v14

[glleroux]

@philiphussak I'm facing the same issue. While Next 14/15 remains unsupported there's a simple solution:

• Uninstall @cronitorio/cronitor-rum-nextjs
• Install @cronitorio/cronitor-rum
• Replicate the cronitor-rum-nextjs hook in a file (useCronitor.ts) in your own project

// myProject/hooks/useCronitor.ts

"use client";

import type { CronitorRUMConfig } from "@cronitorio/cronitor-rum";
import * as Cronitor from "@cronitorio/cronitor-rum";
import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";

export function useCronitor(clientKey: string, config: CronitorRUMConfig = {}) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    Cronitor.load(clientKey, config);
  }, []);

  useEffect(() => {
    Cronitor.track("Pageview");
  }, [pathname, searchParams]);

  return Cronitor;
}

• Consume this hook in your layout.tsx file (app router):

'use client';

import { useCronitor } from '@/hooks/useCronitor';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  useCronitor('YOUR_CRONITOR_KEY'); // your hook

  return <>{children}</>;
}

or _app.tsx file (pages router):

'use client';

import type { AppProps } from 'next/app';
import { useCronitor } from '@/hooks/useCronitor';

export default function App({ Component, pageProps }: AppProps) {
  useCronitor(process.env.YOUR_CRONITOR_KEY || ''); // your hook

  return <Component {...pageProps} />;
}