Resolving 'cannot use both use client and export function generateStaticParams()' Error in Next.js

In Next.js (version 13 and above), the introduction of Server Components and Client Components (use client directive) has brought new concepts that originated from React 18.0. Without a clear understanding of these components, developers often encounter the error “cannot use both ‘use client’ and export function generateStaticParams()”. This article will analyze the root cause of this conflict and, more importantly, provide guidance on proper code organization to avoid such issues.

Prerequisites

Server Components

React Server Components: These are components that render on the server side. They not only support server-side rendering but also enable server-side caching.

In the Next.js framework, rendering tasks are further subdivided based on route segments to enable streaming and partial rendering capabilities. Based on this, Next.js offers three different server-side rendering strategies:

• Static Rendering
• Dynamic Rendering
• Streaming Rendering

Client Components

Client Components (React Client Components): These are components that run and interact in the browser client. They are pre-rendered on the server side and can utilize client-side JavaScript to run in the browser. They are typically marked with the “use client” directive.

When you place "use client" at the top of a file, you’re telling Next.js: “Everything in this file and any components it imports are client components.”

generateStaticParams

The generateStaticParams function is used for dynamic routes (e.g., app/blog/[slug]/page.tsx) to generate static HTML through SSG technology, which is crucial for SEO.

Characteristics:

• generateStaticParams executes on the server during build time.
• It tells Next.js which paths should be pre-rendered as static HTML. For example, it might fetch all your blog post slugs and return an array like [{ slug: 'my-first-post' }, { slug: 'another-awesome-article' }].
• Limitation: It cannot access browser APIs or client-side React features.

"use client"

When you place "use client" at the top of a file, you’re telling Next.js: “Everything in this file and any components it imports are client components.”

Characteristics

• Can use React Hooks like useState, useEffect, useContext, handle browser events (e.g., onClick), and interact with browser APIs.
• While client components are pre-rendered on the server for initial HTML, their JavaScript bundles are sent to the client for hydration, where they execute in the browser.

Root Cause of the Conflict

So, why does this error occur? It ultimately comes down to their fundamentally different execution environments and timing:

• generateStaticParams() needs to run only on the server during the build process, long before any client-side JavaScript comes into play. It’s responsible for planning the structure of your static site.
• "use client" designates code that requires a browser environment to run, including its interactive features.

You cannot have a single file serve both as a build-time, server-only manifest for static paths and as an entry point for client-side browser code. Next.js requires a clear distinction. If a page file (e.g., page.tsx) exports generateStaticParams, it is inherently a server component at its root. Declaring "use client" in the same file creates an impossible situation.

Solution: Separation of Concerns!

Here’s the pattern to follow:

1. Keep your page as a server component: The file that exports generateStaticParams (e.g., app/blog/[slug]/page.tsx) should remain a server component. Avoid using React Hooks-related APIs, ensuring all page interactions happen on the client side.

2. Create a dedicated client component: If you need client-side interactivity within that statically generated page (e.g., buttons, stateful UI, animations), create a new component file.

   • Place "use client" at the top of this new component file.
   • Implement all your interactive logic here.

3. Import the client component into your server page component: Your server component (the page) can then import and render this new client component, passing any necessary data as props.

Let’s look at an example:

Suppose we have a dynamic blog post page that needs generateStaticParams and also has an interactive “like” button.

1. app/blog/[slug]/page.tsx (Server Component)

// No "use client" here!

import BlogLayout from '../../../components/BlogLayout'; // Our new client component
import { getPostBySlug, getAllPostSlugs } from '../../../lib/posts'; // Your data fetching functions

// 1. Generate static paths for each blog post
export async function generateStaticParams() {
  const slugs = await getAllPostSlugs(); // Get all [{ slug: '...' }]
  return slugs.map((item: { slug: string }) => ({ // Added type for item
    slug: item.slug,
  }));
}

// 2. Get data for a specific post
async function getPostData(slug: string) {
  const post = await getPostBySlug(slug);
  return post;
}

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const postData = await getPostData(params.slug);

  if (!postData) {
    // You might want to return notFound() from 'next/navigation'
    return <div>Post not found!</div>;
  }

  // 3. Pass server-fetched data to the client component
  return (
    <main>
      <h1>{postData.title}</h1> {/* Rendered on the server */}
      <BlogLayout content={postData.content} initialLikes={postData.likes} postId={postData.id} />
    </main>
  );
}

2. components/BlogLayout.tsx (Client Component)

"use client"; // This is now a client component

import { useState, useEffect } from 'react';

interface BlogLayoutProps {
  content: string;
  initialLikes: number;
  postId: string;
}

export default function BlogLayout({ content, initialLikes, postId }: BlogLayoutProps) {
  const [likes, setLikes] = useState(initialLikes);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // You can fetch additional client-side data here if needed
    console.log(`Interactive content for post ${postId} has loaded`);
  }, [postId]);

  const handleLike = async () => {
    setIsLoading(true);
    // Simulate API call to update likes
    await new Promise(resolve => setTimeout(resolve, 500));
    setLikes(prevLikes => prevLikes + 1);
    setIsLoading(false);
    // In a real application, you would also send this update to the backend
    console.log(`Post ${postId} liked! New count: ${likes + 1}`);
  };

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: content }} />
      <button onClick={handleLike} disabled={isLoading}>
        {isLoading ? 'Liking...' : `👍 Like (${likes})`}
      </button>
      {/* Other interactive UI elements can go here */}
    </div>
  );
}

Benefits of Server-Client Component Separation

• Performance: You still get the fast loading times and SEO benefits of statically generated pages.
• Interactivity: You can seamlessly integrate dynamic, interactive elements where needed.
• Clear Separation: Your code becomes more organized, with server-side concerns (data fetching for SSG, routing) and client-side concerns (UI interactions, state management) clearly separated.
• Reduced Client Bundle Size: Only the JavaScript for your client components is sent to the browser, keeping your initial page load lean.

Summary

The error "cannot use both 'use client' and export function 'generateStaticParams()'" is actually Next.js’s compiler alerting you to a code organization issue. By understanding server and client components and using them appropriately, you can build complex applications that are both fast and interactive.