#localStorage user object not available until browser refresh

14 messages · Page 1 of 1 (latest)

fleet steppe
#

I have successfully registered a user and then logged in. In my local Storage, I have the user object. But... When logged in, my navigation does not reflect my conditional rendering for {user ? () : ()} etc. So, I am not sure what I am doing wrong and I am terribly new to NextJS. Here is my Navbar code. If I am missing something, please let me know.

const [isOpen, setIsOpen] = useState(false);
  const router = useRouter();
  const [user, setUser] = useState();

  useEffect(() => {
    setUser(JSON.parse(localStorage.getItem('user')));
  }, []);
  // console.log(user);

  const onLogout = () => {
    localStorage.removeItem('user');
    toast.success('Logged out successfully');
    setUser(null);
    router.push('/login');
  };

Thanks in advance

valid cliff
#

have the same issue^ anyone know?

sharp spindle
#

localStorage is a client side (Browser) API which is not available on nodejs

#

You have to use localStorage when window keyword is not undefined

# 
  // Perform localStorage action
  const item = localStorage.getItem('key')
}```
#

This is how you can check when the window object is not undefined, because window object is only available on the browser.

#

When the window object becomes available, so does localStorage

#

In conclusion: Access the localStorage on the browser, not on the server. You get the error because you try to access localStorage on Nodejs which isn't there.

#

Hope this helps @fleet steppe @valid cliff

fleet steppe
fleet steppe
#

Hello. Has anyone deployed a MERN stack in Vercel where you have a backend and frontend/client folder? I tried but am getting a vercel.json error. My question is What changes do I have to make in order to deploy? Where does the vercel.json file go? Does it go in my backend folder or in the root of my project? If anyone has a link to a great resource that explains this step by step I sure would appreciate it. Thanks in advance.

fleet steppe
#

So... Does anyone here have any experience deploying a MERN with Next app on Vercel or any other shared hosting like NameCheap where there is a backend and a client folder? Thanks

fleet steppe
#

So...I decided to move all my backend from the two folder setup Backend Client to NextJs api system. The app works exactly as it should locally but when I deploy it to vercel, None of my routes work. I get 404. Any help appreciated. Here is my file structure. Please let me know if you would like to see any individual files. Thanks:

Main App
 -.next
 -assets
 -components
 -context
 -hooks
 -node_modules
 -pages
   -api
     index.js(just a simple home api, unrelated)
 -public
 -server
    -config
      db.js
    -controllers
    cvController.js
        userController.js
    -middleware
        authMiddleware.js
        errorMiddleware.js
    -models
    cvMOdel.js
        userModel.js
    -routes
       cvRoutes.js
       userRoutes.js
    index.js (Here are all my backend functions)