strapi-nextgen-framework
Version:
Production-ready, type-safe framework bridging Strapi v4 CMS and Next.js 14+ App Router with automatic cache management, Error Boundaries, and SEO optimization
59 lines • 2.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.StrapiImage = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
/**
* Strapi Image Component - Phase 4 Implementation
* Optimized image component with next/image integration
*/
const image_1 = tslib_1.__importDefault(require("next/image"));
/**
* Optimized image component for Strapi media
*
* Features:
* - Automatic responsive image handling
* - Strapi image format support (thumbnail, small, medium, large)
* - next/image integration with automatic width/height
* - Fallback support for missing images
* - Alt text from Strapi alternativeText field
*
* @example
* ```tsx
* <StrapiImage
* data={page.attributes.hero.image}
* nextImageProps={{
* priority: true,
* className: 'rounded-lg',
* fill: true,
* }}
* />
* ```
*/
function StrapiImage(props) {
const { data, nextImageProps, fallback } = props;
// Handle missing or invalid data
if (!data?.data?.attributes) {
if (fallback) {
return ((0, jsx_runtime_1.jsx)(image_1.default, { src: fallback, alt: "Fallback image", ...nextImageProps }));
}
if (process.env.NODE_ENV === 'development') {
console.warn('[StrapiImage] No image data provided');
}
return null;
}
const imageData = data.data.attributes;
// Extract image properties
const src = imageData.url;
const alt = imageData.alternativeText || imageData.name || '';
const width = imageData.width;
const height = imageData.height;
// If fill mode is used, don't pass width/height
if (nextImageProps?.fill) {
return ((0, jsx_runtime_1.jsx)(image_1.default, { src: src, alt: alt, ...nextImageProps }));
}
// Standard mode with width/height
return ((0, jsx_runtime_1.jsx)(image_1.default, { src: src, alt: alt, width: width, height: height, ...nextImageProps }));
}
exports.StrapiImage = StrapiImage;
//# sourceMappingURL=StrapiImage.js.map