Fix Error: Error: Dynamic server usage: force-dynamic is not allowed in generateStaticParams in Next.js

This error occurs when a statically generated page uses fetch with cache: 'no-store' or sets force-dynamic, but also exports generateStaticParams. These are contradictory: static generation requires cacheable data. Fix it by removing force-dynamic and using revalidation instead, or by removing generateStaticParams for truly dynamic pages.

Reading the Stack Trace

Here's what each line means:

• at staticGenerationBailout (/app/node_modules/next/dist/client/components/static-generation-bailout.js:18:11): Next.js detected a dynamic operation during static generation and threw because static and dynamic modes are incompatible.
• at fetchImpl (/app/node_modules/next/dist/server/lib/patch-fetch.js:172:15): The patched fetch detected cache: 'no-store' or a force-dynamic flag during static generation.
• at async buildStaticPaths (/app/node_modules/next/dist/build/utils.js:847:22): The build system is trying to generate static paths but the data-fetching strategy conflicts with static generation.

Common Causes

export const dynamic = 'force-dynamic';

export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return posts.map((p: any) => ({ slug: p.slug }));
}

export default async function BlogPost({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    cache: 'no-store'
  }).then(r => r.json());
  return <article>{post.title}</article>;
}

export async function generateStaticParams() {
  return [{ slug: 'hello' }, { slug: 'world' }];
}

export default async function Page({ params }) {
  const data = await fetch(`/api/posts/${params.slug}`, { cache: 'no-store' });
  return <div>{data.title}</div>;
}

import { cookies } from 'next/headers';

export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }];
}

export default async function Page({ params }) {
  const token = cookies().get('auth');
  return <div>Post {params.id}</div>;
}

The Fix

Replace force-dynamic and cache: 'no-store' with time-based revalidation using next: { revalidate: 60 }. This keeps the page statically generated but refreshes the data every 60 seconds, combining the performance of static generation with reasonably fresh data.

export const dynamic = 'force-dynamic';

export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return posts.map((p: any) => ({ slug: p.slug }));
}

export default async function BlogPost({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    cache: 'no-store'
  }).then(r => r.json());
  return <article>{post.title}</article>;
}

export const revalidate = 60;

export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return posts.map((p: any) => ({ slug: p.slug }));
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    next: { revalidate: 60 }
  }).then(r => r.json());
  return <article>{post.title}</article>;
}

Testing the Fix

import { render, screen } from '@testing-library/react';
import BlogPost, { generateStaticParams } from '@/app/blog/[slug]/page';

global.fetch = jest.fn();

describe('BlogPost', () => {
  beforeEach(() => {
    (fetch as jest.Mock).mockResolvedValue({
      json: () => Promise.resolve({ title: 'Hello World', content: 'Test' }),
    });
  });

  it('renders the post title', async () => {
    const Component = await BlogPost({ params: { slug: 'hello' } });
    render(Component);
    expect(screen.getByText('Hello World')).toBeInTheDocument();
  });

  it('generateStaticParams returns slugs', async () => {
    (fetch as jest.Mock).mockResolvedValue({
      json: () => Promise.resolve([{ slug: 'hello' }, { slug: 'world' }]),
    });
    const params = await generateStaticParams();
    expect(params).toEqual([{ slug: 'hello' }, { slug: 'world' }]);
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/fetch-cache-static-params-conflict,git add src/app/blog/[slug]/page.tsx src/app/blog/[slug]/__tests__/page.test.tsx,git commit -m "fix: replace force-dynamic with revalidation for static pages",git push origin fix/fetch-cache-static-params-conflict

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Remove force-dynamic and replace with revalidation strategy.
2. Run the Next.js build locally to confirm static generation succeeds.
3. Open a pull request with the caching changes.
4. Wait for CI checks to pass on the PR.
5. Merge to main and verify ISR works correctly in staging.

Frequently Asked Questions