next-best-practices

Optimize images and fonts in Next.js by using the `next/image` component for efficient image handling and the `next/font` feature for automatic font optimization. These built-in components automatically serve properly sized assets.

Next.js best practices for file structure involve using special file conventions, while data patterns include efficient data fetching strategies. These guidelines ensure optimal performance, maintainability, and scalability across server-side rendering and static generation.

Yes, you can self-host Next.js applications outside of Vercel using deployment strategies like Docker or PM2. This allows you to maintain control over your infrastructure while running Next.js efficiently.

Handle invalid React Server Component patterns by detecting them early and applying correct async patterns and runtime selection. This ensures your RSC boundaries are properly maintained without runtime errors.

Debug and resolve Next.js bundling issues by analyzing your bundle to identify problems with third-party packages, CSS imports, polyfills, and ESM/CommonJS conflicts. Use the `_next/mcp` endpoint and other tools for debugging.

Implement Next.js error handling by setting up error boundaries, navigating API gotchas correctly, and configuring 404 handling. This ensures your application fails gracefully and maintains a good user experience.