Local Storage Next JS Error but still works

Answered

SharpieMaster posted this in #help-forum

2023-10-04T05:56:00.000Z

I am getting this error in my command line but everything is working on the webpage, how could I prevent the error from being listed as it is cluttering my command line

Answered by riský

it doesn't work because SSR is a thing that prerenders your page on the server before giving the page to client (to help SEO and users without JS), so you should use a useEffect and useState ... or you can use next/dynamic

View full answer

13 Replies

SharpieMasterOP

2023-10-04T05:56:16.000Z

"use client";

import { toast } from "sonner";
import { Button } from "./ui/button";

const ToastTest = () => {
    return (
        <div className="">
            <Button
                onClick={() => {
                    localStorage.setItem("test", "testt");
                }}
            >
                ToastTest
            </Button>

            <div>{localStorage.getItem("test")}</div>
        </div>
    );
};

export default ToastTest;

@SharpieMaster tsx "use client"; import { toast } from "sonner"; import { Button } from "./ui/button"; const ToastTest = () => { return ( <div className=""> <Button onClick={() => { localStorage.setItem("test", "testt"); }} > ToastTest </Button> <div>{localStorage.getItem("test")}</div> </div> ); }; export default ToastTest;

@ts-ignore

2023-10-04T05:56:39.000Z

[Read this](https://nextjs-faq.com/browser-api-client-component)

SharpieMasterOP

2023-10-04T05:57:43.000Z

riský

2023-10-04T05:57:55.000Z

Answer

riský

2023-10-04T05:58:06.000Z

.. i was to slow in typing - i didn't see Phantom's message ;(

SharpieMasterOP

2023-10-04T05:58:32.000Z

"use client";

import { toast } from "sonner";
import { Button } from "./ui/button";
import { useState } from "react";

const ToastTest = () => {
    const [test, setTest] = useState(localStorage.getItem("test")); // This was the added code

    return (
        <div className="">
            <Button
                onClick={() => {
                    localStorage.setItem("test", "test");
                }}
            >
                ToastTest
            </Button>

            <div>{test}</div>
        </div>
    );
};

export default ToastTest;