[appDir] Development Server throws Error: Dynamic server usage: previewData when using generateStaticParams with previewData from next/headers

[brvnonascimento]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
Binaries:
  Node: 16.15.1
  npm: 8.11.0
  Yarn: 1.22.17
  pnpm: 7.14.1
Relevant packages:
  next: 13.0.6-canary.1
  eslint-config-next: 13.0.5
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Firefox 107.0

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Using generateStaticParams with previewData() will throw an error in development mode. It works fine in production.

Expected Behavior

We should be able to preview a statically generated page with previewData since this call does not make the page dynamic as calling cookies and headers does.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/brvnonascimento/next-13-preview-data-error

To Reproduce

1. Clone the reproduction repository
2. Run yarn dev
3. Visiting any route will give you Dynamic server usage: previewData
4. Run yarn build && yarn start or visit the deployed version on Vercel
5. Should work just fine

import Image from "next/image";
import { previewData } from "next/headers";
import styles from "./page.module.css";

export default function Page() {
  const preview = previewData();

  console.log({ preview });

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js 13!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{" "}
          <code className={styles.code}>app/page.tsx</code>
        </p>

        <div className={styles.grid}>
          <a href="https://beta.nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js 13</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/canary/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Explore the Next.js 13 playground.</p>
          </a>

          <a
            href="https://vercel.com/templates/next.js/app-directory?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>Deploy your Next.js site to a public URL with Vercel.</p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

export const generateStaticParams = async () => {
  const paths = [
    {
      route: [""],
    },
    {
      route: ["about"],
    },
    {
      route: ["services"],
    },
  ];

  return paths;
};

[styled-man]

This exact bug occurs with the next-auth unstable_getServerSession.

It works perferctly fine in production mode, however development mode thows the Dynamic server usage error.
Commenting out the generateStaticParams function also seems to fix it.

// src/app/[auth]/layout.tsx
import { unstable_getServerSession } from "next-auth/next"
import { ReactNode } from "react"

interface LayoutProps {
    params: {
        auth: string
    }
    children: ReactNode
}

export default async function Layout({ params, children }: LayoutProps) {
     // ...
    const session = await unstable_getServerSession()
     // ...

    return children
}

export async function generateStaticParams() {
    return [{ auth: "login" }, { auth: "register" }]
}

[craftogrammer]

Same here, works perfectly fine in production mode.

[saurabhsri108]

Still the same in 2023

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.