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

# Correct structure
pages/
  index.tsx          # ✓ Can use getServerSideProps
  products/
    [id].tsx         # ✓ Can use getServerSideProps
  api/
    users.ts         # ✗ API routes cannot use it

components/
  ProductCard.tsx    # ✗ Regular components cannot use it

// ✓ CORRECT: Separate named export
export async function getServerSideProps(context) {
  const data = await fetch('https://api.example.com/data');
  return {
    props: { data: await data.json() }
  };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

// ✗ WRONG: Attached as property
Page.getServerSideProps = async (context) => { /* ... */ };

// ✗ WRONG: Inside component
function Page() {
  export async function getServerSideProps() { /* ... */ }
  return <div>...</div>;
}

// pages/dashboard.tsx
export async function getServerSideProps() {
  const userData = await fetchUserData();
  const statsData = await fetchStats();
  
  return {
    props: {
      user: userData,
      stats: statsData
    }
  };
}

export default function Dashboard({ user, stats }) {
  return (
    <div>
      <UserProfile user={user} />
      <StatsWidget stats={stats} />
    </div>
  );
}

// components/UserProfile.tsx
export function UserProfile({ user }) {
  // Receives data via props, no getServerSideProps needed
  return <div>{user.name}</div>;
}

// lib/data-fetching.ts
export async function fetchUserData(userId: string) {
  const res = await fetch(`https://api.example.com/users/${userId}`);
  if (!res.ok) throw new Error('Failed to fetch user');
  return res.json();
}

// pages/profile.tsx
import { fetchUserData } from '@/lib/data-fetching';

export async function getServerSideProps(context) {
  const { userId } = context.params;
  const user = await fetchUserData(userId);
  
  return { props: { user } };
}

// pages/settings.tsx (reuses same function)
import { fetchUserData } from '@/lib/data-fetching';

export async function getServerSideProps(context) {
  const userId = context.req.cookies.userId;
  const user = await fetchUserData(userId);
  
  return { props: { user } };
}

// app/products/[id]/page.tsx (App Router)
interface Props {
  params: { id: string };
}

// Server Component with direct async fetching
export default async function ProductPage({ params }: Props) {
  const product = await fetch(
    `https://api.example.com/products/${params.id}`,
    { cache: 'no-store' } // Equivalent to getServerSideProps
  ).then(res => res.json());

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

// components/RecentActivity.tsx
'use client';

import { useEffect, useState } from 'react';

export function RecentActivity() {
  const [activity, setActivity] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/activity')
      .then(res => res.json())
      .then(data => {
        setActivity(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  return <div>{activity.message}</div>;
}

# ✗ WRONG: Cannot have both
pages/dashboard.tsx          # Pages Router
app/dashboard/page.tsx       # App Router (conflicts!)

# ✓ CORRECT: Choose one approach
pages/dashboard.tsx          # Pages Router only
# OR
app/dashboard/page.tsx       # App Router only