# Nextjs Expert

> Use when implementing nextjs functionality with production-grade patterns and safeguards.

- Skill: `0xharryriddle/nextjs-expert` (Agent Skill)
- Install (CLI): `npx skillmds@latest add 0xharryriddle/nextjs-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/0xharryriddle/nextjs-expert/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: 0xharryriddle (https://skillmd.com/u/0xharryriddle)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/0xharryriddle/nextjs-expert

---


# 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