How to fix getStaticProps can only be used with pages in React

What this error means

This error indicates that you're trying to use the `getStaticProps` data fetching method in a location where it's not supported. In Next.js, `getStaticProps` is a Pages Router feature that was used to fetch data at build time for static generation. With the introduction of the App Router in Next.js 13+, the data fetching paradigm has fundamentally changed. The App Router uses React Server Components by default, which fetch data directly within components rather than using separate data fetching functions like `getStaticProps`. The error most commonly appears when developers try to use `getStaticProps` in the app directory, or when attempting to export it from non-page files like `_app.js`, `_document.js`, or custom error pages in the pages directory.

Typical symptoms

• Build fails with "getStaticProps can only be used with pages" error
• Application won't compile when using getStaticProps in app directory
• Error occurs after migrating from Pages Router to App Router
• Data fetching doesn't work as expected in App Router components

Common causes

1. Using getStaticProps in the app directory (App Router) instead of pages directory
2. Attempting to export getStaticProps from _app.js, _document.js, or _error.js
3. Exporting getStaticProps from a non-page file in the pages directory
4. Attaching getStaticProps as a component member instead of a separate export
5. Incomplete migration from Pages Router to App Router

How to fix "getStaticProps can only be used with pages"

# Pages Router structure
pages/
  index.js
  about.js
  _app.js

# App Router structure
app/
  page.js
  about/
    page.js
  layout.js

// pages/posts.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 60
  };
}

export default function Posts({ posts }) {
  return <div>{/* render posts */}</div>;
}

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 } // ISR equivalent
  });
  return res.json();
}

export default async function Posts() {
  const posts = await getPosts();
  return <div>{/* render posts */}</div>;
}

const res = await fetch('https://api.example.com/posts', {
  cache: 'force-cache' // Static generation
});

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  // Fetch data
  return { props: { data } };
}

export default function BlogPost({ data }) {
  return <div>{/* render */}</div>;
}

// pages/_app.js
export async function getStaticProps() { // ❌ Not allowed
  return { props: {} };
}

// ❌ Wrong
BlogPost.getStaticProps = async () => { };

// ✅ Correct
export async function getStaticProps() { }

// Pages Router
export async function getStaticProps() {
  return {
    props: { data },
    revalidate: 3600 // Revalidate every hour
  };
}

// App Router equivalent
const res = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }
});

// Use revalidatePath or revalidateTag
import { revalidatePath } from 'next/cache';

// In a server action or route handler
revalidatePath('/posts');

const res = await fetch('https://api.example.com/data', {
  cache: 'no-store'
});

// pages/posts/[id].js
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }],
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.id);
  return { props: { post } };
}

// app/posts/[id]/page.tsx
export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }];
}

export default async function Post({ params }: { params: { id: string } }) {
  const post = await fetchPost(params.id);
  return <div>{/* render post */}</div>;
}

Advanced notes

Frequently asked questions

What does "getStaticProps can only be used with pages" mean?

This error indicates that you're trying to use the getStaticProps data fetching method in a location where it's not supported. js, getStaticProps is a Pages Router feature that was used to fetch data at build time for static generation. js 13+, the data fetching paradigm has fundamentally changed.

How do I fix "getStaticProps can only be used with pages"?

This error occurs when attempting to use getStaticProps in Next.js App Router. The getStaticProps function is exclusive to the Pages Router and cannot be used in the app directory structure.

What causes "getStaticProps can only be used with pages"?

Using getStaticProps in the app directory (App Router) instead of pages directory Attempting to export getStaticProps from _app.js, _document.js, or _error.js Exporting getStaticProps from a non-page file in the pages directory

Is the "getStaticProps can only be used with pages" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Hydration mismatch: the server-rendered page does not match the client

  How to fix "Hydration mismatch: the server-rendered page does not match the client" in Next.js

  HIGH

• getServerSideProps can only be used with pages

  How to fix "getServerSideProps can only be used with pages" in React

  MEDIUM

• Expected node.alt to be "string" but found "undefined"

  Image alt prop is undefined

  MEDIUM

• getInitialProps is not supported in App Router

  How to fix "getInitialProps is not supported in App Router" in React

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  Next.js App Router Migration Guide(Official Docs)
• 📖
  Data Fetching: getStaticProps(Official Docs)
• 📖
  App Router Data Fetching(Official Docs)
• 📝
  Next.js App Router Data Fetching