blueskychan.dev/src/pages/_app.jsx

import "~/styles/globals.css"

// pages/_app.js
import { useEffect } from "react"
import { useRouter } from "next/router"
import { Roboto, Mali } from "next/font/google"
import { Analytics } from '@vercel/analytics/next';
import { SpeedInsights } from '@vercel/speed-insights/next';

const roboto = Roboto({
  weight: "400",
  subsets: ["latin"],
})

const mali = Mali({ subsets: ["latin"], weight: "400" })

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  const stright = router.query.stright !== undefined
  useEffect(() => {
    if (stright) {
      document.body.classList.add(roboto.className)
      document.body.classList.remove(mali.className)
    } else {
      document.body.classList.add(mali.className)
      document.body.classList.remove(roboto.className)
    }
  }, [stright])


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

export default MyApp