Next.js中能否将localStorage或Cookies存储的信息传递给getStaticPaths和getStaticProps？含需传入登录用户ID的API场景

Great question! This is a super common point of confusion when working with Next.js's static generation features, so let's break it down clearly.

Short Answer #

No, you cannot directly access localStorage or Cookies from getStaticPaths or getStaticProps. And for your use case—fetching data that requires a logged-in user's ID—static generation isn't the right fit out of the box. Let's dive into why, and what you should use instead.

Why localStorage/Cookies Don't Work with Static Generation #

getStaticPaths and getStaticProps run at build time (or during incremental static regeneration, which still happens on the server, not the client). These functions execute in a Node.js environment, not the user's browser—so they have no access to browser-specific APIs like localStorage or the user's Cookies.

In other words: when Next.js builds your static pages, it has no idea which user will eventually view them. There's no way to pass user-specific data from the client to these build-time functions.

Solutions for Fetching User-Specific Data #

Since you need to fetch data using a logged-in user's ID, here are your best options:

1. Use getServerSideProps (Recommended for SEO-Friendly User-Specific Pages) #

getServerSideProps runs on every request (server-side), which means it can access the incoming request's Cookies (where you'd typically store authentication tokens or user IDs). This lets you fetch user-specific data before sending the page to the client.

Here's a quick example:

export async function getServerSideProps(context) {
  // Grab the user ID from the request's cookies
  const userId = context.req.cookies.userId;

  // Redirect to login if no user ID exists
  if (!userId) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  // Fetch data using the user ID
  const res = await fetch(`https://your-api-endpoint.com/user-data?userId=${userId}`);
  const userData = await res.json();

  // Pass the data to your page component
  return {
    props: { userData },
  };
}

This approach keeps your page SEO-friendly (since the data is rendered server-side) and ensures you're fetching the right data for each user.

2. Fetch Data Client-Side (For Non-SEO-Critical Pages) #

If SEO isn't a priority, you can fetch data after the page loads in the browser, where you can access localStorage or Cookies. Use useEffect to trigger the fetch once the component mounts:

import { useEffect, useState } from 'react';

export default function UserDashboard() {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      const userId = localStorage.getItem('userId');
      if (userId) {
        const res = await fetch(`https://your-api-endpoint.com/user-data?userId=${userId}`);
        const data = await res.json();
        setUserData(data);
      }
      setLoading(false);
    };

    fetchUserData();
  }, []);

  if (loading) return <div>Loading your data...</div>;
  if (!userData) return <div>Please log in to view this content.</div>;

  return (
    <div>
      <h1>Your Dashboard</h1>
      {/* Render user-specific data here */}
    </div>
  );
}

The tradeoff here is that the page will load with a loading state first, and search engines won't see the user-specific content (since it's loaded client-side).

3. Route Protection with Middleware (For Static Pages That Need Auth) #

If you have static pages that should only be accessible to logged-in users, you can use Next.js Middleware to check Cookies before the page loads. However, this won't let you fetch user-specific data at build time—it just ensures unauthorized users can't access the page. You'd still need to fetch the data client-side or use getServerSideProps for dynamic content.

Final Takeaway #

For your scenario (fetching data that requires a user ID), forget about getStaticPaths/getStaticProps—they're designed for static content that doesn't depend on individual users. Stick with getServerSideProps for SEO-friendly, user-specific pages, or client-side fetching if SEO isn't a concern.

内容的提问来源于stack exchange，提问作者katigbanoma