#Next.JS Font optimization issue in dev mode

1 messages · Page 1 of 1 (latest)

acoustic peak
#

Hi, moved to Next.js font optimization from simply just importing the google font, thinking it would be better, well it is but only in release mode.

When I'm in a RUN DEV and i'm using the font optimization by next.js the page loads extremly slow (images are loading after 13.27 s) and when I refresh the webpage it gets stuck in a forever loading loop and it never loads. All those issues are only in a dev mode and only after i added the next.js font opimization.

I'm using Readex_Pro font from google, it's a variable font too.

my app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";
import { NextIntlClientProvider } from 'next-intl';
import {getLocale} from 'next-intl/server';
import Script from 'next/script';
import { Readex_Pro } from "next/font/google";

const readexPro = Readex_Pro({
  subsets: ["latin"],
  display: 'swap',
});


export const metadata: Metadata = {
  title: "Title",
  description: "Description",
  keywords: "Keywords",
  authors: [{ name: "Author" }],
  creator: "Creator",
  publisher: "Publisher",
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  icons: {
    icon: '/favicon.ico',
    shortcut: '/favicon.ico',
    apple: '/favicon.ico',
  },
  openGraph: {
    title: "Title",
    description: "Description",
    type: "website",
    locale: "en_US",
    siteName: "Title",
    images: [
      {
        url: '/favicon.ico',
        width: 1200,
        height: 630,
        alt: 'Logo',
      },
    ],
  },
  alternates: {
    canonical: 'https://title.com',
  },
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = await getLocale();
  return (
    <html lang={locale} className={readexPro.className}>
      <body className="antialiased">
        <NextIntlClientProvider>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Any help would be appreciated

compact matrixBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

coral hemlock
acoustic peak