Next.js Discord

Discord Forum

next-themes and fonts dont apply after a redirect

Answered
shadow posted this in #help-forum
Open in Discord
shadowOP
hey devs, next-themes and fonts dont apply after a redirect, only applies it after a refresh to the redirected page, what is wrong?

the problem happen when the user signs in and he is redirected to the dashboard and when the user logs out and he is redirected to the sign page

redirecting to the dashboard after the successful sign in
export const signInAction = async (formData: FormData) => {
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;
    const supabase = createClient();

    const { error } = await supabase.auth.signInWithPassword({
        email,
        password,
    });

    if (error) {
        return encodedRedirect("error", "/sign-in", error.message);
    }

    revalidatePath('/', 'layout')
    return redirect("/dashboard");
};


redirecting to sign page after a logout
export const useLogout = () => {
    const router = useRouter();
    const [error, setError] = useState("");

    const onLogout = async () => {
        const supabase = createClient();
        try {
            await supabase.auth.signOut();
            router.push("/sign-in");
            router.refresh();
        } catch (err) {
            setError("Failed to log out");
        }
    };

    return { onLogout, error };
};


layout that covers the whole application the controls the dark mode feature:
export default function RootLayout({children}: Readonly<{children: React.ReactNode}>) {
    return (
        <html lang="en">
        <body className={`${geistSans.variable} ${geistMono.variable} ${majorMono.variable} antialiased`}>
        <ThemeProvider
            attribute="class"
            defaultTheme="system"
        >
            {children}
        </ThemeProvider>
        </body>
        </html>
    );
}
Answered by joulev
Only the top most layout should have <html> and <body>. Remove these elements from child layouts.

Though I’m surprised you weren’t hit with tons of hydration errors arising from nested html tags (invalid html)
View full answer

8 Replies

shadowOP
for the theme, the selected option is on the localStorage but for some reason only checks it after the redirected page is refreshed
if you need more information about the project structure lmk
shadowOP
the strange thing is that neither the themes and the custom fonts loads before a refresh to the redirected page, after the refresh the fonts and theme load, maybe the problem is not related to next-themes
shadowOP
maybe is worth noting that i have the root layout(showed above), a dashboard layout and a landing page layout that includes the sign in page

dashboard layout:
import {Sidebar} from "@/components/Sidebar";
import {createClient} from "@/utils/supabase/server";
import {redirect} from "next/navigation";
import {User} from "@/lib/interfaces";

export default async function DashboardLayout({children}: Readonly<{children: React.ReactNode}>) {
    const supabase = createClient();

    const { data, error } = await supabase.auth.getUser();
    if (error || !data?.user) {
        redirect('/sign-in');
    }

    return (
        <html lang="en">
        <body>
          <Sidebar userData={data.user as User}>
            {children}
          </Sidebar>
        </body>
        </html>
    );
}


landing page layout:
import {Header} from "@/components/Navbar";


export default function LandingPageLayout({children}: Readonly<{ children: React.ReactNode }>) {
    return (
        <html lang="en">
          <body>
            <Header/>
            {children}
          </body>
        </html>
    );
}
Answer
gonna try that
thanks! just checked that if i searched in the docs earlier i would prevent stupid questions
https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#nesting-layouts