Error: `getServerSideProps` is not supported in app/ directory

You’re mixing Pages Router and App Router patterns.

Why this happens

Next.js has two routing systems: the older Pages Router (pages/) and the newer App Router (app/). The App Router uses React Server Components for data fetching instead of getServerSideProps/getStaticProps. When you place Pages Router patterns in the app/ directory, Next.js throws this error because those APIs don’t exist in the App Router.

Fix 1: App Router — use server components instead

// ❌ Pages Router pattern in app/ directory
export async function getServerSideProps() { ... }

// ✅ App Router — just fetch in the component
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  return <div>{json.title}</div>;
}

Fix 2: If using Pages Router

Make sure the file is in pages/, not app/:

pages/index.tsx  ← getServerSideProps works here
app/page.tsx     ← use server components here

Alternative solutions

Use generateMetadata for head data — if you were using getServerSideProps just for SEO metadata:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { title: post.title, description: post.excerpt };
}

Use route handlers for API endpoints — replace pages/api/ with app/api/route.ts:

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

Prevention

• Don’t mix pages/ and app/ for the same route — Next.js will use app/ and ignore pages/ if both exist.
• When migrating, move one route at a time and remove the old pages/ file after confirming the app/ version works.

Related: Next.js: Dynamic Server Usage fix · Next.js: Server Component Client Error fix