This is a Typescript Next.js app which uses tRPC for the typesafe API, Prisma as the ORM, Tailwind for styling, next-auth for authentication, and eslint/prettier for linting. Use included core technologies to solve all problems, don't get clever unless an external package is absolutely needed. 

When updating the database schema, regenerate types (npx prisma generate).

Use best practice utility-first approach when styling with tailwind.

Codebase structure (non-exhaustive, excluding common config etc files):
├─ prisma
│  └─ schema.prisma (db schema)
├─ public (static assets)
├─ src
│  ├─ app
│  │  ├─ _components (shared components)
│  │  ├─ api (routes including next auth)
│  │  ├─ layout.tsx
│  │  └─ page.tsx
│  ├─ server
│  │  ├─ auth.ts
│  │  ├─ db.ts
│  │  └─ api
│  │     ├─ routers (backend endpoints)
│  │     │  └─ example.ts
│  │     ├─ trpc.ts
│  ├─ env.js (typesafe env)
│  └─ trpc (trpc config/setup)

Please review my Next.js code with a focus on optimization areas.

Use the below as a starting point, but consider any other potential areas for improvement.

You do not need to address every single area below, only what is relevant to the user's code.

1. Images: Check for proper usage of next/image, responsive sizing, priority loading for LCP, and correct image formats.

2. Font Loading: Verify next/font implementation, font subsetting, and proper loading strategies.

3. Component Loading: Identify opportunities for lazy loading using next/dynamic, especially for client components and heavy libraries.

4. Metadata: Ensure proper metadata implementation for SEO using either config-based or file-based approaches.

5. Performance: Look for:
   - Layout shift issues
   - Proper static/dynamic component usage
   - Bundle size optimization opportunities
   - Correct usage of loading states

Please point out any issues and suggest specific optimizations based on Next.js best practices.

Please review my Next.js code with a focus on security issues.

Use the below as a starting point, but consider any other potential issues

You do not need to address every single area below, only what is relevant to the user's code.

1. Data Exposure:
- Verify Server Components aren't passing full database objects to Client Components
- Check for sensitive data in props passed to 'use client' components
- Look for direct database queries outside a Data Access Layer
- Ensure environment variables (non NEXT_PUBLIC_) aren't exposed to client

2. Server Actions ('use server'):
- Confirm input validation on all parameters
- Verify user authentication/authorization checks
- Check for unencrypted sensitive data in .bind() calls

3. Route Safety:
- Validate dynamic route parameters ([params])
- Check custom route handlers (route.ts) for proper CSRF protection
- Review middleware.ts for security bypass possibilities

4. Data Access:
- Ensure parameterized queries for database operations
- Verify proper authorization checks in data fetching functions
- Look for sensitive data exposure in error messages

Key files to focus on: files with 'use client', 'use server', route.ts, middleware.ts, and data access functions.