This error occurs in Next.js when a file in the pages directory does not export a default React component. The Next.js Pages Router requires every page file to have a default export containing a valid React component.
Fixes Page "/pages/..." is missing default export
// ✅ Correct - default export of a React component
export default function MyPage() {
return <h1>Hello World</h1>;
}// ✅ Correct - default export of a React componentexport default function MyPage() {return <h1>Hello World</h1>;}Page "/pages/..." is missing default export
In Next.js projects using the Pages Router (the `pages/` directory), every file is automatically mapped to a route based on its filename. For this routing system to work, Next.js requires each page file to export a React component as the default export. This component is what gets rendered when users navigate to that route. When you see this error, it means Next.js found a file in your `pages/` directory but couldn't find a valid default export. The build system expects to import your page and render it, but there's nothing (or nothing valid) being exported as the default. This is a fundamental requirement of the Pages Router architecture and differs from the App Router (introduced in Next.js 13+), which uses a different file structure with `page.tsx` files and different export requirements.
Open the page file mentioned in the error message and verify it has a default export:
// ✅ 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>;
}If your page file is missing a default export, add one. You can use either function declarations or arrow functions:
// 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;If you're using named exports, convert them to default exports:
// 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>;
}If you have other named exports in the same file (like getServerSideProps or getStaticProps), keep those as named exports - only the component needs to be the default:
// 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: {} } };
}If the file is not meant to be a page (e.g., it's a shared component, utility function, or type definition), move it out of the pages/ directory:
# 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.tsFiles in the pages/ directory are automatically treated as routes. Keep only actual page components there.
Exception: Files/folders starting with underscore (like _app.tsx, _document.tsx) or inside api/ folder have special meaning in Next.js and don't require default component exports.
Ensure your default export is actually a React component that returns JSX, not a regular value:
// ❌ 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>;
}Also ensure there are no syntax errors preventing the export from being recognized. Check for missing braces, parentheses, or semicolons.
Pages Router vs App Router: This error is specific to the Pages Router (pages/ directory). If you're using the App Router (app/ directory introduced in Next.js 13+), the requirements are different. App Router uses page.tsx files that must default export a React component, and the file must be named exactly page.tsx (or .js/.jsx).
Special Files: Some files in the pages/ directory have special meanings and different requirements:
- _app.tsx: Custom App component, must default export a component
- _document.tsx: Custom Document component, must default export a component extending Document
- _error.tsx: Custom error page, must default export a component
- 404.tsx: Custom 404 page, must default export a component
- api/*: API routes, export handler functions not React components
TypeScript Considerations: If using TypeScript, you can use the NextPage type for better type safety:
import type { NextPage } from 'next';
const Home: NextPage = () => {
return <h1>Welcome</h1>;
};
export default Home;Dynamic Routes: For dynamic routes like [id].tsx or [...slug].tsx, the same default export requirement applies. The filename structure affects routing, but the export requirements remain the same.
Module Systems: Avoid mixing CommonJS (module.exports) with ES6 modules (export default) in your Next.js pages. Stick to ES6 module syntax for consistency and compatibility with Next.js build system.