How to fix Page "/pages/..." is missing default export in React

// ✅ Correct - default export of a React component
export default function MyPage() {
  return <h1>Hello World</h1>;
}

// ❌ Incorrect - only named export
export function MyPage() {
  return <h1>Hello World</h1>;
}

// ❌ Incorrect - no export at all
function MyPage() {
  return <h1>Hello World</h1>;
}

// Option 1: Function declaration with export default
export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page</p>
    </div>
  );
}

// Option 2: Arrow function
const AboutPage = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page</p>
    </div>
  );
};

export default AboutPage;

// Option 3: Separate declaration and export
function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page</p>
    </div>
  );
}

export default AboutPage;

// Before (named export - won't work)
export function Dashboard() {
  return <h1>Dashboard</h1>;
}

// After (default export - works)
export default function Dashboard() {
  return <h1>Dashboard</h1>;
}

// This is valid - default export for component, named exports for data fetching
export default function UserPage({ user }) {
  return <h1>{user.name}</h1>;
}

export async function getServerSideProps(context) {
  // Fetch user data
  return { props: { user: {} } };
}

# Move shared components to a components directory
mv pages/Button.tsx components/Button.tsx

# Move utilities to a lib or utils directory
mv pages/helpers.ts lib/helpers.ts

# Move types to a types directory
mv pages/types.ts types/index.ts

// ❌ Incorrect - exporting a string
export default "Hello World";

// ❌ Incorrect - exporting an object
export default { title: "My Page" };

// ❌ Incorrect - exporting undefined
export default undefined;

// ✅ Correct - exporting a React component
export default function MyPage() {
  return <div>Hello World</div>;
}