Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

How to Build a Chat App with React, Strapi & Firebase

large_cover art.jpeg

medium_cover art.jpeg

small_cover art.jpeg

thumbnail_cover art.jpeg

cover art.jpeg

Web development has evolved tremendously over the past decade, with the emergence of modern frameworks that simplify the development process and improve performance. Two such frameworks are Next.js and SvelteKit, which have gained significant popularity in recent years. When developing Strapi applications, choosing the proper framework can ensure optimal performance and seamless user experience. 

In this article, we will compare Next.js and SvelteKit, highlighting their strengths and weaknesses and helping you decide which one to choose for your next Strapi app.


## What is Next.js? 
[Next.js](https://nextjs.org/) is a free and open-source web development framework based on the React library. It allows developers to easily create server-side rendered React applications, resulting in faster page load times, better SEO, and improved performance.

Next.js has several built-in features, including automatic code splitting, client-side and server-side rendering, and optimized performance. It also has an integrated development server and supports hot module replacement, allowing developers to quickly develop and iterate on their applications.

The goal of Next.js, which Vercel supports, is to provide full-stack functionality to the front-end. New rust-based minification capabilities and the incremental bundler and build system Turbopack, which replaces Webpack, indicate that Next.js will remain a powerhouse for users who want access to the full range of development options.

### Key Features of Next.js
Programmers can easily create server-rendered React applications thanks to Next.js, which provides several crucial features. Some of the key characteristics of Next.js include the following:

- Server Rendering: Next allows faster page load times and better SEO. It can also improve overall application performance by reducing the amount of work required by the browser.
- Automatic Routing: Any URL is mapped to the filesystem, then placed in the pages folder, and no configuration is required (you have customization options).
- Automatic code splitting: Next.js automatically splits the code into smaller chunks based on the pages, allowing only the code required for each page to be loaded.
- API routes: With Next.js, creating serverless API routes for server-side functionality or data retrieval from external APIs is simple.
- Extensive plugins and tools: Next.js has a large and active community, and numerous plugins, libraries, and tools can be integrated into Next.js projects, making it simple to add functionality and features to your application.

## How to Integrate Next.js with Strapi?
Next.js documentation contains detailed instructions on how to set up and configure Next.js for various use cases. There are also tutorials and resources on the Strapi blog that can assist in this process, listed below.
- [Integrate Next.js with Strapi](https://strapi.io/integrations/nextjs-cms)
- [Build a blog with Next (React.js) and Strapi](https://strapi.io/blog/build-a-blog-with-next-react-js-strapi)
- [Create your "next" app using Next.js and Strapi](https://www.youtube.com/watch?v=EnuvFyJE6dg&list=PL7Q0DQYATmvjXSuHfB8CY_n_oUeqZzauZ)
- [How to Create an SSG (Static Site Generation) Application with Strapi Webhooks and NextJs](https://strapi.io/blog/how-to-create-an-ssg-static-site-generation-application-with-strapi-webhooks-and-nextjs)
- [How to Build a Notion Clone with Strapi v4 and Next.js](https://strapi.io/blog/how-to-build-a-notion-clone-with-strapi-v4-and-next-js-part-1-of-2) 

## Pros and Cons of Using Next.js with Strapi

### Pros of using Next.js with Strapi
When it comes to building Strapi applications, Next.js can be an excellent choice for several reasons.
- Excellent performance in terms of load times: Next.js ability to prefetch pages and assets, making them instantly available to users. This can significantly enhance the user experience and help to reduce bounce rates.
- Ready to use Server Side Rendering (SSR): The server can render the initial content, which improves the time to first byte (TTFB) and reduces the time it takes for a page to load. SSR can also improve search engine optimization (SEO), as search engines can easily crawl and index the website's content.
- Image optimization: It can help to improve the loading times of images on your Strapi application. Also, automatically optimize and resize images based on the device used to access the site, further improving the user experience.
- Third-party support: Next.js has an extensive third-party support system, with many libraries and packages available to extend its functionalities. Developers can add new features to their Strapi applications quickly and easily, without having to build everything from scratch.
- Great SEO: It can help to improve the visibility of your Strapi application in search engine results pages (SERPs). 

### Cons of Using Next.js with Strapi
While Next.js offers several advantages when building Strapi applications, there are also some potential drawbacks that developers should consider.
- No ready support for dynamic routing: While Next.js provides a powerful routing system that allows for flexible routing configurations, it can be challenging to implement dynamic routing, which can be a requirement for some Strapi applications. Developers may need to work around this limitation by using custom server-side code or third-party libraries.
- Limited control over the server: Next.js abstracts away much of the server-side logic, which can be both an advantage and a disadvantage. While this can make it easier to build and deploy applications, it can also limit developers' control over the server and make it more challenging to implement certain custom server-side features.

## What is SvelteKit?
[SvelteKit](https://kit.svelte.dev/) is a framework for developing web applications with Svelte, a popular front-end JavaScript framework. SvelteKit makes creating fast, server-rendered web applications easier with minimal configuration. Like other contemporary web frameworks, SvelteKit offers a file-based routing system. That is why routes and pages can be easily defined in your application. You can see your changes in real-time with SvelteKit's integrated development server, which supports hot reloading.

SvelteKit has built-in support for deployment to various platforms, including Vercel, Netlify, and Cloudflare Workers, as well as for authentication and caching.

### Key Features of Sveltekit
Key features of SvelteKit include the following:
- Fire Base Routing: You can define your routes and create pages for your application using SvelteKit's file-based routing system in a simple way to comprehend and maintain.
- Server-Side-Rendering (SSR): Built-in server-side rendering (SSR) capabilities from SvelteKit can significantly boost your application's performance and SEO.
- Authentication: SvelteKit comes with integrated authentication support, making integrating user registration and login into your application simpler.
- Hot Reloading: A development server that supports hot reloading is already built into SvelteKit, allowing you to see changes as they happen without having to reload the page manually.
- Caching: Integrated development server is provided by SvelteKit and supports Reducing the number of requests to external data sources by using SvelteKit's caching capabilities to boost the performance of your application.

## How to Integrate SvelteKit with Strapi?

The SvelteKit FAQ has a [section on integrations](https://kit.svelte.dev/faq#integrations), which may be helpful if you still have questions. The tutorial below is an excellent guide for integrating Sveltekit with Strapi.

- [How to Create a Blog with SvelteKit and Strapi](https://strapi.io/blog/how-to-create-a-blog-with-svelte-kit-strapi)

## Pros and Cons of Using SvelteKit with Strapi

### Pros of Using SvelteKit with Strapi
Strapi and svelteKit can work well together to build modern web applications. Here are some potential advantages of using SvelteKit with Strapi:
- Speed and Performance: SvelteKit is a fast, lightweight framework with exceptional performance. When combined with Strapi, it is possible to create web applications that are both fast and responsive.
- Scalability: Strapi and SvelteKit are both excellent options for complex and large-scale web applications due to their highly scalable designs. Strapi's flexible content model can handle a wide range of data and use cases, while SvelteKit's serverless architecture makes it simple to scale your application without worrying about infrastructure.
- Flexibility: Both SvelteKit and Strapi are very adaptable and can be tailored to meet the particular requirements of your project. You can build web applications customized to your needs using SvelteKit's modular architecture and Strapi's robust API and plugin system.
- Development Expertise: The developer experience is prioritized by both SvelteKit and Strapi, making it simple to build and deploy web applications quickly and effectively.

### Cons of using Svelte with Strapi
- Lack of plugins and extensions: SvelteKit's ecosystem of plugins and extensions is smaller than Next.js. This may make finding solutions to specific needs or requirements more complex.
- Limited documentation: SvelteKit is a new framework with limited documentation. This can make it more difficult to find answers to questions or troubleshoot issues during development.

## What is Strapi? 
[Strapi](https://strapi.io/) is an open-source, Node.js based, headless CMS that allows developers to work with their preferred tools and frameworks while saving them a ton of time. Strapi also gives content editors the ability to automate the delivery of content (text, images, and video) to all devices.

Also, Strapi is a strong and adaptable CMS that offers programmers a straightforward and user-friendly way to manage content for their applications. For developers looking to create unique API-driven content, it is a popular option due to its flexibility, scalability, and simplicity of use.

## Create a Strapi Project
Before creating a Strapi project, ensure Node.js is installed on your system. Then run the following command on your command terminal (CMD): 
  `npx create-strapi-app@latest my-project --quickstart` 
  
Once this command has been executed, your Strapi project will start on port 1337 and open localhost:1337/admin/auth/register-admin in your browser. Next, set up your administrative user:

![Strapi Admin Panel](/uploads/Strapi_Admin_Panel_178afe8b2e.png)
 
Fill out the form and submit it by clicking the "Let's Start” button. You'll be taken to the Strapi dashboard, as shown below:

![Strapi Admin Panel](/uploads/Strapi_Admin_Panel_af1292b94d.png)

## Next.js vs SvelteKit Comparison

Now, we will compare a few of their features, ranging from routing to deployment. By the end of this article, you should be better equipped to choose one for your specific project. Let's get started!

### Routing
Routing is a mechanism for mapping URLs to specific components or pages in your application. All two meta-frameworks use file-based routing, the primary method used by all meta-frameworks.
- **Next.js:** It creates files in the pages directory to define your routes; the file name determines the route. A file called pages/about.js, for example, would correspond to the /about route.
- **SvelteKit:** Each file in your application's src/routes directory represents a route. For instance, a file named ´src/routes/about.svelte´ will be mapped to the /about route.

### Error Handling
Error handling is an important aspect of web development that can help ensure the robustness and dependability of your application.
- **Next.js:** You can handle errors using the **getInitialProps** method, which allows you to fetch data and handle errors before rendering the page.
- **SvelteKit:** You can handle errors by using the $error store, a built-in store that tracks errors occurring during page rendering.

### API Routing
API routing is a critical component of modern web applications because it allows different systems and services to interact with one another in a standardized manner. This can be used to expose data or functionality to external partners.
- **Next.js:** API routes can be created by creating a file in the ´pages/api´ directory. The following example demonstrates how it is done.
```js
    export default (req, res) => {
      res.status(200).json({ message: 'Hello, world!' });
    };
```

- **SvelteKit:** API routes are created by placing a file with a specific naming convention in the src/routes directory. The following example demonstrates how it is done.
```js
    // src/routes/posts/[id].json.js
    export function get(req, res) {
      const { id } = req.params;
      res.status(200).json({ id });
    }
```   

### Prerending Pages as Static Site Generator(SSG)
By prerendering pages as an SSG, web developers can improve the performance, SEO, and scalability of their web applications, making them more efficient and user-friendly.
- **Next.js:** Next.js prioritizes static content generation at build time and includes a robust data-fetching framework for that purpose.
- **SvelteKit:** SvelteKit focuses on dynamic and real-time content, with a data fetching framework designed for runtime data fetching.

### Styling
Regarding styling your web applications, both frameworks provide flexibility and power; which one to use ultimately depends on personal preference and project requirements.
- **Next.js:** Next.js relies more heavily on third-party CSS-in-JS libraries because it does not support importing CSS or SCSS files directly into your components.
- **SvelteKit:** SvelteKit support built-in CSS module support, allowing you to create modular, scoped styles.

### Deployment
Next.js and SvelteKit have similar deployment options, but the two frameworks approach deployment differently.
- **Next.js:** Next.js intends to be deployed as a server-rendered application, which typically runs on a Node.js server.
- **SvelteKit:** SvelteKit is designed to be deployed as a static site generator, which means it can be deployed on any web server that can serve static files

## Which One Should You Pick?
Choosing a framework depends entirely on you, your team, and the context of your future project. Both frameworks are popular choices for developing web applications, and each has unique benefits and drawbacks.

### When Should you Pick Next.js?
Next.js may be a better choice if you (or your team) are already familiar with React and require more control over your application's configuration. 
Remember that Next.js is more than just a tool for creating static websites. It is a hybrid framework because static and server-side generated pages are used (or meta-framework). Next.js is an appealing option for content-rich websites with numerous pages (90k+), as it reduces or eliminates the need for upfront construction time.

### When Should you Pick SvelteKit?
SvelteKit is a better fit if you (or your team) value simplicity and ease of use. Many of its features, like server-side rendering, automatic code splitting, and dynamic routing, are similar to those of Next.js. SvelteKit is a good option for developers who want to quickly create web applications without a lot of overhead because of its reputation for simplicity and usability.
One significant advantage of using SvelteKit over Next.js is the ability to work with Svelte. According to the survey “[State of JavaScript](https://stateofjs.com/en-us/)," developer satisfaction with Svelte is higher than with React.
 
## Conclusion
One thing is sure: the place to look for innovations in the front-end framework space right now is in the meta-frameworks, such as Remix, Next.js, SvelteKit, Nuxt.js, Gatsby, SolidStart, Gridsome, and others. We're even getting to the point where meta-meta-frameworks exist. From this article, we have been able to differentiate between Next.js and SvelteKit getting to know their key features, how they can be integrated with Strapi, and which one you should choose for your next Strapi application depending on the use case. 

If you want to learn more about hosting your Strapi application and how to do it, here are some resources you might find helpful:

- [Strapi Documentation](https://docs-next.strapi.io/)
- [On-Premise Vs Cloud Solutions: Which Is The Best For Your Business?](https://strapi.io/blog/on-premise-vs-cloud-solutions-which-is-the-best-for-your-business)
- [Deploying Strapi MySQL on a Traditional Hosting Provider](https://strapi.io/blog/deploying-strapi-my-sql-on-a-traditional-hosting-provider)
- [How to Deploy and Scale Strapi on a Kubernetes Cluster](https://strapi.io/blog/how-to-deploy-and-scale-strapi-on-a-kubernetes-cluster-1-2)

Continue discussing this topic further or connect with more people using Strapi on our [Discord community](https://discord.com/invite/strapi). It is a great place to share your thoughts, ask questions, and participate in live discussions.

[![Strapi Demo](/uploads/Strapi_Demo_be3d83686a.png)](https://strp.cc/3KwOx7w)


Learn the differences between Next.js and SvelteKit and which frameworks will best suit your next Strapi application. 

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

Next.js or SvelteKit: Which One is Better for Your Next Strapi App?

medium_Next.js or SvelteKit_ Which One is Better for Your Next Strapi App_.png

small_Next.js or SvelteKit_ Which One is Better for Your Next Strapi App_.png

thumbnail_Next.js or SvelteKit_ Which One is Better for Your Next Strapi App_.png

Next.js or SvelteKit_ Which One is Better for Your Next Strapi App_.png

Next.js vs SvelteKit: Which One is Better for Your Next Strapi App?

React and Strapi are two popular technologies in the developer ecosystem, and they make a powerful combination for building applications. [React](https://react.dev/) is a widely-used JavaScript library for building user interfaces that allow developers to create reusable components for building complex and interactive web applications. [Strapi](https://strapi.io/) is an open-source headless CMS that lets developers choose their favorite tools and frameworks while allowing editors to manage and distribute their content using their application's admin panel.

By using React for the front-end and Strapi for the back-end, developers can create a seamless user experience that is fast, reliable, and customizable. Strapi's flexible content modeling and REST API capabilities make managing and retrieving data easy. At the same time, React's component-based architecture provides a powerful toolkit for building interactive and dynamic UIs.

In this tutorial, you will learn how to build a meme generator application that enables users to create and alter humorous pictures or videos. You will use React to retrieve memes from Strapi and add text of your choice.

## Prerequisites

Before we start, we need to equip ourselves with the following:

1. Install [N](https://nodejs.org/en)[ode](https://nodejs.org/en) on your local machine. 
2. Basic understanding of Strapi - [get started](https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html) with this quick guide.
3. Basic knowledge of React.js. 


## Creating a New React App

If you have at least npm version 5.2, we can use the tool npx to create a new React project. Check out the [React documentation](https://reactjs.org/) to learn more, and then proceed with the steps below to create a new React app.

But first, ensure node.js is installed on your system. 

Next, we need to create a new directory, `Memegen` 
```bash
    mkdir Memegen && cd Memegen
```

Then, run the command below to create the React app:
```bash
npx create-react-app name-of-project
```
OR 
```bash
npm create-react-app name-of-project
```
  
Running this command will initially ask permission to install React temporarily and its associated packages. Once finished, you can start the app by running the command below.
```bash
npm start
```

This should open up the URL ([http://localhost:3000](http://localhost:3000)) on your default browser.

## Designing the Meme Generator

Meme Generator is very easy to use. The app design is straightforward. When creating memes, the user can only change the image and the text, so you don't have to worry about formatting or design. 

We will design a meme generator app for our project. First, open your React app  `Memegen` in a code editor, navigate through the src folder, and create a file  `meme.jsx`, and paste the code below: 
```js
    import react from "react";
    import "./style.css";
    function Meme() {
      return (
        <div className="meme-container">
          <nav className="navbar">
            <img className={props.memeLogo} src="" alt="memeLogo" />
            <p className="title">Strapi Meme Generator</p>
          </nav>
          <div className="input-field">
            <input
              type="text"
              placeholder="Enter the first line..."
              name="firstline"
            />
            <input
              type="text"
              placeholder="Enter the second line..."
              name="secondline"
            />
          </div>
          <button className="generateBTN">Load random image</button>
        </div>
      );
    }
    export default Meme;
```

Following that, add a logo to our nav bar. Navigate to your src folder and replace the code within the App.jsx with the following:
```js
    import react from "react";
    import Meme from "./meme.jsx";
    import "./style.css";
    import memeLogo from "./images.jpg";
    function App() {
      return (
        <div className="app-container">
          <Meme memeLogo={memeLogo} />
        </div>
      );
    }
    export default App;
 ```   

To get the logo image, you can download any meme image, paste it into your src folder, and save it as `images.jpg`. 

From the code above, pass memeLogo as a prop to the **meme** component. Next, create another file `style.css``,` in our src folder for a little styling.
```js
    *{
        margin: 0px;
        padding:0px;
        box-sizing:border-box;
        font-family:sans-serif;
        user-select:none;
        color: white;
    }
    .memeLogo{
    height:90px;
    }
    .app-container{
       max-width: 400px;
       height: auto;
       background-color: black;
       margin: 30px auto;
       border-radius: 35px; 
       overflow: hidden;
       border-radius: 15px;
    }
    .navbar{
        display:flex;
        align-items: center;
        justify-content: space-between;
        background-color: #1c1c1c;
        padding: 6px 33px;
        width: 100% ;
    }
    .title{
        font-size: 16px;
        font-weight: bold;
        color: #94BD9C ;
    }
    .input-field{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        margin: 18px 0px;
    }
    input{
        padding: 9px;
        font-size: 15px;
        margin: 5px 2px;
        color: black;
        width: 180px;
        border: none;
        outline: none;
        background-color: white;
        color: black;
        border-radius: 9px;
    }
    ::placeholder{
        color: black;
    }
    input:focus{
        outline:2px solid #ffbd08;
        color:black;
    }
    .generateBTN{
        margin:1px auto;
        padding:9px;
        background-color:#6aca7d ;
        color: black;
        font-weight: bold;
        margin-left: 30%;
        border-radius: 9px;
    }
    .generateBTN:active {
        background-color: #4ed08a;
    }
    .meme-image{    
        margin: 21px auto;
    }
    .imageMeme {
    max-width: 350px;
    height: auto;
    margin: 12px 10px 20px 25px; 
    border-radius: 9px;  
    border: 2px solid white;
    }
    .first{
        position: absolute;
        top:18rem;
        /* right: 5px; */
        padding-left: 50px;
        color: white;
    }
    .second{
        position: absolute;
        top:28rem;
        /* right: 5px; */
        padding-left: 220px;
        color: white;
    }
```
 
Ensure your `src/index.js` is the same as this:
```js
    import React from "react";
    import ReactDOM from "react-dom/client";
    import App from "./App.jsx";
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
```    

If you follow this tutorial, your browser should display something similar to the image below.
![Strapi Meme Generator.png](/uploads/Strapi_Meme_Generator_a123a673c5.png)

## Setting up Strapi Project

To set up Strapi for our project, first, create a new directory in Command Prompt (CMD) mkdir strapi-back-end, and then run the command below to create a new Strapi project:

```bash
    npx create-strapi-app@latest my-project --quickstart
```
or
```bash
    yarn create strapi-app my-project --quickstart
```

When you run the command above, you will be prompted to choose your preferred installation method; select Quick Start to proceed. As shown in the screenshot, you will also be asked if you want to use a template; if you do not, Strapi will complete the installation quickly.
After the installation, the Strapi app should launch in your browser and display the following page. Or copy and paste the [http://localhost:1337](http://localhost:1337) link from your cmd into your browser.
![Strapi Quick Installation](/uploads/Strapi_Quick_Installation_a006eff112.png)

Enter the **open the administration,** then signup or log in if you have already registered. You should have a page on your browser like this:
![Strapi Admin Panel](/uploads/Strapi_Admin_Panel_69325a3afc.png)

## Integrating Meme with Strapi

Now upload meme images into your Strapi back-end using the media library.

[Media](https://docs.strapi.io/user-docs/media-library) [L](https://docs.strapi.io/user-docs/media-library)[ibrary](https://docs.strapi.io/user-docs/media-library) allows you to upload images, videos, audio, or documents. Using the media library, you can quickly find the right asset, edit it, and reuse it.

Now, on your Strapi admin pane, go to settings, and click on media. If not enabled, enable responsive friendly upload, and save.
![Media Library Settings](/uploads/Media_Library_Settings_fb91a8d562.png)

**Uploading Meme Images into Media Library**
We have completed the configuration of our media library. It will appear on your dashboard automatically. Next, click on the media library, then click on the add new assets button, add any meme image, and hit **upload 1 asset to the media library** just like the image below.
![Upload Media Library](/uploads/Upload_Media_Library_d3f6555f2d.png)

**Creating Collection Types**
To make a collection type, go to the content-type builder on your admin homepage and create a new collection type called Meme which carries two fields: 

- name: text 
- meme: single media

The name has a text field, whereas the meme has a media field where we will publish all of our meme images.
> Note: don’t forget to enable the permissions for `find` and `findOne`.  You can do that by going to settings > roles > public and choosing the meme content type. 
![Collection Type](/uploads/Collection_type_d69abfa1ba.png)

Next, we must publish the meme images uploaded to our media library. To do so, go to the **Content Manager**, select **Meme** collection type, and click the **Create New Entry** button.
![Content Manager Strapi](/uploads/Content_Manager_Strapi_209b3522b4.png)

Next, fill in the input field name and a meme image from the media library. Save and Publish. You can publish as many meme images as you want for your project.
![Create Entry Strapi](/uploads/Create_Entry_Strapi_dadaecb038.png)

After that, navigate to Settings, choose Roles, and select Public. To allow all application activities, we scroll down to Permissions, click on Meme, and then **select all**. This procedure allows us to access our API completely.  

## Generating Meme from Strapi Back-end

Now you will fetch the meme images from the Strapi back-end to our meme generator application. Strapi API does not retrieve relations, media fields, components, or dynamic zones by default. We'll use the populate parameter to retrieve all fields from our API. For more information, visit Strapi [populating fields](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.html). Next, navigate to src/meme.jsx and add the following code:
```js
    import react from "react";
    import "./style.css";
    import React, { useState, useEffect } from "react";
    function Meme(props) {
      const [appData, setAppData] = useState({
        firstline: "",
        secondline: "",
      });
      // const [newMemeData, setNewMemeData] = useState([]);
      const [memeList, setmemeList] = useState([]);
      const [randomMeme, setrandomMeme] = useState(null);
      function meme() {
        fetch("http://localhost:1337/api/memes?populate=meme")
          .then((res) => res.json())
          .then((meme) => {
            setmemeList(meme.data);
          });
      }
      useEffect(() => {
        meme();
      }, []);
      function getRandomMeme() {
        const randomNumber = Math.floor(Math.random() * memeList.length);
        let randomMemeURL =
          memeList[randomNumber].attributes.meme.data.attributes.url;
        setrandomMeme(randomMemeURL);
      }
      function enterLine(event) {
        setAppData((prevAppData) => {
          return {
            ...prevAppData,
            [event.target.name]: event.target.value,
          };
        });
      }
      console.log(appData);
      return (
        <div className="meme-container">
          <nav className="navbar">
            <img className="memeLogo" src={props.memeLogo} alt="memeLogo" />
            <p className="title">Strapi Meme Generator</p>
          </nav>
          <div className="input-field">
            <input
              type="text"
              placeholder="Enter the first line..."
              name="firstline"
              onChange={enterLine}
              value={appData.firstline}
            />
            <input
              type="text"
              placeholder="Enter the second line..."
              name="secondline"
              onChange={enterLine}
              value={appData.secondline}
            />
          </div>
          <button className="generateBTN" onClick={getRandomMeme}>
            Load random image
          </button>
          {randomMeme !== null && (
            <div className="meme-image">
              <img
                className="imageMeme"
                src={`http://localhost:1337${randomMeme}`}
                alt="Meme Not Responding "
              />
              <h2 className="first">{appData.firstline}</h2>
              <h2 className="second">{appData.secondline}</h2>
            </div>
          )}
        </div>
      );
    }
    export default Meme;
```    

Let's examine how the functions mentioned in the code above work in our project.

- meme(): it uses the populate parameters to retrieve all of our data from the Strapi back-end.
- getRandomMeme(): This function is used to retrieve random meme images.
- enterLine(event): We use this function to compute the text on our meme image.

## Testing our project
Since the data in our application depends on Strapi, we must first start the Strapi server because the application won't run otherwise. First, open a new terminal window, change to the directory where our Strapi app was created, and launch the app by typing the following commands:
 ```bash 
 npm run develop
 ```
 To run your React app: 
 ```bash
 npm start
 ```
Whenever you click the **Load Strapi Meme** button, a random image will appear on your meme generator app, just like the image below.
![Meme Generator App](/uploads/Meme_Generator_App_b3321f2d74.png)

Adding text to a generated meme image: 
![Meme Generator App_](/uploads/Meme_Generator_App_b0f270395b.png)

## Conclusion
We used React js to create a meme generator app, add meme images to our media library, and share them on our meme field. We also obtained the media API by using the populate parameter.
Furthermore, by clicking the Load Strapi Meme button, we could send a random image from our Strapi API to our meme generator application. You can expand the functionality of your application.

Here's a link to codes on my [GitHub](https://github.com/lucky4242/Strapi-memegen) repository.

If you would like to learn more about how to customize a Strapi and React-powered application, check these resources: 
- [Strapi Authentication with React](https://strapi.io/blog/strapi-authentication-with-react)
- [Implementing A/B Testing With Strapi, React, and Optimizely](https://strapi.io/blog/implementing-a-b-testing-with-strapi-react-and-optimizely)
- [Strapi Internals: Customizing the Backend](https://strapi.io/blog/strapi-internals-customizing-the-backend-part-1-models-controllers-and-routes)

Continue discussing this topic further or connect with more people using Strapi on our [Discord community](https://discord.com/invite/strapi). It is a great place to share your thoughts, ask questions, and participate in live discussions.

[![Strapi Cloud is now available](/uploads/Strapi_Cloud_is_now_available_951cf56fec.png)](https://strp.cc/40Us0Z9)


Create a meme generator with React using Strapi to retrieve memes & add custom text. Step-by-step tutorial on how to build a simple React app with Strapi.