# Next.js Special Files

File conventions for App Router and Pages Router.

## App Router Files

### layout.tsx
```typescript
export default function Layout({ children }) {
  return (
    <div>
      <nav>Navigation</nav>
      <main>{children}</main>
    </div>
  );
}
```

### page.tsx
```typescript
export default async function Page({ params, searchParams }) {
  const data = await fetchData();
  return <div>{data}</div>;
}
```

### loading.tsx
```typescript
export default function Loading() {
  return <div>Loading...</div>;
}
```

### error.tsx
```typescript
'use client';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Error: {error.message}</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}
```

### not-found.tsx
```typescript
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <Link href="/">Go Home</Link>
    </div>
  );
}
```

### route.ts
```typescript
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  return NextResponse.json({ data: 'value' });
}
```

### middleware.ts
```typescript
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

export const config = {
  matcher: ['/dashboard/:path*'],
};
```

## Pages Router Files

### pages/_app.tsx
```typescript
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

### pages/_document.tsx
```typescript
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

### pages/404.tsx
```typescript
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}
```
