Images added while using the WYSIWYG editor are returned as part of the content response which is a string. So we end up with something like this:

```
[`  ...
  <p>Bleh bleh.
  <img src="YOUR IMAGE SRC" alt="YOUR IMAGE ALT"></p>
  <h2>Blah blah:</h2>
    ...`
]
```

We could just render this as it is, but we would not get the benefits offered by [Next.js's Image component](https://nextjs.org/docs/api-reference/next/image).


>The Next.js Image component, next/image, is an extension of the HTML <img> element, evolved for the modern web. It includes a variety of built-in performance optimizations to help you achieve good Core Web Vitals. These scores are an important measurement of user experience on your website, and are factored into Google's search rankings.

The features are:
- Always serve correctly sized image for each device, using modern image formats
- Prevent Cumulative Layout Shift automatically.
- Images are only loaded when they enter the viewport, with optional blur-up placeholders
- On-demand image resizing, even for images stored on remote servers

## The plan
- Use the .split() method to break the string down and store it in to an array.
- When rendering, we will loop the array
- If an item in the array is an img, use Next.js image component
- If an item in the array is not an img, out put as normal

### Break down the string

>The split() method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array.  The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method's call.

[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split)

We will use a regex as the delimeter to split the string at every img tag. We will also want to preserve everything inside the image tag. For this I will create a regex object to store some handy regexes:

```
export const regexes = {
  imgTag: /(<img [^>]*src="[^"]*"[^>]*>)/gm,
  imgSrc: /src="(.*?)"/,
  imgAlt: /alt="(.*?)"/,
};
```

With that out the way we can now use these regexes to begin breaking down the string litral returned from Strapi:

```
const content = YOUR.PROPS.split(regexes.imgTag);
```
The above will give us a new array similar to below:
```
[`  ...
  '<p>Bleh bleh,'
  '<img src="YOUR IMAGE SRC" alt="YOUR IMAGE ALT">',
  '</p><h2>Blah blah:</h2>'
    ...`
]
```

### Some helper functions
We will use the regexes.imgSrc and regexes.imgAlt from before to help us here:

```
function getImgSource(image) {
  return image.match(regexes.imgSrc)[1];
}

function getImgAlt(image) {
  return image.match(regexes.imgAlt)[1];
}
```

>The .match() method retrieves the result of matching a string against a regular expression.

[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match)


### Use the new array

>The .map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

With the new array and our helper functions ready we can now use the .map() method to render our content

```
{
  content.map((a) => {
    {
      if (a.match(regexes.imgTag)) {
        return (
          <div key={a}>
            <Image
              src={getImgSource(a)}
              alt={getImgAlt(a)}
              size={25}
              layout="fill"
              objectFit="contain"
            />
          </div>
        );
      } else {
        return <div key={a} dangerouslySetInnerHTML={{ __html: a }} />;
      }
    }
  });
}

```

## Styles
Next.js image component has many configurable options. In my case I don't actually know the diemensions of my images that I will be using so I will use the fill property. (More info [here](https://nextjs.org/docs/basic-features/image-optimization#what-if-i-dont-know-the-size-of-my-images))


```
size={25} layout="fill" objectFit="contain" 
```
This will get the image at 25% of its original size, place the image so it fills the entire container but never break out of it. Using fill sets the image to position: absolute, this means I will also need to wrap ths image component in an element that has a position set to relative to not break the pages layout

```
<div key={a} style={{ position: "relative" }}>
  <Image
    src={getImgSource(a)}
    alt={getImgAlt(a)}
    size={25}
    layout="fill"
    objectFit="contain"
  />
</div>;

```

large_SD_04_T88_4148B_E2_X_EC_1.webp

medium_SD_04_T88_4148B_E2_X_EC_1.webp

small_SD_04_T88_4148B_E2_X_EC_1.webp

thumbnail_SD_04_T88_4148B_E2_X_EC_1.webp

SD_04_T88_4148B_E2_X_EC_1.webp

Next.js Image component and Strapi content

In this article we will set up a simple blog using Strapi CMS with Next.js front-end to display it content.

By the end of this article we should have been able to:
- Install Strapi Locally
- Set up some content
- Install Next.js
- Set up some components to display data

## Before we start...
### What is Strapi
>[Strapi](https://strapi.io/) is an open-source, **Node.js based**, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks. Strapi also enables content editors to streamline content delivery (text, images, video, etc) across any devices.

### What is Nextjs
> [Next.js](https://nextjs.org/) is a React frame work that lets you build server-side rendering and static web applications using React. It's a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application.

### What you will need
- Nodejs v14+ installed
## Installing and setting up Strapi locally

```
npx create-strapi-app my-project --quickstart
```
The above command will create a Strapi project called "my-project" in the directory you are in. The quickstart option will automatically start the server once it has finished installing. Once the install has completed and the local server has started you would be able to access the cms using this link [http://localhost:1337/admin](http://localhost:1337/admin).

Using the link for the first time will take you to create a super user.

### Content Type Builder
> [The Content-type Builder](https://docs.strapi.io/user-docs/latest/content-types-builder/introduction-to-content-types-builder.html) is a core plugin of Strapi. It is a feature that is always activated by default and cannot be deactivated. The Content-type Builder is however only accessible when the application is in a development environment.

We will use the Content Type Builder to create some collection types with the following properties:
- **Article**: Title (Text), Content (Rich text), Cover (Media), Author (Relation with User (from: users-permissions), Categories (Relation with Category )
- **Category**: Name (Text), Articles (Relation with Article )

### Permissions
>Some features of the admin panel, as well as the content managed with Strapi itself, are ruled by a system of permissions. These permissions can be assigned to roles, which are associated with the users who have access to the admin panel, the administrators. But it is also possible to grant permissions more publicly, to give access to content to the end users of your Strapi application.

[Source](https://docs.strapi.io/user-docs/latest/users-roles-permissions/introduction-to-users-roles-permissions.html)

We will need to set up some permissions in order for us to retrieve the content from our blog. Go to "Settings" > "Users & Permissions plugin" > "Roles" > "Public"

![Screenshot 2022-01-30 003212.jpg](https://res.cloudinary.com/futang-co-uk/image/upload/v1643502749/Screenshot_2022_01_30_003212_8f62da34fb.jpg)

In the Public section open the "Article" accordion and check "find" & "findOne" (Do the same for Category)
![Screenshot 2022-01-30 003307.jpg](https://res.cloudinary.com/futang-co-uk/image/upload/v1643502859/Screenshot_2022_01_30_003307_0ff83101ff.jpg)

### Add some content
Go to content manager and start adding some articles and categories.
![Screenshot 2022-01-30 003631.jpg](https://res.cloudinary.com/futang-co-uk/image/upload/v1643503016/Screenshot_2022_01_30_003631_eb88540951.jpg)

## Installing Next.js
```
npx create-next-app frontend
```
The above command will create a Next.js app called frontend (you should name it to something you can work with).

## Packages
I use the following packages, but feel free to ignore this step or add your own favourites.

### remark
> This package is a unified processor with support for parsing markdown input and serializing markdown as output by using unified with remark-parse and remark-stringify.
[Source](https://www.npmjs.com/package/remark)

### remark html
>This package is a unified (remark) plugin that compiles markdown to HTML.
[Source](https://www.npmjs.com/package/remark-html#what-is-this)

### date-fns
> date-fns provides the most comprehensive, yet simple and consistent toolset
for manipulating JavaScript dates in a browser & Node.js. 
[Source](https://www.npmjs.com/package/date-fns)

## Fetch data from strapi
We will need a function to help us fetch data from our Strapi API. I created my Fetch function in pages/api/fetch.js (feel free to make it where ever makes sense for you)


```
export function getStrapiURL(path = '') {
  return `${process.env.NEXT_PUBLIC_STRAPI_API_URL || 'http://localhost:1337'}${path}`;
}

export async function fetchAPI(path) {
  const requestUrl = getStrapiURL(path);
  const response = await fetch(requestUrl);
  const data = await response.json();
  return data;
}

```
getStrapiURL will return a url using NEXT_PUBLIC_STRAPI_API_URL (if available in  .env) otherwise use the local. It will than append the path param at the end.

fetchAPI will fetch the requestUrl and return the data ready to be consumed by our components.


### Constants
I also create a object to store my end points in utils/constants.js

```
export const API_ENDPOINT = {
  ARTICLE: '/api/articles',
  ARTICLES: '/api/articles?populate=*&sort=publishedAt:DESC&pagination[page]=',
  CATEGORIES: '/api/categories',
  CATEGORY_FILTER: '?populate[articles][populate]=*',
};

```

### Media
We need a function to aslo get strapi Media. I created mine in pages/api/media.js

```
import { getStrapiURL } from './fetch';

export function getStrapiMedia(media) {
  const imageUrl = media.url.startsWith('/') ? getStrapiURL(media.url) : media.url;
  return imageUrl;
}
```

Locally saved images have a structure like /uploads/. If your images are hosted else where it will more than likely start with https.

### global.css
For this example we will greate a global.css. This file will contain styles shared by all components. It's a good place to put your resets and typography.

### _app.js
Paste the below into your _app.js.

```
// Styles
import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return (
      <Component {...pageProps} />
  );
}
```

## Components
_This article assumes you know React.js and will use the below as a reference only._

We will create an Index page that shows the latest articles sorted by most recently published (API_ENDPOINT.ARTICLES).

### Layout
components/layout.js
```
// Next Components
import Head from 'next/head';

export const siteTitle = 'My blog';

export default function Layout({ children }) {

  return (
    <>
      <Head>
        ...
      </Head>
      ...
      <main >{children}</main>
      ...
    </>
  );
}

```
### index.js (Home page)
pages/index.js

```
// Components
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';

// Custom components
import Layout, { siteTitle } from '../components/layout';

// Utils
import { fetchAPI } from './api/fetch';
import { API_ENDPOINT } from '../utils/constants';
import Date from './date';

export async function getStaticProps() {
  const latestProjects = await fetchAPI(API_ENDPOINT.ARTICLES);
  const latestProjectsAttributes = latestProjects.data.attributes;
  return {
    props: {
      postData: latestProjectsAttributes.articles,
    },
  };
}

export default function Home({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{siteTitle} | home</title>
      </Head>
      ...
        <>
          {postData.data.length > 0 && postData.data.map(({ id, attributes }) => {
              return (
        		{!!attributes.Cover.data && (
                  <Image
                    src={attributes.Cover.data.attributes.url}
                    alt={attributes.Cover.data.attributes.name}
                    sizes={35}
                    layout="fill"
                    objectFit="cover"
                    objectPosition="top"
                  />
                )}
        
                <Link href={`/posts/${id}`}>
                  <a>{attributes.Title}</a>
                </Link>
        		<Date dateString={attributes.publishedAt} />
              )
            })
           }
        </>
      ...
    </Layout>
  );
}

```