Nextjs 14 + Daisy UI + Next Themes = Flickering on initial local change #2674

ozgurcoban · 2023-12-18T10:42:49Z

ozgurcoban
Dec 18, 2023

Hi all,

I'm new to Next.js and am experiencing an issue where the page flashes when I change languages. This only happens once.

I've seen others solve similar problems by using the cookies function in Next.js. However, the cookies function requires dynamic rendering, as it's a dynamic feature, and the only place I can implement it is in the root layout. Meanwhile, I intend to have my site statically generated (SSG).

Does anyone have an idea of what could be wrong?

Screen.Recording.2023-12-18.at.11.13.45.mov

ThemeProvider.tsx

'use client';

import { ThemeProvider as NextThemesProvider } from 'next-themes';
type ThemeProviderProps = Parameters<typeof NextThemesProvider>[0];

export default function ThemeProvider({
  children,
  ...props
}: ThemeProviderProps) {
  return (
    <NextThemesProvider
      defaultTheme='system'
      {...props}
    >
      {children}
    </NextThemesProvider>
  );
}

ThemeSwitcher.tsx

'use client';

import { useState, useEffect } from 'react';
import { useTheme } from 'next-themes';

export default function ThemeController() {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme, resolvedTheme } = useTheme();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  const toggleTheme = () => {
    const newTheme = resolvedTheme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
  };

  return (
   // Sun and moon theme switch
  );
}

layout.tsx

import clsx from 'clsx';
import { Inter } from 'next/font/google';
import { notFound } from 'next/navigation';
import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
import { ReactNode } from 'react';
import { locales } from '@/config';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import ThemeProvider from '@/providers/ThemeProvider';

const inter = Inter({ subsets: ['latin'] });

type Props = {
  children: ReactNode;
  params: { locale: string };
};

export function generateStaticParams() {
  return locales.map(locale => ({ locale }));
}

export async function generateMetadata({
  params: { locale },
}: Omit<Props, 'children'>) {
  const t = await getTranslations({ locale, namespace: 'LocaleLayout' });

  return {
    title: t('title'),
  };
}

export default async function LocaleLayout({
  children,
  params: { locale },
}: Props) {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale as any)) notFound();

  // Enable static rendering
  unstable_setRequestLocale(locale);

  return (
    <html className='h-full' lang={locale} suppressHydrationWarning>
      <body className={clsx(inter.className, 'flex h-full flex-col')}>
        <ThemeProvider>
          <Navbar />
          {children}
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  );
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nextjs 14 + Daisy UI + Next Themes = Flickering on initial local change #2674

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Nextjs 14 + Daisy UI + Next Themes = Flickering on initial local change #2674

ozgurcoban Dec 18, 2023

Replies: 0 comments

ozgurcoban
Dec 18, 2023