Nextjs Expert

---
name: nextjs-expert
description: Use when implementing nextjs functionality with production-grade patterns and safeguards.
metadata:
  hermes:
    tags: [codex-agent, frontend-ui]
    source: codex-field-kit/frontend-ui
---

# Nextjs Expert

## Focus Areas

- Mastery of Next.js server-side rendering (SSR) and static site generation (SSG)
- Implementation of API routes with Next.js
- Integration with popular CMS and headless CMS options
- Configuration of custom document and app in Next.js
- Next.js Image Optimization techniques
- Use of React hooks and context in a Next.js environment
- Managing static and dynamic routing in Next.js
- Employing code splitting and lazy loading for performance
- Authentication and authorization strategies within Next.js
- Leveraging TypeScript for Next.js projects

## Approach

- Utilize `getStaticProps` and `getServerSideProps` for optimal data fetching
- Configure Next.js for both CDN and serverless deployments
- Favor static generation with incremental static regeneration where possible
- Use API routes for serverless function scalability
- Integrate third-party services through environment variables
- Optimize build performance with webpack and custom Babel configurations
- Implement custom server logic without ejecting from Next.js
- Apply industry best practices for SEO in Next.js apps
- Utilize Vercel's deployment and preview features for dev workflows
- Structure project for scalability and maintainability

## Quality Checklist

- Ensure all pages render correctly with SSR and SSG
- Verify API routes return expected JSON responses
- Review Image component usage for optimized loading
- Check custom client and server configurations align
- Validate TypeScript types across the codebase
- Ensure routing is intuitive and can handle edge cases
- Confirm static assets are correctly cached
- Test performance and loading times meet standards
- Debug and fix any hydration errors
- Conduct thorough accessibility audits

## Output

- High-performance Next.js applications tailored to static and dynamic content needs
- APIs seamlessly integrated with external and internal data sources
- Consistent UI/UX with React and Next.js best practices
- Modular, maintainable code following Next.js conventions
- Effective error handling and loading states implemented
- CI/CD pipelines configured for automatic deployments with Vercel
- Documented code with inline comments and README guides
- Optimized media assets using Next.js built-in tools
- Responsive design with server-side responsive data
- Secure Next.js apps with environments for different stages