Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get localStorage item in layout.js?

Sorry for poor English, it is my second language.

I am using Next.js 14.
I want to make a function that checks localStorage item before moving user into a specific page. Else it redirects user to the home page. (Similar to profile page requring logged in info)

However, since I am already using metdata(which runs in SSR I guess), it is not possible for me to access the localStorage without "use client". How should I fix the structure in this case? Is there way to get localStorage item here? Or is there a way to fix the page title without using metadata?

import * as React from "react";
import { redirect } from "next/navigation";

export const metadata = {
  title: "My Profile",
};

export default function StarforceProfileLayout({ children }) {
  const apiKey = localStorage.getItem("api-key");
  if (!apiKey) {
    redirect("/");
  }
  return <>{children}</>;
}
Tags:

2

Answers


  1. 0

    To achieve what you want in Next.js 14, you can use a combination of useEffect and conditional rendering to check for the localStorage item on the client side. You can also manage the title without using metadata.

    Here’s an example of how you can structure your StarforceProfileLayout component:

    import { useEffect } from "react";
import { useRouter } from "next/router";

export default function StarforceProfileLayout({ children }) {
  const router = useRouter();

  useEffect(() => {
    const apiKey = localStorage.getItem("api-key");

    // Check if the apiKey is not present and redirect to the home page
    if (!apiKey) {
      router.push("/");
    }
  }, []);

  // If apiKey is present, render the children
  return <>{children}</>;
}

    In this example, useEffect is used to run the code that checks for the localStorage item only on the client side after the component mounts. The useRouter hook is used to access the Next.js router, and router.push("/") is used for redirection.

    Regarding the page title, you can manage it directly in the component using the useEffect hook as well. Here’s an example:

    import { useEffect } from "react";
import { useRouter } from "next/router";

export default function StarforceProfileLayout({ children }) {
  const router = useRouter();

  useEffect(() => {
    const apiKey = localStorage.getItem("api-key");

    // Check if the apiKey is not present and redirect to the home page
    if (!apiKey) {
      router.push("/");
    }
  }, []);

  useEffect(() => {
    document.title = "My Profile"; // Set the desired page title
  }, []);

  // If apiKey is present, render the children
  return <>{children}</>;
}

    This way, you can manage both the redirection and the page title directly within your component without relying on metadata for the title.

    Login or Signup to reply.
  2. 0

    Store Your api-key in cookies. you have access to cookies in ssr via next/headers.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search