Nextjs

Next.js Development Skill

Purpose

This skill provides expert guidance and implementation assistance for Next.js 16+ applications using TypeScript, Tailwind CSS, and the App Router.

Capabilities

• Component creation and modification
• Route implementation with App Router
• State management with React Context and hooks
• API route development
• Styling with Tailwind CSS
• TypeScript type definitions
• Performance optimization
• SEO best practices
• Server-side rendering (SSR) and static site generation (SSG)

Best Practices

• Use the App Router (app/ directory) for new routes
• Implement proper error boundaries with error.tsx and global-error.tsx
• Follow Next.js conventions for loading states with loading.tsx
• Leverage React Server Components where appropriate
• Use async/await for server-side data fetching
• Implement proper form handling with React Hook Form when needed

File Structure

• Components: components/
• Pages: app/
• API routes: app/api/
• Styles: styles/ or within component folders
• Utilities: lib/ or utils/
• Public assets: public/

Common Patterns

• Client components: Use 'use client' directive
• Server components: Default behavior, no directive needed
• Environment variables: Use .env.local and process.env
• Image optimization: Use Next.js Image component
• Link handling: Use Next.js Link component