mascoteer + Next.js

Use the Image component with the unoptimized prop to prevent Next.js from converting the animated WebP to a static image: <Image src="/mascot.webp" alt="Mascot" width={200} height={200} unoptimized />. This preserves the animation while still using the Image component's layout features.

For animated WebP/GIF mascots, place them in public/ and reference with string paths. Importing animated images through Next.js's image pipeline may break animations. Static T-pose PNGs can be imported normally.

Yes, if you're on the Pro or Business plan with API access. Call the mascoteer API from a Server Action to generate mascots programmatically based on user input, then display the results in your application.

Wrap mascot-heavy components in Suspense boundaries with skeleton placeholders. Use dynamic imports for components that contain multiple mascot animations to prevent them from blocking the initial page load.

Export a static frame of your mascot as a PNG and use it in your Next.js generateMetadata function for og:image tags. Place the image in the public/ directory and reference it with the full URL in your metadata. This ensures your mascot appears in social media previews when pages are shared on Twitter, LinkedIn, Facebook, and messaging platforms, boosting click-through rates on shared links.

Yes, if you have mascoteer API access on Pro or Business plans. Create a Server Action that calls the mascoteer API to generate mascots based on user input, then store the result in your database and display it in your Next.js application. This enables features like user-customizable avatars, dynamic character generation, and personalized mascot experiences powered by AI.

Place mascot animation files in the public/ directory for automatic CDN caching with Next.js deployments on Vercel. Set Cache-Control headers with immutable and long max-age values since mascot assets rarely change. For dynamic mascot content, use Next.js ISR (Incremental Static Regeneration) to cache generated pages while allowing periodic updates. This ensures mascot animations load instantly from edge locations worldwide.

Export dedicated loading and error mascot animations from mascoteer — a thinking character for loading states and a confused or apologetic character for error pages. Import them in your App Router loading.tsx and error.tsx files as standard image elements. Since these files are Server Components by default (except error.tsx which must be a Client Component), the mascot images render instantly without any JavaScript bundle overhead.