Nextjs Strapi image component

This library provides a small wrapper for next/image that populates the values from a media coming from strapi.

It automatically populates the following props src, width, height and alt;

Getting started

$3

Install the library

``bash


pnpm

pnpm install @oak-digital/nextjs-strapi-image

npm

npm install @oak-digital/nextjs-strapi-image

yarn

yarn add @oak-digital/nextjs-strapi-image
`

$3

#### Basic usage

The component can be imported easily. The media prop should be the object that contains id and attributes key.

Media data example:

`json
{
"id": 1,
"attributes": {
"name": "x.jpg",
"alternativeText": null,
"caption": null,
"width": 2880,
"height": 1920,
"formats": {
},
"url": "/uploads/x.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
...
}
}
`

Basic usage

`tsx
import { StrapiImage } from '@oak-digital/nextjs-strapi-image';

const MyComponent = ({ media }) => {
return (



);
};
export default MyComponent;
`

#### Local provider (Recommended that you set this up)

If you are using a local image provider for your strapi project (which you most likely are when working locally),
it is recommended to create your own wrapper or store default config somewhere in lib

Wrapper example

`tsx
// components/MyImage.tsx
import { NextStrapiImageProps, StrapiImage } from '@oak-digital/nextjs-strapi-image';
import { FC } from 'react';

const MyImage: FC> = (props) => {
return ;
};
export default MyImage;
`

Config example

`typescript
// lib/config/strapi-image.ts
import { NextStrapiImageProps } from '@oak-digital/nextjs-strapi-image';

export const strapiImageConfig = {
strapiUrl: process.env.NEXT_PUBLIC_STRAPI_URL,
} satisfies Partial;
`

`tsx
// components/my-component.tsx
import { StrapiImage } from '@oak-digital/nextjs-strapi-image'
import { strapiImageConfig } from '../lib/config/strapi-image'

const MyComponent = ({ media }) => {
return (



)
}
export default MyComponent
`

Api

$3

| Prop | Type | Default | Required | Description |
| --------------- | ------------ | ------- | -------- | --------------------------------------------------------------------------------------------------- |
| media | IMedia | - | - [x] | The media received from strapi |
| strapiUrl | string | - | - [ ] | The default strapi url for local providers |
| fallbackSize | boolean | true | - [ ] | If the width or height from strapi is null, it will use 0 as a fallback to avoid runtime errors |
| ...imageProps | ImageProps | - | - [ ] | The rest of the props can be the same as those on next/image |

Testing locally

For testing purposes, there has been added an /example directory, where a strapi instance can be started and nextjs to make sure all the seo fields are correctly added.

Read more

Publishing

`
pnpm run release
``