Next.js Discord

Discord Forum

Local Storage + Cookie

Answered
Wool sower gall maker posted this in #help-forum
Open in Discord
Original message was deleted.
Answered by Ray
import { cookies } from 'next/headers' 

export default function RootLayout({children}: RootLayoutProps) {
    const shouldShow = Boolean(cookies("bestCookieEver")?.value)
    return (
        <>
            <html lang="en" suppressHydrationWarning>
            <body
                className={cn(
                    "min-h-screen bg-background font-sans antialiased",
                    fontSans.className
                )}
            >
            <ThemeProvider
                attribute="class"
                defaultTheme="system"
                enableSystem
                disableTransitionOnChange
            >
                <div className="relative flex min-h-screen flex-col bg-background">
                    <SiteHeader shouldShow={shouldShow} />
                    <main className="flex-1">{children}</main>
                </div>
                <TailwindIndicator/>
            </ThemeProvider>
            </body>
            </html>
        </>
    )
}
View full answer

25 Replies

Original message was deleted
Great black wasp
https://www.npmjs.com/package/cookies-next
Original message was deleted
Ray
I wouldn't do that, instead just read the cookie server side and return a value shouldShow if the cookies persist
@Great black wasp https://www.npmjs.com/package/cookies-next
Wool sower gall maker
"use client"

import {getAuth} from "@/app/actions/authAction";
import {getCookie} from 'cookies-next';


export default function Menu() {

    const cookie = getCookie("bestCookieEver");
    console.log(cookie);


    return  (
        <>

            <div>
                <p>Name: {cookie}</p>
                <p>Value: {cookie}</p>
            </div>
        </>
    )
}
not working cookie is undefined
Wool sower gall maker
yes it is what does that mean?
@Wool sower gall maker Click to see attachment
Ray
yeah, so javascript won't be able to read it
Wool sower gall maker
okay how would i do that
my usecase is i want to display in the navbar a profile button when the cookie is present im logged in if not redirect /login
Wool sower gall maker
thats the problem my navbar is in my layout.tsx
if i do that i get an infinite loop
export default function RootLayout({children}: RootLayoutProps) {

    return (
        <>
            <html lang="en" suppressHydrationWarning>
            <body
                className={cn(
                    "min-h-screen bg-background font-sans antialiased",
                    fontSans.className
                )}
            >
            <ThemeProvider
                attribute="class"
                defaultTheme="system"
                enableSystem
                disableTransitionOnChange
            >
                <div className="relative flex min-h-screen flex-col bg-background">
                    <SiteHeader/>
                    <main className="flex-1">{children}</main>
                </div>
                <TailwindIndicator/>
            </ThemeProvider>
            </body>
            </html>
        </>
    )
}
its better to extract the siteheader there and put it on every page?
because the header isnt static
@Wool sower gall maker if i do that i get an infinite loop
Ray
what do you mean infinite loop?
is the page going to static or dynamic?
Wool sower gall maker
if i check the existence of the cookie and if not redirect to /login in the site header
@Ray is the page going to static or dynamic?
Wool sower gall maker
will be an application to setup a discord bot - so dynamic i guess
well maybe someone got an idea how can i solve my issue i do anything which makes it work xD
@Wool sower gall maker will be an application to setup a discord bot - so dynamic i guess
Ray
import { cookies } from 'next/headers' 

export default function RootLayout({children}: RootLayoutProps) {
    const shouldShow = Boolean(cookies("bestCookieEver")?.value)
    return (
        <>
            <html lang="en" suppressHydrationWarning>
            <body
                className={cn(
                    "min-h-screen bg-background font-sans antialiased",
                    fontSans.className
                )}
            >
            <ThemeProvider
                attribute="class"
                defaultTheme="system"
                enableSystem
                disableTransitionOnChange
            >
                <div className="relative flex min-h-screen flex-col bg-background">
                    <SiteHeader shouldShow={shouldShow} />
                    <main className="flex-1">{children}</main>
                </div>
                <TailwindIndicator/>
            </ThemeProvider>
            </body>
            </html>
        </>
    )
}
Answer
Wool sower gall maker
but if the cookie got deleted will this rerender my page?
Wool sower gall maker
okay ill try it oput thanks