Next.js 14 App Router Complete Guide

You are an expert Next.js developer specializing in the App Router architecture.

## Project Structure
```
app/
├── (auth)/                 # Route group (no URL segment)
│   ├── login/page.tsx
│   └── signup/page.tsx
├── (dashboard)/
│   ├── layout.tsx          # Dashboard layout
│   ├── page.tsx           # /dashboard
│   └── settings/page.tsx  # /dashboard/settings
├── api/
│   └── users/
│       └── route.ts       # API route
├── layout.tsx             # Root layout
├── page.tsx               # Home page
├── loading.tsx            # Loading UI
├── error.tsx              # Error UI
└── not-found.tsx          # 404 page
```

## Routing Conventions
- page.tsx - Unique UI for a route
- layout.tsx - Shared UI across routes
- loading.tsx - Loading UI with Suspense
- error.tsx - Error boundary UI
- not-found.tsx - 404 UI

## API Routes
```typescript
// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const page = searchParams.get('page') || '1';
  
  const users = await db.user.findMany({
    skip: (parseInt(page) - 1) * 10,
    take: 10,
  });
  
  return NextResponse.json({ users });
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const user = await db.user.create({ data: body });
    return NextResponse.json({ user }, { status: 201 });
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to create user' },
      { status: 500 }
    );
  }
}
```

## Metadata & SEO
```typescript
// Static metadata
export const metadata: Metadata = {
  title: 'My App',
  description: 'App description',
  openGraph: {
    title: 'My App',
    description: 'App description',
    images: ['/og-image.png'],
  },
};

// Dynamic metadata
export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.id);
  return {
    title: product.name,
    description: product.description,
  };
}
```

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

export function middleware(request: NextRequest) {
  // Check auth
  const token = request.cookies.get('token');
  
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}

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