DEV Community: Paul Bratslavsky

Simplifying Relational Management with Strapi Populate Plugin

Paul Bratslavsky — Mon, 03 Feb 2025 13:38:45 +0000

Managing data relationships in a headless CMS like Strapi can sometimes be challenging, especially when it comes to locking down access to certain items.

The Strapi Protected Populate Plugin significantly simplifies handling complex data structures while ensuring data security. This blog post will explore how this plugin can streamline your workflow and enhance your Strapi experience.

Why the Strapi Protected Populate Plugin Exists

Strapi provides a powerful headless CMS framework, by default, Strapi allows you to populate data relationships as deep as you want.

Learn more about Strapi here.

While this flexibility can be useful, it also poses a significant risk of data leakage. Unrestricted population depth can inadvertently expose sensitive information to unauthorized users, especially in complex data structures.

This is where the Strapi Protected Populate Plugin comes into play. The plugin was developed to address these challenges by providing a controlled and secure data population, ensuring that only authorized users can access specific data relationships.

Key Features

1. Data Security

Data protection is crucial, especially when dealing with sensitive information. The Protected Populate Plugin ensures only authorized users can access specific data relationships. By implementing fine-grained access control, the plugin helps maintain data integrity and security. It is an ideal choice for applications that handle sensitive data.

2. UI Based

Thanks to its user-friendly interface, integrating the Protected Populate Plugin into your Strapi project is straightforward. The plugin is designed to work seamlessly with Strapi's existing architecture, ensuring that you can start using it with minimal configuration. This ease of integration means you can enhance your data management capabilities without significantly changing your existing codebase.

3. Auto Populate

One of Strapi's primary challenges is managing relationships between different data types. The Protected Populate Plugin addresses this by providing an intuitive way to automatically populate all the fields you have selected for a user to view if no specific query is provided. This feature alone can save developers significant time and effort, allowing them to focus on building features rather than managing data.

Getting Started

To get started with the Protected Populate Plugin, you can follow these steps:

Setup your Strapi project.
Install the plugin from the Strapi Marketplace.
Configure the plugin to suit your project's needs.
Start using the plugin to manage your data relationships with confidence.

1. Setup your Strapi project.

We will set up an simple Strapi project with example data types and relationships.

Let's start by running this command to create a new Strapi project:

npx create-strapi-app@latest strapi-populate

You will be prompted to answer a few questions about your project.

We will skip signing up for Strapi Cloud.

Just make sure that you select yes for Start with an example structure & data?

npx create-strapi-app@latest

 Strapi   v5.9.0 🚀 Let's create your new project

? What is the name of your project? strapi-populate
? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

 Strapi   Creating a new application at /Users/paul/work/strapi-populate

Now that we have our project, you can start the Strapi server by running this command:

cd strapi-populate
npm run develop

You will be prompted to create an admin user.

Once you have created an admin user, you can login to the Strapi admin panel at http://localhost:1337/admin.

2. Install the plugin from the Strapi Marketplace.

You can install the plugin from the Strapi Marketplace by running this command:

npm install strapi-plugin-protected-populate

Once the plugin is installed, we would need to configure it by adding the plugin to the config/plugins.ts file.

export default () => ({
  "protected-populate": {
    enabled: true,
  },
});

Nice now that we have the plugin enabled with the default configuration, we can start using it.

Let's see what we get out of the box before exploring additional configuration options.

How To Use The Plugin

Open strapi
On the left side in the menu click on the lock icon
Now you should see the following

Click + Add a new protected route

note: notice that we are selecting GET /api/articles and matching it with the appropriate collection type api::article.article.

These need to match for the plugin to work.

Since our example data has Article collection type, that is what we are using.

Now that we have created a protected route, we can start using it.

If you want to enable to use the users-permissions plugin, you can check the checkbox. This will let you be more granular with your permissions.

I am going to skip that for now. And my permission will be set for both.

Go ahead and click Save.

Make sure that you Articles are published.

And you enable the endpoint in the Settings -> Users & Permissions tab.

Now that we have everything set up, let's see what we get in our response using Postman.

I am going to make a GET request to the http://localhost:1337/api/articles?populate=* endpoint with the populate flag. Notice, how it will be ignored, and we only see the id and documentId fields but all others are ignored.

Now, back in the Protected Populate Plugin, I am going to add the following fields to populate: title, description, slug and click Save.

Now, I am going to make a GET request to the http://localhost:1337/api/articles?populate=* endpoint with the populate flag. Notice, now we see the title, description, slug fields. And all other fields are ignored.

Nice, this is awesome. We can now lock down our data and only allow users to see the fields we want them to see. Even if they try to use the populate attribute in their request.

Now, that we have basic usage, let's see how we can use the the auto populate feature.

Setting Up Auto Populate

auto-populate: will make the API return all selected fields you selected.

Let's update our configuration to enable the auto populate feature in the config/plugins.ts file.

for TS

export default () => {
  return {
    "protected-populate": {
      enabled: true,
      config: {
        ["auto-populate"]: true,
      },
    },
  };
};

for JS

module.exports = () => {
  return {
    "protected-populate": {
      enabled: true,
      config: {
        ["auto-populate"]: true,
      },
    },
  };
};

Now, that we enabled this feature, back in the Protected Populate Plugin Admin we will ask to return the author field.

We will still need to enable the users-permissions plugin to be able to populate the author field.

Now, if we make a GET request to the http://localhost:1337/api/articles endpoint with the populate flag. Notice, now we see the author field.

But we don't see any of the data, because by default the Protected Populate will only return the fields that you will allow.

So let's update it to the following, we will allow name and avatar fields.

Avatar field will include the name, alternativeText, and url field.

The url field was of screen but I made sure to select it in the avatar dropdown.

Now, if we make a GET request to the http://localhost:1337/api/articles endpoint with the populate flag. Notice, now we see the author field.

Our full response only allow us to return the data that we allow.

{
    "data": [
        {
            "id": 6,
            "documentId": "x92qf8togl3l5xnvcm6uxi42",
            "title": "A bug is becoming a meme on the internet",
            "description": "How a bug on MySQL is becoming a meme on the internet",
            "slug": "a-bug-is-becoming-a-meme-on-the-internet",
            "author": {
                "id": 2,
                "documentId": "zdjz0tu7miurimuhqidhodiy",
                "name": "Sarah Baker",
                "avatar": {
                    "id": 2,
                    "documentId": "h39utnlqoknescrrjqqv9dxe",
                    "name": "sarahbaker@strapi",
                    "alternativeText": "An image uploaded to Strapi called sarahbaker@strapi",
                    "url": "/uploads/sarahbaker_strapi_3427e3c560.jpeg"
                }
            }
        },
        {
            "id": 7,
            "documentId": "y8jayr7ymbey9j81n0z7tya1",
            "title": "Beautiful picture",
            "description": "Description of a beautiful picture",
            "slug": "beautiful-picture",
            "author": {
                "id": 2,
                "documentId": "zdjz0tu7miurimuhqidhodiy",
                "name": "Sarah Baker",
                "avatar": {
                    "id": 2,
                    "documentId": "h39utnlqoknescrrjqqv9dxe",
                    "name": "sarahbaker@strapi",
                    "alternativeText": "An image uploaded to Strapi called sarahbaker@strapi",
                    "url": "/uploads/sarahbaker_strapi_3427e3c560.jpeg"
                }
            }
        },
        {
            "id": 8,
            "documentId": "t7gp8jmzgq3ku4qlnhftat1s",
            "title": "The internet's Own boy",
            "description": "Follow the story of Aaron Swartz, the boy who could change the world",
            "slug": "the-internet-s-own-boy",
            "author": {
                "id": 1,
                "documentId": "i7qn2stvzcehvjh3bwoqck3h",
                "name": "David Doe",
                "avatar": {
                    "id": 1,
                    "documentId": "mnybhptzjgzqepzrj4tnde2g",
                    "name": "daviddoe@strapi",
                    "alternativeText": "An image uploaded to Strapi called daviddoe@strapi",
                    "url": "/uploads/daviddoe_strapi_ff8349070f.jpeg"
                }
            }
        },
        {
            "id": 9,
            "documentId": "nis5i7wl5h0snf581mq7oeao",
            "title": "This shrimp is awesome",
            "description": "Mantis shrimps, or stomatopods, are marine crustaceans of the order Stomatopoda.",
            "slug": "this-shrimp-is-awesome",
            "author": {
                "id": 1,
                "documentId": "i7qn2stvzcehvjh3bwoqck3h",
                "name": "David Doe",
                "avatar": {
                    "id": 1,
                    "documentId": "mnybhptzjgzqepzrj4tnde2g",
                    "name": "daviddoe@strapi",
                    "alternativeText": "An image uploaded to Strapi called daviddoe@strapi",
                    "url": "/uploads/daviddoe_strapi_ff8349070f.jpeg"
                }
            }
        },
        {
            "id": 10,
            "documentId": "hbh9x13v4yaj1qy5qn62qanz",
            "title": "What's inside a Black Hole",
            "description": "Maybe the answer is in this article, or not...",
            "slug": "what-s-inside-a-black-hole",
            "author": {
                "id": 2,
                "documentId": "zdjz0tu7miurimuhqidhodiy",
                "name": "Sarah Baker",
                "avatar": {
                    "id": 2,
                    "documentId": "h39utnlqoknescrrjqqv9dxe",
                    "name": "sarahbaker@strapi",
                    "alternativeText": "An image uploaded to Strapi called sarahbaker@strapi",
                    "url": "/uploads/sarahbaker_strapi_3427e3c560.jpeg"
                }
            }
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 5
        }
    }
}

Conclusion

The Strapi Protected Populate Plugin is a valuable addition to any Strapi project, offering a simplified data population, enhanced security, and easy integration.

Whether you are building an e-commerce platform, a content management system, or an educational application, this plugin can help streamline your data management processes and improve overall efficiency. Give it a try and see how it can make your life easier!

For more details and to contribute to the project, visit the GitHub repository.

Project example code GitHub repository.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

Epic Next.js 15 Tutorial Part 2: Building Out The Home Page

Paul Bratslavsky — Wed, 13 Nov 2024 08:46:17 +0000

This post is part 2 of many in our Epic Next.js Series. You can find the outline for upcoming posts here.

In this post, we will start by building our home page. We will focus on the Hero Component and Features Component and use Dynamic Zone to allow our Strapi admins to choose which component they want to use.

If you missed the first part of this series, you can check it out here.

Once our data is returned by our Strapi API, we will build out those same components within our Next JS app.

Our goal is to display our Hero Section and Features Sections on our Next application. So let's get started.

Structuring Our Data In Strapi

In Strapi, there are many ways of structuring your data; you can create single types, collection types, and components that allow you to create reusable content types that you can use in multiple places.

We will build our Hero Section and Features Section as components.

Let's start by building out our Hero Section Component.

Building The Hero Section Component

Looking at our Hero Section UI, we can break it down into the following parts.

We have the following items:

Image
Heading
Subheading
Link

So, let's jump into our Strapi Admin and create our Hero Component.

Let's start by navigating to Content-Type Builder under COMPONENTS and clicking on Create new component.

We will create the following fields.

Media -> Single Media - image
Text -> Short Text - heading
Text -> Long Text - subHeading

Note: Change it to only allow images for media in advanced settings.

For our link, we will create a component that we can reuse.

Go ahead and create a new component called Link and save it under components.

Our Link component will have the following fields.
Text -> Short Text -> url
Text -> Short Text -> text
Boolean -> isExternal

Note: for isExternal in the advanced setting, change the default value to be set to false.

Let's go ahead and add them now.

Finally, please return to our Hero Section component and add our newly created Link component.

The completed fields in our Hero Section component should look like the following:

Finally, let's add our newly created component to our Home Page via dynamic zones.

We can accomplish this by going to Content-Type Builder, selecting the Home Page under SINGLE TYPES and clicking on Add another field to this single type.

Select the Dynamic Zone field, give it a name called blocks, and click Add components to the zone.

Finally, select Use an existing component and choose our Hero Section component.

Great, we now have our first component that has been added to our Home Page

Before creating our Features Section component, let's see if we can get our current component from our API.

Fetching The Hero Section Component Data

First, let's add some data.

Now make sure that we have proper permission in the Settings

Now, let's test our API call in Postman. But before we do, we need to specify in Strapi all the items we would like to populate.

Looking at our content, we need to populate the following items: blocks, image, and link.

Before we construct our query, quick note, as of Strapi 5, we need to use the on flag to populate our dynamic zones data.

You can learn more about it in the Strapi docs.

Remember, we can construct our query using the Strapi Query Builder.

We can populate our data with the following query.

{
  populate: {
    blocks: {
      on: {
        "layout.hero-section": {
          populate: {
            image: {
              fields: ["url", "alternativeText"]
            },
            link: {
              populate: true
            }
          }
        }
      }
    }
  },
}

Using the query builder, the following LHS syntax query will be generated.

http://localhost:1337/api/home-page?populate[blocks][on][layout.hero-section][populate][image][fields][0]=url&populate[blocks][on][layout.hero-section][populate][image][fields][1]=alternativeText&populate[blocks][on][layout.hero-section][populate][link][populate]=true

Here is the complete URL

We will get the following data after making a GET request in Postman.

{
    "data": {
        "id": 3,
        "documentId": "fcnlk9xwoqmogfxvfim713y4",
        "title": "Home Page",
        "description": "This is our first single type",
        "createdAt": "2024-10-01T18:33:35.081Z",
        "updatedAt": "2024-10-01T23:15:19.426Z",
        "publishedAt": "2024-10-01T23:15:19.436Z",
        "locale": null,
        "blocks": [
            {
                "__component": "layout.hero-section",
                "id": 2,
                "heading": "Epic Next.js Tutorial",
                "subHeading": "It's awesome just like you.",
                "image": {
                    "id": 1,
                    "documentId": "fzwtij74oqqf9yasu9mit953",
                    "url": "/uploads/computer_working_3aee40bab7.jpg",
                    "alternativeText": null
                },
                "link": {
                    "id": 2,
                    "url": "/login",
                    "text": "Login",
                    "isExternal": false
                }
            }
        ]
    },
    "meta": {}
}

Now that we know our Strapi API works, let's move into the frontend of our project, fetch our new data, and create our Hero Section React component.

Fetching Our Home Page Data In The Frontend

Taking a look at our frontend code, this is what we have so far.

async function getStrapiData(url: string) {
  const baseUrl = "http://localhost:1337";
  try {
    const response = await fetch(baseUrl + url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

export default async function Home() {
  const strapiData = await getStrapiData("/api/home-page");

  const { title, description } = strapiData.data;

  return (
    <main className="container mx-auto py-6">
      <h1 className="text-5xl font-bold">{title}</h1>
      <p className="text-xl mt-4">{description}</p>
    </main>
  );
}

If we console log strapiData, we will notice that we are not yet getting all our fields.

{
  data: {
    id: 2,
    documentId: 'fcnlk9xwoqmogfxvfim713y4',
    title: 'Home Page',
    description: 'This is our first single type',
    createdAt: '2024-10-01T18:33:35.081Z',
    updatedAt: '2024-10-01T18:33:35.081Z',
    publishedAt: '2024-10-01T18:33:35.090Z',
    locale: null
  },
  meta: {}
}

That is because we need to tell Strapi what items we would like to populate. We already know how to do this; it is what we did earlier in the section when using Strapi Query Builder.

We will use the query that we defined previously.

{
  populate: {
    blocks: {
      on: {
        "layout.hero-section": {
          populate: {
            image: {
              fields: ["url", "alternativeText"]
            },
            link: {
              populate: true
            }
          }
        }
      }
    }
  },
}

But to make this work, we must first install the qs package from NPM. You can learn more about it here.

It will allow us to generate our query string by passing our object from above.

Let's run the following two commands in the front end of our project.

This will add qs.

  yarn add qs

This will add the types.

  yarn add @types/qs

Now that we have installed our qs package, we can construct our query and refactor our getStrapiData function.

Let's add the following changes to your page.tsx file.

First let's import the qs library.

import qs from "qs";

Define our query.

const homePageQuery = qs.stringify({
  populate: {
    blocks: {
      on: {
        "layout.hero-section": {
          populate: {
            image: {
              fields: ["url", "alternativeText"]
            },
            link: {
              populate: true
            }
          }
        }
      }
    }
  },
});

Finally, let's update our getStrapiData function.

We will use the URL to construct our final path; you can learn more about it in the MDN docs.

Our updated function will look like the following.

async function getStrapiData(path: string) {
  const baseUrl = "http://localhost:1337";

  const url = new URL(path, baseUrl);
  url.search = homePageQuery;

  try {
    const response = await fetch(url.href);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

The final code will look as follows:

import qs from "qs";

const homePageQuery = qs.stringify({
  populate: {
    blocks: {
      on: {
        "layout.hero-section": {
          populate: {
            image: {
              fields: ["url", "alternativeText"]
            },
            link: {
              populate: true
            }
          }
        }
      }
    }
  },
});

async function getStrapiData(path: string) {
  const baseUrl = "http://localhost:1337";

  const url = new URL(path, baseUrl);
  url.search = homePageQuery;

  try {
    const response = await fetch(url.href);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

export default async function Home() {
  const strapiData = await getStrapiData("/api/home-page");

  console.dir(strapiData, { depth: null });

  const { title, description } = strapiData.data;

  return (
    <main className="container mx-auto py-6">
      <h1 className="text-5xl font-bold">{title}</h1>
      <p className="text-xl mt-4">{description}</p>
    </main>
  );
}

When we look at our response in the terminal, we should see that Strapi has returned all of our requested data.

{
  data: {
    id: 3,
    documentId: 'fcnlk9xwoqmogfxvfim713y4',
    title: 'Home Page',
    description: 'This is our first single type',
    createdAt: '2024-10-01T18:33:35.081Z',
    updatedAt: '2024-10-01T23:15:19.426Z',
    publishedAt: '2024-10-01T23:15:19.436Z',
    locale: null,
    blocks: [
      {
        __component: 'layout.hero-section',
        id: 2,
        heading: 'Epic Next.js Tutorial',
        subHeading: "It's awesome just like you.",
        image: {
          id: 1,
          documentId: 'fzwtij74oqqf9yasu9mit953',
          url: '/uploads/computer_working_3aee40bab7.jpg',
          alternativeText: null
        },
        link: { id: 2, url: '/login', text: 'Login', isExternal: false }
      }
    ]
  },
  meta: {}
}

Let's Create Our Hero Section Component

Before we can render our section data, let's create our Hero Section component.

We will start with the basics to ensure that we can display our data, and then we will style the UI with Tailwind and Shadcn.

Inside the components let's create a new folder called custom, this is where we will add all of our components that we will create.

Inside the custom folder let's create a bare component called hero-section.tsx.

We will add the following code to get started.

export function HeroSection({ data } : { readonly data: any }) {
  console.dir(data, { depth: null })
  return (
    <div>Hero Section</div>
  )
}

We will update the types later, but for now we will do the I don't know TS and just use any;

Now that we have our basic component, let's import in our home page.

import qs from "qs";
import { HeroSection } from "@/components/custom/hero-section";

const homePageQuery = qs.stringify({
  populate: {
    blocks: {
      on: {
        "layout.hero-section": {
          populate: {
            image: {
              fields: ["url", "alternativeText"]
            },
            link: {
              populate: true
            }
          }
        }
      }
    }
  },
});

async function getStrapiData(path: string) {
  const baseUrl = "http://localhost:1337";

  const url = new URL(path, baseUrl);
  url.search = homePageQuery;

  try {
    const response = await fetch(url.href);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

export default async function Home() {
  const strapiData = await getStrapiData("/api/home-page");

  console.dir(strapiData, { depth: null });

  const { title, description, blocks } = strapiData.data;

  return (
    <main className="container mx-auto py-6">
      <h1 className="text-5xl font-bold">{title}</h1>
      <p className="text-xl mt-4">{description}</p>
      <HeroSection data={blocks} />
    </main>
  );
}

We should see the following output when running our app. Notice we are able to see our HeroSection component.

Now let's build out our component. Let's add the following code to get us started.

import Link from "next/link";

export function HeroSection({ data }: { readonly data: any }) {
  console.dir(data, { depth: null });
  return (
    <header className="relative h-[600px] overflow-hidden">
      <img
        alt="Background"
        className="absolute inset-0 object-cover w-full h-full"
        height={1080}
        src="https://images.pexels.com/photos/4050314/pexels-photo-4050314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
        style={{
          aspectRatio: "1920/1080",
          objectFit: "cover",
        }}
        width={1920}
      />
      <div className="relative z-10 flex flex-col items-center justify-center h-full text-center text-white bg-black bg-opacity-20">
        <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl">
          Summarize Your Videos
        </h1>
        <p className="mt-4 text-lg md:text-xl lg:text-2xl">
          Save time and get the key points from your videos
        </p>
        <Link
          className="mt-8 inline-flex items-center justify-center px-6 py-3 text-base font-medium text-black bg-white rounded-md shadow hover:bg-gray-100"
          href="/login"
        >
          Login
        </Link>
      </div>
    </header>
  );
}

Everything is currently hardcoded but we will fix it in just a little bit.

And do make sure that everything looks good, let's update our code in page.tsx to remove the original styles we added in the <main> html tag.

return (
  <main>
    <HeroSection data={blocks[0]} />
  </main>
);

Now our UI should look like the following.

And the final code in the page.tsx file should reflect the following changes.

import qs from "qs";
import { HeroSection } from "@/components/custom/hero-section";

const homePageQuery = qs.stringify({
  populate: {
    blocks: {
      on: {
        "layout.hero-section": {
          populate: {
            image: {
              fields: ["url", "alternativeText"],
            },
            link: {
              populate: true,
            },
          },
        },
      },
    },
  },
});

async function getStrapiData(path: string) {
  const baseUrl = "http://localhost:1337";

  const url = new URL(path, baseUrl);
  url.search = homePageQuery;

  try {
    const response = await fetch(url.href);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

export default async function Home() {
  const strapiData = await getStrapiData("/api/home-page");

  console.dir(strapiData, { depth: null });

  const { blocks } = strapiData.data;

  return (
    <main>
      <HeroSection data={blocks[0]} />
    </main>
  );
}

Continue Working On Our Hero Section Component

Going back to the hero-section.tsx file, let's go ahead and display our Strapi data.

This is what our data looks like.

{
  __component: 'layout.hero-section',
  id: 2,
  heading: 'Epic Next.js Tutorial',
  subHeading: "It's awesome just like you.",
  image: {
    id: 1,
    documentId: 'fzwtij74oqqf9yasu9mit953',
    url: '/uploads/computer_working_3aee40bab7.jpg',
    alternativeText: null
  },
  link: { id: 2, url: '/login', text: 'Login', isExternal: false }
}

Let's use this response structure do define our interface.

Let's create the following interfaces.

interface Image {
  id: number;
  documentId: string;
  url: string;
  alternativeText: string | null;
}

interface Link {
  id: number;
  url: string;
  label: string;
}

interface HeroSectionProps {
  id: number;
  documentId: string;
  __component: string;
  heading: string;
  subHeading: string;
  image: Image;
  link: Link;
}

And update our HeroSection component use our types.

export function HeroSection({ data }: { readonly data: HeroSectionProps }) {
  // ...rest of the code
}

Finally, let's add our data from Strapi instead of hard coding it by making the following changes to our HeroSection component.

import Link from "next/link";

interface Image {
  id: number;
  documentId: string;
  url: string;
  alternativeText: string | null;
}

interface Link {
  id: number;
  url: string;
  text: string;
}

interface HeroSectionProps {
  id: number;
  documentId: string;
  __component: string;
  heading: string;
  subHeading: string;
  image: Image;
  link: Link;
}

export function HeroSection({ data }: { readonly data: HeroSectionProps }) {
  console.dir(data, { depth: null });
  const { heading, subHeading, image, link } = data;
  const imageURL = "http://localhost:1337" + image.url;

  return (
    <header className="relative h-[600px] overflow-hidden">
      <img
        alt={image.alternativeText ?? "no alternative text"}
        className="absolute inset-0 object-cover w-full h-full"
        height={1080}
        src={imageURL}
        style={{
          aspectRatio: "1920/1080",
          objectFit: "cover",
        }}
        width={1920}
      />
      <div className="relative z-10 flex flex-col items-center justify-center h-full text-center text-white bg-black bg-opacity-40">
        <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl">
          {heading}
        </h1>
        <p className="mt-4 text-lg md:text-xl lg:text-2xl">
          {subHeading}
        </p>
        <Link
          className="mt-8 inline-flex items-center justify-center px-6 py-3 text-base font-medium text-black bg-white rounded-md shadow hover:bg-gray-100"
          href={link.url}
        >
          {link.text}
        </Link>
      </div>
    </header>
  );
}

We are now getting and displaying our data from Strapi but here are still more improvements that we must make in this component.

Like to use Next Image and not have to hard code "http://localhost:1337" path that we append to our image url but instead should get it from our .env variable.

We will do this in the next post, where we will finish up our Hero Section component and start working on the Features Component

Conclusion

We are making some great progress. In this post, we started working on displaying our Hero Section content.

In the next post, we will create the StrapiImage component using the Next Image component to make rendering Strapi images easier.

Finish up our Hero Section and start working on our Features Section.

I hope you are enjoying this series so far. Thank you for your time, and I will see you in the next one.

Note about this project

This project has been updated to use Next.js 15 and Strapi 5.

If you have any questions, feel free to stop by at our Discord Community for our daily "open office hours" from 12:30 PM CST to 1:30 PM CST.

If you have a suggestion or find a mistake in the post, please open an issue on the GitHub repository.

You can also find the blog post content in the Strapi Blog.

Feel free to make PRs to fix any issues you find in the project or let me know if you have any questions.

Happy coding!

Paul

Epic Next JS 15 Tutorial Part 8: Search and Pagination in Next.js

Paul Bratslavsky — Wed, 13 Nov 2024 08:28:15 +0000

We are making amazing progress. We are now in the final stretch. In this section, we will look at Search and Pagination.

How To Handle Search In Next.js

Let's jump in and look at how to implement search with Next.js and Strapi CMS.

First, create a new file inside our src/components/custom folder called search.tsx and add the following code.

"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useDebouncedCallback } from "use-debounce";
import { Input } from "@/components/ui/input";

export function Search() {
  const searchParams = useSearchParams();
  const { replace } = useRouter();
  const pathname = usePathname();

  const handleSearch = useDebouncedCallback((term: string) => {
    console.log(`Searching... ${term}`);
    const params = new URLSearchParams(searchParams);
    params.set("page", "1");

    if (term) {
      params.set("query", term);
    } else {
      params.delete("query");
    }

    replace(`${pathname}?${params.toString()}`);
  }, 300);

  return (
    <div>
      <Input
        type="text"
        placeholder="Search"
        onChange={(e) => handleSearch(e.target.value)}
        defaultValue={searchParams.get("query")?.toString()}
      />
    </div>
  );
}

The secret to understanding how our Search component works is to be familiar with the following hooks from Next.js.

useSearchParams docs reference It is a Client Component hook that lets you read the current URL's query string.

We use it in our code to get our current parameters from our url.

Then, we use the new URLSearchParams to update our search parameters. You can learn more about it here.

useRouter docs reference : Allows us to access the router object inside any function component in your app. We will use the replace method to prevent adding a new URL entry into the history stack.
usePathname docs reference: This is a Client Component hook that lets you read the current URL's pathname. We use it to find our current path before concatenating our new search parameters.
useDebouncedCallback npm reference: Used to prevent making an api call on every keystroke when using our Search component.

Install the use-debounce package from npm with the following command.

yarn add use-debounce

Now, let's look at the flow of our Search component's work by looking at the following.

return (
  <div>
    <Input
      type="text"
      placeholder="Search"
      onChange={(e) => handleSearch(e.target.value)}
      defaultValue={searchParams.get("query")?.toString()}
    />
  </div>
);

We are using the defaultValue prop to set the current search parameters from our URL.

When the onChange fires, we pass the value to our handleSearch function.

const handleSearch = useDebouncedCallback((term: string) => {
  console.log(`Searching... ${term}`);
  const params = new URLSearchParams(searchParams);
  params.set("page", "1");

  if (term) {
    params.set("query", term);
  } else {
    params.delete("query");
  }

  replace(`${pathname}?${params.toString()}`);
}, 300);

Inside the handleSearch function, we use replace to set our new search parameters in our URL.

So whenever we type the query in our input field, it will update our URL.

Let's now add our Search component to our code.

Navigate to the src/app/dashboard/summaries/page.tsx file and update it with the following code.

import Link from "next/link";
import { getSummaries } from "@/data/loaders";
import ReactMarkdown from "react-markdown";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Search } from "@/components/custom/search";

interface LinkCardProps {
  documentId: string;
  title: string;
  summary: string;
}

function LinkCard({ documentId, title, summary }: Readonly<LinkCardProps>) {
  return (
    <Link href={`/dashboard/summaries/${documentId}`}>
      <Card className="relative">
        <CardHeader>
          <CardTitle className="leading-8 text-pink-500">
            {title || "Video Summary"}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ReactMarkdown
            className="card-markdown prose prose-sm max-w-none
              prose-headings:text-gray-900 prose-headings:font-semibold
              prose-p:text-gray-600 prose-p:leading-relaxed
              prose-a:text-pink-500 prose-a:no-underline hover:prose-a:underline
              prose-strong:text-gray-900 prose-strong:font-semibold
              prose-ul:list-disc prose-ul:pl-4
              prose-ol:list-decimal prose-ol:pl-4"
          >
            {summary.slice(0, 164) + " [read more]"}
          </ReactMarkdown>
        </CardContent>
      </Card>
    </Link>
  );
}

interface SearchParamsProps {
  searchParams?: {
    query?: string;
  };
}

export default async function SummariesRoute({
  searchParams,
}: SearchParamsProps) {
  const search = await searchParams;
  const query = search?.query ?? "";
  console.log(query);
  const { data } = await getSummaries();

  if (!data) return null;
  return (
    <div className="grid grid-cols-1 gap-4 p-4">
      <Search />
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {data.map((item: LinkCardProps) => (
          <LinkCard key={item.documentId} {...item} />
        ))}
      </div>
    </div>
  );
}

Excellent. Now that our Search component shows up, let's move on to the second part. We'll pass our query search through our getSummaries function and update it accordingly to allow us to search our queries.

To make the search work, we will rely on the following parameters.

sorting: we will sort all of our summaries in descending order, ensuring that the newest summary appears first.
filters: The filters we will use $or operator to combine our search conditions. This means the search will return summaries based on the fields we will filter using $containsi, which will ignore case sensitivity.

Let's look inside our src/data/loaders.ts file and update the following code inside our getSummaries function.

export async function getSummaries() {
  const url = new URL("/api/summaries", baseUrl);
  return fetchData(url.href);
}

Here are the changes we are going to make.

export async function getSummaries(queryString: string) {
  const query = qs.stringify({
    sort: ["createdAt:desc"],
    filters: {
      $or: [
        { title: { $containsi: queryString } },
        { summary: { $containsi: queryString } },
      ],
    },
  });
  const url = new URL("/api/summaries", baseUrl);
  url.search = query;
  return fetchData(url.href);
}

We will create a query to filter our summaries on the title and summary.

Now, we have one more step before testing our search. Let's navigate back to the src/app/dashboard/summaries folder and make the following changes inside our page.tsx file.

We cannot pass and utilize our query params since we just updated our getSummaries function.

const { data } = await getSummaries(query);

Now, let's see if our search is working.

Great. Now that our search is working, we can simply move forward with our pagination.

How To Handle Pagination In Your Next.js Project

Pagination Basics

Pagination involves dividing content into separate pages and providing users with controls to navigate to the first, last, previous, following, or specific page.

This method improves performance by reducing the amount of data loaded simultaneously. It makes it easier for users to find specific information by browsing through a smaller subset of data.

Let's implement our pagination, but first, let's walk through the code example below, which we will use for our PaginationComponent inside of our Next.js project.

It is based on the Shadcn UI component that you can take a look at here;

So, run the following command to get all the necessary dependencies.

npx shadcn@latest add pagination

And add the following code to your components/custom folder file called pagination-component.tsx.

"use client";
import { FC } from "react";
import { usePathname, useSearchParams, useRouter } from "next/navigation";

import {
  Pagination,
  PaginationContent,
  PaginationItem,
} from "@/components/ui/pagination";

import { Button } from "@/components/ui/button";

interface PaginationProps {
  pageCount: number;
}

interface PaginationArrowProps {
  direction: "left" | "right";
  href: string;
  isDisabled: boolean;
}

const PaginationArrow: FC<PaginationArrowProps> = ({
  direction,
  href,
  isDisabled,
}) => {
  const router = useRouter();
  const isLeft = direction === "left";
  const disabledClassName = isDisabled ? "opacity-50 cursor-not-allowed" : "";

  return (
    <Button
      onClick={() => router.push(href)}
      className={`bg-gray-100 text-gray-500 hover:bg-gray-200 ${disabledClassName}`}
      aria-disabled={isDisabled}
      disabled={isDisabled}
    >
      {isLeft ? "«" : "»"}
    </Button>
  );
};

export function PaginationComponent({ pageCount }: Readonly<PaginationProps>) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentPage = Number(searchParams.get("page")) || 1;

  const createPageURL = (pageNumber: number | string) => {
    const params = new URLSearchParams(searchParams);
    params.set("page", pageNumber.toString());
    return `${pathname}?${params.toString()}`;
  };

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationArrow
            direction="left"
            href={createPageURL(currentPage - 1)}
            isDisabled={currentPage <= 1}
          />
        </PaginationItem>
        <PaginationItem>
          <span className="p-2 font-semibold text-gray-500">
            Page {currentPage}
          </span>
        </PaginationItem>
        <PaginationItem>
          <PaginationArrow
            direction="right"
            href={createPageURL(currentPage + 1)}
            isDisabled={currentPage >= pageCount}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Again, we are using our familiar hooks from before to make this work, usePathname, searchParams, and useRouter in a similar way as we did before.

We are receiving pageCount via props to see our available pages. Inside the PaginationArrow component, we use useRouter to programmatically update our URL via the push method on click.

Let's add this component to our project. In our components/custom folder, create a PaginationComponent.tsx file and paste it into the above code.

Now that we have our component, let's navigate to src/app/dashboard/summaries/page.tsx and import it.

import { PaginationComponent } from "@/components/custom/pagination-component";

Now update our SearchParamsProps interface to the following.

interface SearchParamsProps {
  searchParams?: {
    page?: string;
    query?: string;
  };
}

Now, let's create a currentPage variable to store the current page we get from our URL parameters.

const currentPage = Number(searchParams?.page) || 1;

Now, we can pass our currentPage to our getSummaries function.

const { data } = await getSummaries(query, currentPage);

Now, let's go back to our loaders. tsx file and update the getSummaries with the following code to utilize our pagination.

export async function getSummaries(queryString: string, currentPage: number) {
  const PAGE_SIZE = 4;

  const query = qs.stringify({
    sort: ["createdAt:desc"],
    filters: {
      $or: [
        { title: { $containsi: queryString } },
        { summary: { $containsi: queryString } },
      ],
    },
    pagination: {
      pageSize: PAGE_SIZE,
      page: currentPage,
    },
  });
  const url = new URL("/api/summaries", baseUrl);
  url.search = query;
  return fetchData(url.href);
}

In the above example, we use Strapi's pagination fields and pass pageSize and page fields. You can learn more about Strapi's pagination here;

Now back in our src/app/dashboard/summaries/page.tsx, let's make a few more minor changes before hooking everything up.

If we look at our getSummaries call, we have access to another field that Strapi is returning called meta. Let's make sure we are getting it from our response with the following.

const { data, meta } = await getSummaries(query, currentPage);
console.log(meta);

We will see the following data if we console log our meta field.

{ pagination: { page: 1, pageSize: 4, pageCount: 1, total: 4 } }

Notice that we have our pageCount property. We will use it to tell our PaginationComponent the number of pages we have available.

So, let's extract it from our meta data with the following.

  const pageCount = meta?.pagination?.pageCount;

And finally, let's use our PaginationComponent with the following.

<PaginationComponent pageCount={pageCount} />

The completed code should look like the following.

import Link from "next/link";
import { getSummaries } from "@/data/loaders";
import ReactMarkdown from "react-markdown";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Search } from "@/components/custom/search";
import { PaginationComponent } from "@/components/custom/pagination-component";

interface LinkCardProps {
  documentId: string;
  title: string;
  summary: string;
}

function LinkCard({ documentId, title, summary }: Readonly<LinkCardProps>) {
  return (
    <Link href={`/dashboard/summaries/${documentId}`}>
      <Card className="relative">
        <CardHeader>
          <CardTitle className="leading-8 text-pink-500">
            {title || "Video Summary"}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ReactMarkdown 
            className="card-markdown prose prose-sm max-w-none
              prose-headings:text-gray-900 prose-headings:font-semibold
              prose-p:text-gray-600 prose-p:leading-relaxed
              prose-a:text-pink-500 prose-a:no-underline hover:prose-a:underline
              prose-strong:text-gray-900 prose-strong:font-semibold
              prose-ul:list-disc prose-ul:pl-4
              prose-ol:list-decimal prose-ol:pl-4"
          >
            {summary.slice(0, 164) + " [read more]"}
          </ReactMarkdown>
        </CardContent>
      </Card>
    </Link>
  );
}

interface SearchParamsProps {
  searchParams?: {
    page?: string;
    query?: string;
  };
}


export default async function SummariesRoute({ searchParams }: SearchParamsProps) {
  const search = await searchParams;
  const query = search?.query ?? ""; 
  const currentPage = Number(search?.page) || 1;

  const { data, meta } = await getSummaries(query, currentPage);
  const pageCount = meta?.pagination?.pageCount;

  console.log(meta);  

  if (!data) return null;
  return (
    <div className="grid grid-cols-1 gap-4 p-4">
      <Search />
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {data.map((item: LinkCardProps) => (
          <LinkCard key={item.documentId} {...item} />
        ))}
      </div>
      <PaginationComponent pageCount={pageCount} />
    </div>
  );
}

Now, the moment of truth: Let's see if it works. Make sure you add more summaries since our page size is currently set to 4 items. You need to have at least 5 items.

Excellent, it is working.

Conclusion

This Next.js with Strapi CMS tutorial covered how to implement search and pagination functionalities. Hope you are enjoying this tutorial.

We are almost done. We have two more sections to go, including deploying our project to Strapi Cloud and Vercel.

See you in the next post.

Note about this project

This project has been updated to use Next.js 15 and Strapi 5.

If you have any questions, feel free to stop by at our Discord Community for our daily "open office hours" from 12:30 PM CST to 1:30 PM CST.

If you have a suggestion or find a mistake in the post, please open an issue on the GitHub repository.

You can also find the blog post content in the Strapi Blog.

Feel free to make PRs to fix any issues you find in the project, or let me know if you have any questions.

Happy coding!

Paul

Epic Next.js 15 Tutorial Part 9: Backend Deployment To Strapi Cloud

Paul Bratslavsky — Wed, 13 Nov 2024 08:25:18 +0000

We have completed all the basic features for our YouTube Summarize AI app, which we have been working on. These include full CRUD functionality, authentication, search, pagination, and AI video summarization. If you still need to complete your project, check out our previous posts in this Epic Next.js 14 tutorial series.

This post will cover how to deploy your project to Strapi Cloud.

Why Strapi Cloud

It is the easiest and hassle-free way to deploy your Strapi CMS projects.

Get Everything You Need to Run Strapi in Production

Here are some items you get out of the box using Strapi Headless CMS Cloud that you don't have to set up yourself.

CDN (Content Delivery Network)—This helps deliver content to users more efficiently by caching content on servers located closer to the user.
Database - Strapi Cloud includes a database for storing and managing the application data.
Email - Strapi Cloud provides email functionality, allowing users to send emails from their applications.
File Storage - Strapi Cloud includes file storage capabilities, allowing users to store and manage files associated with their applications.

You also can access real-time logs, share and collaborate on your project with others, and use many other features. you can learn more about Strapi Cloud here

Currently, Strapi Cloud is a paid feature, but you can try it out for FREE for 14 days (no credit card required). The goal is to eventually have a free-tier. However, since we are an open-source company, Strapi Headless CMS is free for anyone to use. When we started Strapi Cloud last year, we targeted small organizations with our $99 offering; we now offer a developer plan at $29 per month, which includes all the features mentioned above.

There are many ways to host your Strapi CMS project, and we encourage you to use the best option available. In the future, I will create another blog post covering Strapi backend deployment to Render. The caveat is that when using your own hosting solution, you will be responsible for setting up your own database, file storage, and anything else that is required.

But today, we will take the hassle-free approach and use Strapi Cloud, which offers a FREE 14-day trial.

Preparing Our Project For Deployment

To deploy your project, you just need a GitHub repo with your project. Since you followed this tutorial, you should be ready to go.

Here is the repo of my project.

Let's get started.

Creating Your Strapi Account

We will start by creating a Strapi Cloud Account. You will use your GitHub account to sign in. To do so, navigate to the Strapi Cloud Login.

You are going to choose GitHub as your login method.

Once you click on the link, you will see the following screen. Click the Authorize Strapi Cloud button.

Now that you have your account, create your first project!

Create Your First Strapi Project

You should be greeted with the following page. Let's click the Create Project button.

You will be greeted with the following screen to give Strapi Cloud a try. Notice that you do not have to provide your credit card.

Click the Create my project button to continue.

Now, import your project via GitHub. Click on the button and follow the steps.

Once you authorize GitHub, you should see the following page. If not, you may need to refresh your browser.

Notice I chose my GitHub account PaulBratslavsky and pointed to my repository strapi-5-next-14-project-deploy.

Let's continue by completing the steps in the Setup section.

I will give my project a Display Name, point to my main branch, and select New York as my region.

Afterward, we will click on the Show advanced settings button. Since our frontend and backend are in the same repo, we need to point to our Strapi CMS project in the /backend folder.

I will keep the default node version, and since we don't have any environment variables, I will click on the Create project button.

You should see the following screen.

As the process continues, you will be redirected to the following page, where you should see the real-time logs for your deployment process.

Once your project finishes deploying, you should see the following screen. You can continue your project by clicking the Visit app button.

If you get the This site can't provide a secure connection message, you have to give it a moment to allow all the changes to propagate.

Once the process is finished, you will be greeted with the Create Admin user screen.

Go ahead and create your first user. Once you have done so, you will be greeted with the Strapi dashboard screen.

Congratulations, you have deployed your very first Strapi project.

How To Transfer Our Local Data To Our Cloud Instance

As a bonus, let's examine how we can transfer local Strapi data to seed our new cloud instance.

Let's start by logging into Strapi cloud, going to our deployed application, and logging in.

In your Strapi admin panel, click on the Visit App button. This will take you to your deployed app.

Enter your credentials to log in.

Navigate to Settings => Transfer Tokens and click the Add new Transfer Token button.

Fill it the following options.

Name: Transfer
Description: Transfer Token
Token duration: 7 days
Token type Full Access

And finally, click the Save button.

You should now see your generated token.

To transfer our data, we will use the Strapi CLI Transfer command.

Ensure you are in your backend folder and run the following command to see all the helpful options.

yarn strapi help transfer

You should see the following output.

$ strapi help transfer
Usage: strapi transfer [options]

Transfer data from one source to another

Options:
  --from <sourceURL>                      URL of the remote Strapi instance to get data from
  --from-token <token>                    Transfer token for the remote Strapi source
  --to <destinationURL>                   URL of the remote Strapi instance to send data to
  --to-token <token>                      Transfer token for the remote Strapi destination
  --force                                 Automatically answer "yes" to all prompts, including
                                          potentially destructive requests, and run
                                          non-interactively.
  --exclude <comma-separated data types>  Exclude data using comma-separated types. Available types:
                                          content,files,config
  --only <command-separated data types>   Include only these types of data (plus schemas). Available
                                          types: content,files,config
  -h, --help                              display help for command
✨  Done in 2.16s.
➜  backend git:(main)

We will use the transfer --to command to point to our Strapi cloud instance.

In my case, it is https://clever-dawn-ec1866942d.strapiapp.com/admin Notice I am including the admin portion of the url.

To start the transfer, I will type the following in my terminal: You will need to use your URL and Token, which we just generated.

yarn strapi transfer --to https://clever-dawn-ec1866942d.strapiapp.com/admin

Then press enter, and it will prompt you for the token that we generated just a minute ago.

? Please enter your transfer token for the remote Strapi destination [input is hidden]

Paste it in and press enter to continue.

You will see the following message if you don't have Strapi Enterprise.

? There are differences in schema between the source and destination, and the data listed above will be lost. Are you sure you want to continue? (y/N)

You will see the following message, so click y' andenter` to continue.

bash The transfer will delete existing data from the remote Strapi! Are you sure you want to proceed? (y/N)

You will see the following warning regarding Review Workflows. ' This is perfectly normal. Press y' and enter to continue.

You should see a similar output.

bash Starting transfer... ✔ entities: 46 transfered (size: 58.2 KB) (elapsed: 985 ms) ✔ assets: 15 transfered (size: 9.6 MB) (elapsed: 9698 ms) ✔ links: 74 transfered (size: 15.3 KB) (elapsed: 481 ms) ✔ configuration: 36 transfered (size: 108.9 KB) (elapsed: 414 ms) ┌─────────────────────────────────────────┬───────┬───────────────┐ │ Type │ Count │ Size │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ entities │ 46 │ 58.2 KB │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ -- api::global.global │ 2 │ ( 1.5 KB) │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ -- api::home-page.home-page │ 2 │ ( 1.9 KB) │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ -- api::summary.summary │ 12 │ ( 41.8 KB) │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ -- plugin::i18n.locale │ 1 │ ( 253 B ) │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ -- plugin::upload.file │ 3 │ ( 4.9 KB) │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ -- plugin::upload.folder │ 1 │ ( 265 B ) │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ -- plugin::users-permissions.permission │ 21 │ ( 5.8 KB) │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ -- plugin::users-permissions.role │ 2 │ ( 656 B ) │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ -- plugin::users-permissions.user │ 2 │ ( 1 KB) │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ assets │ 15 │ 9.6 MB │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ -- .jpg │ 15 │ ( 9.6 MB) │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ links │ 74 │ 15.3 KB │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ configuration │ 36 │ 108.9 KB │ ├─────────────────────────────────────────┼───────┼───────────────┤ │ Total │ 171 │ 9.8 MB │ └─────────────────────────────────────────┴───────┴───────────────┘ Transfer process has been completed successfully! ✨ Done in 22.50s.

Once you finish, go back into your Strapi Project, which we deployed in the cloud, hit refresh, and you should now see your data.

We will keep this open because we need our project's url and token for the next step.

Nice. We just seeded our initial data into our Cloud App.

In the next blog post, we will deploy our front end to Vercel and connect both projects.

We are on our final stretch. See you in the next post.

Note about this project

This project has been updated to use Next.js 15 and Strapi 5.

If you have any questions, feel free to stop by at our Discord Community for our daily "open office hours" from 12:30 PM CST to 1:30 PM CST.

If you have a suggestion or find a mistake in the post, please open an issue on the GitHub repository.

You can also find the blog post content in the Strapi Blog.

Feel free to make PRs to fix any issues you find in the project, or let me know if you have any questions.

Happy coding!

Paul

Epic Next.js 15 Tutorial Part 10: Frontend Deployment To Vercel

Paul Bratslavsky — Wed, 13 Nov 2024 08:21:05 +0000

In this final post, we will look at how to deploy our Next.js project to Vercel.

In the last post, we covered how to deploy our backend to Strapi Cloud and seed it with initial data.

If you missed the previous post, you can find them in the following links.

Let's Create a Vercel Account.

If you don't have a Vercel account, let's go and create one.

Navigate to the following link here and click the "Sign Up" button to get started.

Now, complete the steps to create your account. I will choose the hobby plan and sign up using my GitHub account.

Now that we have created our Vercel account, let's prepare our frontend for deployment.

Preparing Our Project For Deployment

First things first, let's navigate to our Strapi Cloud deployed project and get the URL where our project is hosted.

Navigate to Strapi Cloud

You can get to your dashboard with the following link.

Once logged in to Strapi Cloud, navigate to your Project > Setting > Domains to see the domain in which your project is hosted.

Go ahead and copy it.

Before deploying your project, we will test it by pointing our local frontend to our deployed backend.

So on your local computer, navigate your projects, find your .env.local file, and add the following variable.

  STRAPI_URL=add_your_strapi_domain_here

Warning: This is not something you should do. But I just wanted to show you a common error that you may encounter if not properly configuring your image hostname. Afterwards we will revert out project to using our local dev database.

Now, we have to make a small change to our application. Originally I set up the NEXT_PUBLIC_STRAPI_URL environmental variable.

Prepending NEXT_PUBLIC_ to an environmental variable will make it available on the client side. This would be fine in our project since our Strapi URL is public.

But since we only use it on the server side, we will rename it STRAPI_URL.

You can learn more about Next.js environmental variables here.

Navigate to the src/lib/utils.ts file, and let's update our getStrapiUrl function from this:

export function getStrapiURL() {
  return process.env.NEXT_PUBLIC_STRAPI_URL ?? "http://localhost:1337";
}

To this:

export function getStrapiURL() {
  return process.env.STRAPI_URL ?? "http://localhost:1337";
}

Now let's run the following command to test our project locally.

yarn dev

➜  frontend git:(main) ✗ yarn dev
 ▲ Next.js 14.2.14
  - Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 1548ms

When you navigate the front end of your project, you will see the following error. This is normal since we did not set up our hostname for our images inside the next.config.ts file.

 ⨯ node_modules/next/dist/shared/lib/image-loader.js (41:26) @ defaultLoader
 ⨯ Error: Invalid src prop (https://timely-joy-94aadb93be.media.strapiapp.com/ee53b3ce_4520_45da_a243_6c83f88de744_e9d2a1dc41.png) on `next/image`, hostname "timely-joy-94aadb93be.media.strapiapp.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
    at Array.map (<anonymous>)

You should see the URL in the error message.

Fix and Configure Images

So, let's fix this.

Navigate to your next.config.js file and make the following changes inside the remotePatterns array.

  {
    protocol: "https",
    hostname: "timely-joy-94aadb93be.media.strapiapp.com",
  }

Important: Ensure you use the Strapi media-hosted URL you saw in your error message.

It will be your project URL appended by .media.strapiapp.com. I just used mine for this example. But you will need to replace it with yours. Now restart your Next.js frontend project, and everything should work.

Let's log in and create one summary as a test.

Excellent, it worked locally. Now, navigate to your Strapi CMS Admin on Strapi Cloud. You should see the newly created summary in your deployed Strapi project.

Building Project Locally

As a final test, I like to build my project locally and ensure we don't get any typescript errors or messages.

In your terminal, run the following command.

yarn build

You should see the following output.

├ ƒ /api/summarize                       0 B                0 B
├ ƒ /dashboard                           150 B          87.4 kB
├ ƒ /dashboard/account                   2.24 kB         105 kB
├ ƒ /dashboard/summaries                 4.46 kB         106 kB
├ ƒ /dashboard/summaries/[videoId]       3.98 kB        98.7 kB
├ ƒ /signin                              1.25 kB         106 kB
└ ƒ /signup                              1.27 kB         106 kB
+ First Load JS shared by all            87.2 kB
  ├ chunks/117-e30e64eaefb76137.js       31.6 kB
  ├ chunks/fd9d1056-cb7ae059b8c2ee28.js  53.6 kB
  └ other shared chunks (total)          1.99 kB


ƒ Middleware                             41.4 kB

ƒ  (Dynamic)  server-rendered on demand

✨  Done in 12.45s.

Great, no errors, we are ready for our final deployment.

So, let's first remove the following line in our .env.local file that pointed to our Strapi Cloud production app.

STRAPI_URL=https://timely-joy-94aadb93be.strapiapp.com

I just did it to show the error you would get if you did not set up your hostname for the images inside the next.config.js file.

Moving forward, your local project should only point to your local development database. And never to production.

Finally, go ahead and save your latest changes to GitHub by doing the following command.

git add .
git commit -m "final update before Vercel deployment"
git push -u origin main

Now that all of our updates have been pushed. Let's deploy our Next.js project to Vercel!

Deploying Our Next.js Project To Vercel

Let's navigate back to our Vercel admin page. You should see the following page.

Use Next.js Framework as Preset

Go ahead and add your GitHub and point to your project repository.

Let's set up our project to use the Next.js as the framework preset and Root Directory to point to our project in the frontend folder.

Setup Environment Variable

Finally, let's set up our environmental variable.

We will need to add the following environmental variables.

HOST=will_need_to_replace_after_initial_deploy
NODE_ENV=production
STRAPI_URL=your_deployed_strapi_app_url
OPENAI_API_KEY=your_open_ai_api_key

We need the HOST and NODE_ENV because our configuration will require them for our set and get cookies function, which is found in the auth-actions.ts file.

You should see the following config object.

const config = {
  maxAge: 60 * 60 * 24 * 7, // 1 week
  path: "/",
  domain: process.env.HOST ?? "localhost",
  httpOnly: true,
  secure: process.env.NODE_ENV === "production",
};

Double-check your code in the auth-actions.ts file to ensure that the config object is passed in all of our cookies().set() functions.

The completed code for the auth-actions.ts file can be found below.

"use server";
import { z } from "zod";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

import {
  registerUserService,
  loginUserService,
} from "@/data/services/auth-service";

const config = {
  maxAge: 60 * 60 * 24 * 7, // 1 week
  path: "/",
  domain: process.env.HOST ?? "localhost",
  httpOnly: true,
  secure: process.env.NODE_ENV === "production",
};

const schemaRegister = z.object({
  username: z.string().min(3).max(20, {
    message: "Username must be between 3 and 20 characters",
  }),
  password: z.string().min(6).max(100, {
    message: "Password must be between 6 and 100 characters",
  }),
  email: z.string().email({
    message: "Please enter a valid email address",
  }),
});

export async function registerUserAction(prevState: any, formData: FormData) {
  const validatedFields = schemaRegister.safeParse({
    username: formData.get("username"),
    password: formData.get("password"),
    email: formData.get("email"),
  });

  if (!validatedFields.success) {
    return {
      ...prevState,
      zodErrors: validatedFields.error.flatten().fieldErrors,
      strapiErrors: null,
      message: "Missing Fields. Failed to Register.",
    };
  }

  const responseData = await registerUserService(validatedFields.data);

  if (!responseData) {
    return {
      ...prevState,
      strapiErrors: null,
      zodErrors: null,
      message: "Ops! Something went wrong. Please try again.",
    };
  }

  if (responseData.error) {
    return {
      ...prevState,
      strapiErrors: responseData.error,
      zodErrors: null,
      message: "Failed to Register.",
    };
  }

  cookies().set("jwt", responseData.jwt, config);
  redirect("/dashboard");
}

const schemaLogin = z.object({
  identifier: z
    .string()
    .min(3, {
      message: "Identifier must have at least 3 or more characters",
    })
    .max(20, {
      message: "Please enter a valid username or email address",
    }),
  password: z
    .string()
    .min(6, {
      message: "Password must have at least 6 or more characters",
    })
    .max(100, {
      message: "Password must be between 6 and 100 characters",
    }),
});

export async function loginUserAction(prevState: any, formData: FormData) {
  const validatedFields = schemaLogin.safeParse({
    identifier: formData.get("identifier"),
    password: formData.get("password"),
  });

  if (!validatedFields.success) {
    return {
      ...prevState,
      zodErrors: validatedFields.error.flatten().fieldErrors,
      message: "Missing Fields. Failed to Login.",
    };
  }

  const responseData = await loginUserService(validatedFields.data);

  if (!responseData) {
    return {
      ...prevState,
      strapiErrors: responseData.error,
      zodErrors: null,
      message: "Ops! Something went wrong. Please try again.",
    };
  }

  if (responseData.error) {
    return {
      ...prevState,
      strapiErrors: responseData.error,
      zodErrors: null,
      message: "Failed to Login.",
    };
  }

  cookies().set("jwt", responseData.jwt, config);
  redirect("/dashboard");
}

export async function logoutAction() {
  cookies().set("jwt", "", { ...config, maxAge: 0 });
  redirect("/");
}

After you add the following environmental variable, you can click the deploy button to deploy your project.

Once the initial deployment is finished, let's copy the deployed URL and use it to set our HOST environmental variable, which is required for our cookies to be set properly.

Once you update the environment variable and redeploy, you should be able to log in and see your secure httpOnly cookies being set.

In this tutorial, we focused on the basic implementation of setting httpOnly cookies. Check out this awesome in-depth video by Lee Robinson on the topic.

Dealing With Function Invocation Timeout

When building your Next.js application, keep this in mind. Different environments come with different caveats.

In our case, our summarize function takes more than 10 seconds to summarize a video. If you are using a hobby plan, this will trigger the FUNCTION_INVOCATION_TIMEOUT error.

This may have many causes; you can read more about it here. But in my case, it was because, on a hobby plan, you only get 10s execution time for functions.

I decided to go with the most straightforward solution before exploring other options.

Upgrading to the PRO plan gives you the ability to increase function execution time up to 300 seconds. You can find all the details here.

After upgrading to the pro plan, I could increase the runtime limit in my app with the following change in the src/app/api/summarize/route.ts file.

export const maxDuration = 150;
export const dynamic = "force-dynamic";

The completed file looks like the following.

import { NextRequest } from "next/server";

import { ChatOpenAI } from "@langchain/openai";
import { PromptTemplate } from "@langchain/core/prompts";
import { StringOutputParser } from "@langchain/core/output_parsers";

import { fetchTranscript } from "@/lib/youtube-transcript";
import { getUserMeLoader } from "@/data/services/get-user-me-loader";
import { getAuthToken } from "@/data/services/get-token";

export const maxDuration = 150;
export const dynamic = "force-dynamic";

function transformData(data: any[]) {
  let text = "";

  data.forEach((item) => {
    text += item.text + " ";
  });

  return {
    data: data,
    text: text.trim(),
  };
}

const TEMPLATE = `
INSTRUCTIONS: 
  For the this {text} complete the following steps.
  Generate the title based on the content provided
  Summarize the following content and include 5 key topics, writing in first person using normal tone of voice.

  Write a youtube video description
    - Include heading and sections.  
    - Incorporate keywords and key takeaways

  Generate bulleted list of key points and benefits

  Return possible and best recommended key words
`;

async function generateSummary(content: string, template: string) {
  const prompt = PromptTemplate.fromTemplate(template);

  const model = new ChatOpenAI({
    openAIApiKey: process.env.OPENAI_API_KEY,
    modelName: process.env.OPENAI_MODEL ?? "gpt-4-turbo-preview",
    temperature: process.env.OPENAI_TEMPERATURE
      ? parseFloat(process.env.OPENAI_TEMPERATURE)
      : 0.7,
    maxTokens: process.env.OPENAI_MAX_TOKENS
      ? parseInt(process.env.OPENAI_MAX_TOKENS)
      : 4000,
  });

  const outputParser = new StringOutputParser();
  const chain = prompt.pipe(model).pipe(outputParser);

  try {
    const summary = await chain.invoke({ text: content });
    return summary;
  } catch (error) {
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error.message }));
    return new Response(
      JSON.stringify({ error: "Failed to generate summary." })
    );
  }
}

export async function POST(req: NextRequest) {
  console.log("FROM OUR ROUTE HANDLER:", req.body);

  const user = await getUserMeLoader();
  const token = await getAuthToken();

  if (!user.ok || !token)
    return new Response(
      JSON.stringify({ data: null, error: "Not authenticated" }),
      { status: 401 }
    );

  if (user.data.credits < 1)
    return new Response(
      JSON.stringify({
        data: null,
        error: "Insufficient credits",
      }),
      { status: 402 }
    );

  const body = await req.json();
  const { videoId } = body;

  let transcript: Awaited<ReturnType<typeof fetchTranscript>>;

  try {
    transcript = await fetchTranscript(videoId);

    const transformedData = transformData(transcript);
    console.log("Transcript:", transformedData.text);

    let summary: Awaited<ReturnType<typeof generateSummary>>;

    summary = await generateSummary(transformedData.text, TEMPLATE);
    console.log("Summary:", summary);
    return new Response(JSON.stringify({ data: summary, error: null }));
  } catch (error) {
    console.error("Error processing request:", error);
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error }));
    return new Response(JSON.stringify({ error: "Unknown error" }));
  }
}

Once you make the change, save your changes to GitHub and redeploy.

Let's try this again.

This brings me to my final thoughts.

When building an application, it is essential to consider your use case and limitations and plan your project accordingly.

One thing to consider is refactoring the application to use streaming. This is one way to get past the time limit limitation, and I will challenge you to explore it.

You can start here. Next.js also has an AI SDK that simplifies working with AI and LLMs. You can learn more about it here.

Conclusion

It may seem like the end of the blog series, but it is just the beginning. We learned how to build a complete CRUD Next.js application with authentication and file upload functionality. We explored how to utilize Strapi CMS to manage our content and users.

You know, have a great starting point to continue building and adding new features. We also deployed our project to Strapi Cloud and Vercel. We could have taken many other approaches. For instance, we could have moved all the summarization logic into Strapi as a plugin. We could also use a queuing system to handle long-executing tasks and return them as they are done rather than waiting for them.

But with that being said, thank you so much for your time. This tutorial/video series took me a long time to make, and I hope you had fun following along. Also, if you spot any mistakes or have questions, please leave them in the comments, and I will update the blog post accordingly.

Even though this is the end of this series, as I discover new cool things around Next.js and Strapi, I will create follow-up content and updates. Also, I will move this repo to Strapi's GitHub. It will be open-source, so anyone can help us improve or use it as a starting point for a new project. I will add the link here once I am done.

Note about this project

This project has been updated to use Next.js 15 and Strapi 5.

If you have any questions, feel free to stop by at our Discord Community for our daily "open office hours" from 12:30 PM CST to 1:30 PM CST.

If you have a suggestion or find a mistake in the post, please open an issue on the GitHub repository.

You can also find the blog post content in the Strapi Blog.

Feel free to make PRs to fix any issues you find in the project, or let me know if you have any questions.

Happy coding!

Paul

How To Migrate Your Project From Strapi 4 to Strapi 5

Paul Bratslavsky — Thu, 03 Oct 2024 22:22:33 +0000

Migrating from Strapi v4 to v5 can seem daunting, but it becomes a manageable process with the right approach and tools.

In this blog post, I will explain how I migrated the Strapi Corporate Starter website from Strapi v4 to v5.

If you want to follow along, you can find the original project here. The completed code is in this branch.

We'll cover how to use Strapi's upgrade tool to take us most of the way.

Additionally, we'll look at how to update your frontend to be compatible with Strapi v5, ensuring that your project transitions smoothly to this latest version.

Note: migrations are not a one-step solution; since every project is different, your project may require additional steps based on the level of custom code you may have written in your backend.

Let's jump into the migration process.

Prerequisites

Before we begin, ensure you have the following prerequisites:

A Strapi v4 project running on your local machine.
Node.js v18.0.0 or later installed on your machine.
Git installed on your machine.

This guide will walk you through the steps of migrating our corporate starter website from Strapi V4 to V5.

You can learn more about the Strapi v5 upgrade guide here.

To help us accomplish this, we will use our codemods update tool, which will do the majority of the heavy lifting for us.

But before we do that, we need to make sure we have the following:

Prepare your project for migration by backing up your code and database.
Update your current Strapi version to the latest v4 release.
Remove deprecated plugins not yet compatible with Strapi v5.

I have a Strapi v4 project running using SQLite database in my local environment.

I will start by exporting my data via our DTS export tool so I have a backup.

You can also make a backup of your actual sqlite database file.

You will need to back up your database if you are using a different database.

In the strapi v4 root directory, I will run the following command to create my backup file:

yarn strapi export --no-encrypt -f ../backup

This will go ahead and export my data.

$ strapi export --no-encrypt -f ../backup
Starting export...
✔ schemas: 55 transfered (size: 42.1 KB) (elapsed: 4 ms)
✔ entities: 62 transfered (size: 52.6 KB) (elapsed: 16 ms)
✔ assets: 75 transfered (size: 28.7 MB) (elapsed: 655 ms)
✔ links: 78 transfered (size: 14.6 KB) (elapsed: 5 ms)
✔ configuration: 66 transfered (size: 139.7 KB) (elapsed: 2 ms)
┌─────────────────────────────────────────┬───────┬───────────────┐
│ Type                                    │ Count │ Size          │
├─────────────────────────────────────────┼───────┼───────────────┤
│ schemas                                 │    55 │      42.1 KB  │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- component                            │    33 │ (    13.6 KB) │
├──────────────────────────────���──────────┼───────┼───────────────┤
│ -- contentType                          │    22 │ (    28.5 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ entities                                │    62 │      52.6 KB  │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- api::article.article                 │     7 │ (    21.3 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- api::author.author                   │     2 │ (     333 B ) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- api::category.category               │     3 │ (     604 B ) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- api::global.global                   │     1 │ (     1.4 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- api::page.page                       │     2 │ (     3.3 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- api::product-feature.product-feature │     5 │ (       1 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- plugin::i18n.locale                  │     1 │ (     158 B ) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- plugin::upload.file                  │    22 │ (    20.8 KB) │
├─────────��───────────────────────────────┼───────┼───────────────┤
│ -- plugin::users-permissions.permission │    16 │ (       3 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- plugin::users-permissions.role       │     3 │ (     677 B ) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ assets                                  │    75 │      28.7 MB  │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- .ico                                 │     1 │ (      15 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- .jpg                                 │    52 │ (      23 MB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- .png                                 │    18 │ (     5.7 MB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- .svg                                 │     4 │ (    17.7 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ links                                   │    78 │      14.6 KB  │
├─────────────────────────────────────────┼───────┼───────────────┤
│ configuration                           │    66 │     139.7 KB  │
├─────────────────────────────────────────┼───────┼───────────────┤
│ Total                                   │   336 │        29 MB  │
└─────────────────────────────────────────┴───────┴───────────────┘
Export archive is in ../backup.tar.gz
Export process has been completed successfully!
✨  Done in 2.86s.

Now that I have a backup of my data, I can remove any deprecated plugins that are not yet compatible with Strapi v5.

In this case, I am using the following plugins:

@strapi/plugin-seo

I will remove the plugin from the package.json file.

And the reference to the plugin in the config/plugins.ts file.

Finally, in the package.json file, I will update all the references to 4.25.6 to the following 4.25.12, the latest Strapi v4 version when I started this migration.

My updated package.json file looks like this:

{
  "name": "corporate-blog-template",
  "private": true,
  "version": "0.1.0",
  "description": "A Strapi application",
  "scripts": {
    "develop": "strapi develop",
    "start": "strapi start",
    "build": "strapi build",
    "strapi": "strapi"
  },
  "devDependencies": {},
  "dependencies": {
    "@strapi/plugin-cloud": "4.25.12",
    "@strapi/plugin-i18n": "4.25.12",
    "@strapi/plugin-users-permissions": "4.25.12",
    "@strapi/strapi": "4.25.12",
    "better-sqlite3": "8.6.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "5.3.4",
    "styled-components": "5.3.3"
  },
  "author": {
    "name": "A Strapi developer"
  },
  "strapi": {
    "uuid": "0f95dc7c-202b-4ab2-a874-3799d23b1640"
  },
  "engines": {
    "node": ">=18.0.0 <=20.x.x",
    "npm": ">=6.0.0"
  },
  "license": "MIT"
}

I will remove the yarn.lock file and the node_modules directory.

rm -rf yarn.lock
rm -rf node_modules

And finally, run the yarn command to update our project to the latest Strapi v4 version.

Once your app is updated, run yarn develop to ensure everything works correctly.

Once everything works correctly, we can first focus on migrating our backend.

But before we do, make sure you commit and save all your changes.

Using Codemods To Update Strapi V4 To V5

We will start the process by running the following command at the root of our Strapi project:

  npx @strapi/upgrade major

The codemod will show you the changes it will make to your project.

 backend git:(strapi-5-update-process) npx @strapi/upgrade major
[WARN]  [2024-09-25T16:08:24.314Z] Please make sure you've created a backup of your codebase and files before upgrading
[INFO]  [2024-09-25T16:08:24.977Z] Upgrading from v4.25.12 to v5.0.0
[INFO]  [2024-09-25T16:08:24.979Z] (1/4) Checking requirement...
[INFO]  [2024-09-25T16:08:25.026Z] (2/4) Applying the latest code modifications...
┌────┬─────────┬──────┬────────────────────────────────────────┬──────────┬───────────┬─────────────────────┐
│ N° │ Version │ Kind │ Name                                   │ Affected │ Unchanged │ Duration            │
├────┼─────────┼──────┼────────────────────────────────────────┼──────────┼───────────┼─────────────────────┤
│ 0  │ 5.0.0   │ code │ comment out lifecycle files            │ 0        │ 31        │ 0.440s (cold start) │
│ 1  │ 5.0.0   │ json │ dependency remove strapi plugin i18n   │ 1        │ 40        │ 0.358s              │
│ 2  │ 5.0.0   │ json │ dependency upgrade react and react dom │ 0        │ 41        │ 0.037s              │
│ 3  │ 5.0.0   │ json │ dependency upgrade react router dom    │ 1        │ 40        │ 0.019s              │
│ 4  │ 5.0.0   │ json │ dependency upgrade styled components   │ 1        │ 40        │ 0.019s              │
│ 5  │ 5.0.0   │ code │ deprecate helper plugin                │ 0        │ 31        │ 0.174s              │
│ 6  │ 5.0.0   │ code │ entity service document service        │ 0        │ 31        │ 0.041s              │
│ 7  │ 5.0.0   │ code │ s3 keys wrapped in credentials         │ 0        │ 31        │ 0.018s              │
│ 8  │ 5.0.0   │ json │ sqlite3 to better sqlite3              │ 0        │ 41        │ 0.008s              │
│ 9  │ 5.0.0   │ code │ strapi public interface                │ 0        │ 31        │ 0.027s              │
│ 10 │ 5.0.0   │ code │ use uid for config namespace           │ 0        │ 31        │ 0.034s              │
│ 11 │ 5.0.0   │ code │ utils public interface                 │ 0        │ 31        │ 0.072s              │
└────┴─────────┴──────┴────────────────────────────────────────┴──────────┴───────────┴─────────────────────┘
[INFO]  [2024-09-25T16:08:26.325Z] (3/4) Upgrading Strapi dependencies...
[INFO]  [2024-09-25T16:08:26.326Z] (4/4) Installing dependencies...

Depending if you have any custom code, if the codemod is not able to update your code, it will add __TODO__ comments in the code that you will need to update manually.

In our case, it was pretty straightforward.

Once the codemod is done and all the new dependencies are installed, we can start our project.

yarn develop

You will see the following output in the console:

Now open your browser, navigate to http://localhost:1337/admin, and log in to your admin panel.

You can go to the Settings tab and confirm that you are running Strapi v5.

Finally, we can go ahead and take a look at our Content Manager page, click on the Articles type, and see that our articles are still there.

Nice!

Now, before we migrate our front end, I want to make sure that our back end is working correctly.

Let's make a post request to get the data to our Home Page and see if we get the correct response.

We will make a get request to the following endpoint:

http://localhost:1337/api/pages?filters[slug][$eq]=home

We are filtering by the slug home because we only want to get the data for our home page with that slug.

But we will get the following error.

page-populate-middleware.js: ctx.query =  {
  populate: {
    contentSections: { populate: [Object] },
    seo: { fields: [Array], populate: [Object] }
  },
  filters: { slug: { '$eq': 'home' } }
}
[2024-09-25 11:25:02.906] error: Invalid nested populate for page.contentSections (api::page.page). Expected a fragment ("on")

In our project, I use a custom middleware to populate the data in the backend.

And the query that we used is using Strapi v4 syntax.

If we navigate to the src/page/middlewares/page-populate-middleware.js file in our Strapi project, we can see that the query is using the following syntax:

const populate = {
  contentSections: {
    populate: {
      picture: {
        fields: ["url", "alternativeText", "caption", "width", "height"],
      },
      buttons: {
        populate: true,
      },
      feature: {
        populate: {
          fields: ["title", "description", "showLink", "newTab", "url", "text"],
          media: {
            fields: ["url", "alternativeText", "caption", "width", "height"],
          },
        },
      },
      testimonials: {
        populate: {
          picture: {
            fields: ["url", "alternativeText", "caption", "width", "height"],
          },
        },
      },
      plans: {
        populate: ["product_features"],
      },
      submitButton: {
        populate: true,
      },
    },
  },
  seo: {
    fields: ["metaTitle", "metaDescription"],
    populate: { shareImage: true },
  },
};

We must update it to use the on flag to populate our dynamic zone fields.

You can learn more about this in our documentation here.

So, let's go ahead and update the query to use Strapi v5 syntax with the following code:

const populate = {
  contentSections: {
    on: {
      "sections.hero": {
        populate: "*",
      },
      "sections.features": {
        populate: "*",
      },
      "sections.bottom-actions": {
        populate: "*",
      },
      "sections.feature-columns-group": {
        populate: "*",
      },
      "sections.feature-rows-group": {
        populate: "*",
      },
      "sections.testimonials-group": {
        populate: {
          testimonials: {
            populate: "*",
          },
        },
      },
      "sections.large-video": {
        populate: "*",
      },
      "sections.rich-text": {
        populate: "*",
      },
      "sections.pricing": {
        populate: {
          plans: {
            populate: "*",
          },
        },
      },
      "sections.lead-form": {
        populate: "*",
      },
      "sections.heading": {
        populate: "*",
      },
    },
  },
  seo: {
    populate: "*",
  },
};

You can see that we are using the on flag to populate our dynamic zone fields.

I am using the * to populate all the fields for each section that will populate one level deep.

But you can learn more about the on flag here.

We should get a successful response with the following data:

{
  "data": [
    {
      "id": 7,
      "shortName": "Home Page",
      "slug": "home",
      "heading": "Home Page",
      "description": "This is the home page",
      "contentSections": [
        {
          "__component": "sections.hero",
          "title": "Strapi [Starter] with Next JS",
          "description": "This is build with [Strapi] and [Next] JS. A match made in heaven.",
          "picture": {
            "url": "/uploads/undraw_woman_ffrd_b3ac24fb06.svg"
          },
          "buttons": [
            {
              "url": "https://discord.com/invite/strapi",
              "text": "Discord",
              "type": "secondary"
            },
            {
              "url": "https://strapi.io/events",
              "text": "Events",
              "type": "primary"
            }
          ]
        },
        {
          "__component": "sections.features",
          "heading": "Features",
          "description": "Welcome to Strapi Starter",
          "feature": [
            {
              "title": "Discover Next.js",
              "description": "The React Framework for Production: Explore the future of web development with Next.js, the cutting-edge React framework.",
              "url": "https://vercel.com/",
              "text": "Learn more"
            },
            {
              "title": "Strapi",
              "description": "Unleash the power of Strapi, the leading open-source headless CMS that lets you create, manage, and distribute your content across multiple platforms.",
              "url": "https://strapi.io",
              "text": "Learn more"
            },
            {
              "title": "Cloud",
              "description": "Simplify your content management experience with Strapi Cloud, the fully-managed hosting solution for your Strapi projects.",
              "url": "https://strapi.io/cloud",
              "text": "Learn more"
            }
          ]
        },
        {
          "__component": "sections.pricing",
          "title": "Our Plans",
          "plans": [
            {
              "name": "Free",
              "description": "Features",
              "price": 0,
              "pricePeriod": "Monthly",
              "product_features": [
                { "name": "Example Feature 1" },
                { "name": "Example Feature 2" },
                { "name": "Example Feature 3" }
              ]
            },
            {
              "name": "Pro",
              "description": "Features",
              "price": 9.99,
              "pricePeriod": "monthly",
              "product_features": [
                { "name": "Example Feature 1" },
                { "name": "Example Feature 2" },
                { "name": "Example Feature 3" },
                { "name": "Example Feature 4" }
              ]
            },
            {
              "name": "Enterprise ",
              "description": "Features",
              "price": 19.99,
              "pricePeriod": "monthly",
              "product_features": [
                { "name": "Example Feature 1" },
                { "name": "Example Feature 2" },
                { "name": "Example Feature 3" },
                { "name": "Example Feature 4" },
                { "name": "Example Feature 5" }
              ]
            }
          ]
        },
        {
          "__component": "sections.testimonials-group",
          "title": "Testimonials",
          "description": "Hello",
          "testimonials": [
            {
              "text": "ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
              "authorName": "Paul Brats",
              "picture": {
                "url": "/uploads/paul_brats_012832af74.jpg"
              }
            },
            {
              "text": "ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
              "authorName": "Kit Kat",
              "picture": {
                "url": "/uploads/kit_kat_96feba6636.png"
              }
            }
          ]
        },
        {
          "__component": "sections.lead-form",
          "title": "Join our community.",
          "emailPlaceholder": "Enter your email",
          "location": "main page",
          "description": "Doloribus consectetur quasi ipsa quo neque culpa blanditiis ducimus recusandae a veritatis optio cumque, in harum ad nam!",
          "submitButton": {
            "text": "Submit",
            "type": "primary"
          }
        }
      ],
      "seo": {
        "metaTitle": "Home Page",
        "metaDescription": "This is the home page",
        "shareImage": {
          "url": "/uploads/ai_prompt_e43fe026b1.jpg"
        }
      }
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

Nice! Now that we have data from our API, we can start migrating our front end.

Updating Our Frontend To Work With Strapi V5

So, let's start by starting our frontend project and seeing what error we will get.

Navigate to your next.js project and run the following command to start your frontend:

yarn dev

You will probably see an error, a blank screen, or both.

When migrating, this is a good reminder that it might be a good time to think of possible refactors.

As we continue migrating our front end to strapi v5, we can start by updating our utils/fetch-api.ts file.

We will need to update the fetchAPI function to the following:

import qs from "qs";
import { getStrapiURL } from "./api-helpers";

export async function fetchAPI(path: string, query: any, authToken?: string) {
  const baseURL = getStrapiURL();
  const url = new URL("/api" + path, baseURL);
  url.search = qs.stringify(query);

  const baseHeader = {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "Strapi-Response-Format": "v4",
    },
  };

  const headerWithAuth = {
    ...baseHeader,
    headers: {
      ...baseHeader.headers,
      Authorization: `Bearer ${authToken}`,
    },
  };

  try {
    const response = await fetch(url, authToken ? headerWithAuth : baseHeader);
    const data = await response.json();
    if (!response.ok) throw new Error("Failed to fetch data");
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error;
  }
}

Notice that we use the Strapi-Response-Format header to tell Strapi to respond in v4 format.

This will allow us to get the old data format, which we can use to test our front end before we update it to the new format.

Since we added some changes in this file, for instance, instead of using options, we are now using authToken.

We must update this wherever we use the fetchAPI function.

Let's start with our root layout.tsx file.

We will update the getGlobal function to the following:

async function getGlobal(lang: string): Promise<any> {
  const token = process.env.NEXT_PUBLIC_STRAPI_API_TOKEN;

  if (!token)
    throw new Error("The Strapi API Token environment variable is not set.");

  const path = `/global`;

  const urlParamsObject = {
    populate: [
      "metadata",
      "favicon",
      "notificationBanner.link",
      "navbar.links",
      "navbar.navbarLogo.logoImg",
      "footer.footerLogo.logoImg",
      "footer.menuLinks",
      "footer.legalLinks",
      "footer.socialLinks",
      "footer.categories",
    ],
    locale: lang,
  };
  return await fetchAPI(path, urlParamsObject, token);
}

The few changes we made are:

We removed metadata.sharedImage since we removed it when we removed the Strapi SEO plugin earlier.
We removed the options parameters since we are now setting it directly inside fethAPI.
Finally, we passed down our token to the fetchAPI function.

Nice! With all these changes, we should be able to get our global data.

Which should display Top Navigation and Footer on our page.

Now let's navigate to our utils/get-page-by-slug.ts file and make the following changes:

import { fetchAPI } from "@/app/[lang]/utils/fetch-api";

export async function getPageBySlug(slug: string, lang: string) {
  const token = process.env.NEXT_PUBLIC_STRAPI_API_TOKEN;
  const path = `/pages`;
  const urlParamsObject = { filters: { slug }, locale: lang };
  return await fetchAPI(path, urlParamsObject, token);
}

We made the following changes:

We removed the options parameters since we now set them directly inside fethAPI.

2 We finally passed down our token to the fetchAPI function.

Now, let's refresh our page and see if we get our landing page data.

Nice! It is working.

Finally, we must update our Blog Page to reflect our new changes.

Now, let's navigate to our blog/page.tsx file and make the following changes:

On line 41, we will remove the options params and pass down our token to the fetchAPI function.
Before:

const options = { headers: { Authorization: `Bearer ${token}` } };
const responseData = await fetchAPI(path, urlParamsObject, options);

After:

const responseData = await fetchAPI(path, urlParamsObject, token);

After these changes, we should be able to get our blog page working.

Now, we just need to update our blog/[category]/page.tsx file to reflect our new changes.

On line 26, we will remove the options params and pass down our token to the fetchAPI function.

Before:

const options = { headers: { Authorization: `Bearer ${token}` } };
const responseData = await fetchAPI(path, urlParamsObject, options);

After:

const responseData = await fetchAPI(path, urlParamsObject, token);

We also need to make a similar change in the blog/[category]/[slug]/layout.tsx file.

Inside the fetchSideMenuData function, on line 26, we will remove the options params and pass down our token to the fetchAPI function.

The fetchSideMenuData function should look like this:

async function fetchSideMenuData(filter: string) {
  try {
    const token = process.env.NEXT_PUBLIC_STRAPI_API_TOKEN;

    const categoriesResponse = await fetchAPI(
      "/categories",
      { populate: "*" },
      token
    );

    const articlesResponse = await fetchAPI(
      "/articles",
      filter
        ? {
            filters: {
              category: {
                name: filter,
              },
            },
          }
        : {},
      token
    );

    return {
      articles: articlesResponse.data,
      categories: categoriesResponse.data,
    };
  } catch (error) {
    console.error(error);
  }
}

And in the same file, let's update the generateStaticParams function to the following:

export async function generateStaticParams() {
  const token = process.env.NEXT_PUBLIC_STRAPI_API_TOKEN;
  const path = `/articles`;
  const articleResponse = await fetchAPI(
    path,
    {
      populate: ["category"],
    },
    token
  );

  return articleResponse.data.map(
    (article: {
      attributes: {
        slug: string;
        category: {
          slug: string;
        };
      };
    }) => ({ slug: article.attributes.slug, category: article.attributes.slug })
  );
}

Lastly, we need to make a final change in the blog/[category]/[slug]/page.tsx file.

Here is what the getPostBySlug looks like now:

async function getPostBySlug(slug: string) {
  const token = process.env.NEXT_PUBLIC_STRAPI_API_TOKEN;
  const path = `/articles`;
  const urlParamsObject = {
    filters: { slug },
    populate: {
      cover: { fields: ["url"] },
      authorsBio: { populate: "*" },
      category: { fields: ["name"] },
      blocks: {
        populate: {
          __component: "*",
          files: "*",
          file: "*",
          url: "*",
          body: "*",
          title: "*",
          author: "*",
        },
      },
    },
  };
  const options = { headers: { Authorization: `Bearer ${token}` } };
  const response = await fetchAPI(path, urlParamsObject, options);
  return response;
}

Let's update the getPostBySlug function with the following changes:

async function getPostBySlug(slug: string) {
  const token = process.env.NEXT_PUBLIC_STRAPI_API_TOKEN;
  const path = `/articles`;
  const urlParamsObject = {
    filters: { slug },
    populate: {
      cover: { fields: ["url"] },
      authorsBio: { populate: "*" },
      category: { fields: ["name"] },
      blocks: {
        on: {
          "shared.media": {
            populate: "*",
          },
          "shared.quote": {
            populate: "*",
          },
          "shared.rich-text": {
            populate: "*",
          },
          "shared.slider": {
            populate: "*",
          },
          "shared.video-embed": {
            populate: "*",
          },
        },
      },
    },
  };
  const response = await fetchAPI(path, urlParamsObject, token);
  return response;
}

Now let's update getMetaData function to the following:

async function getMetaData(slug: string) {
  const token = process.env.NEXT_PUBLIC_STRAPI_API_TOKEN;
  const path = `/articles`;
  const urlParamsObject = {
    filters: { slug },
    populate: { seo: { populate: "*" } },
  };
  const response = await fetchAPI(path, urlParamsObject, token);
  return response.data;
}

And finally, let's update the generateStaticParams function to the following:

export async function generateStaticParams() {
  const token = process.env.NEXT_PUBLIC_STRAPI_API_TOKEN;
  const path = `/articles`;
  const articleResponse = await fetchAPI(
    path,
    {
      populate: ["category"],
    },
    token
  );

  return articleResponse.data.map(
    (article: {
      attributes: {
        slug: string;
        category: {
          slug: string;
        };
      };
    }) => ({ slug: article.attributes.slug, category: article.attributes.slug })
  );
}

Now, you can navigate your blog page, click on a single blog post, and see the data.

Nice.

Closing Thoughts

In this tutorial, we discussed how to migrate a Strapi v4 project to Strapi v5 using the upgrade tool via codemods.

We also went over how to update our frontend to work with Strapi v5 and how to use the Strapi-Response-Format header to get the old Strapi v4 response format.

This allows us to quickly migrate our front end to work with Strapi v5 without having to rewrite all our code.

But, like with any migration, this is a good time to refactor and consider what improvements you can make in the front end.

I will keep using the old Strapi v4 response format for this blog post. However, I will update the repo's front end to work with the new Strapi v5 response format.

Additional Resources

Here are some additional resources for Strapi v5:

LaunchPad App

LaunchPad ia a more advanced demo for real-world use.

It is designed to show you Strapi’s full potential, highlighting the latest features and giving you a more comprehensive look at what you can build. It’s made to help you understand how Strapi can scale and adapt to meet your project needs.

You can the demo here.
You can find the project repo here.

In the future articles, we will cover how you can set up LaunchPad locally and do an overview of the code and feature.

Conclusion

Migrating from Strapi v4 to v5 is a significant opportunity to not only update your backend but also to enhance your frontend and explore optimization possibilities, thereby improving your overall project performance.

This post explored how to migrate your Strapi's application via codemods.

We also learned that using the Strapi-Response-Format header temporarily maintained the v4 response format, ensuring a smooth transition for our front end.

With your project now on Strapi v5, you can take advantage of the new features and improvements that come with this major update. Happy coding!

If you have any questions or just want to say hello, remember that we're here to help. We have 'open office hours' on Strapi's Discord Channels, where you can get real-time support during your migration journey.

Morning Session:
Join us at 4 AM CST (9:00 AM GMT) for our new early bird session. Perfect for our global community members!

Afternoon Session:
Remember our regular session at 12:30 PM CST (6:30 PM GMT). It's a great time for an afternoon break and chat!

We would love to have you.

Strapi 5 Is Out And We Are Excited To Share All The New Features

Paul Bratslavsky — Thu, 26 Sep 2024 14:19:56 +0000

Here is what has been happening.

Introducing Draft & Publish and Content History in Strapi 5

We're excited to introduce two new features in Strapi 5 that make managing content easier for you. With Draft & Publish and Content History, you have more control over every step of your content’s lifecycle.

Draft & Publish lets you work on drafts without risking accidental publishing. You can make changes, save your progress, and only publish when you're ready. This keeps your work safe and gives you the freedom to experiment.

Content History is like a time machine for your content. It lets you go back and restore previous versions whenever you need. Whether you’re fixing a mistake or just want to see how things looked before, this feature gives you peace of mind.

We built these tools to help you work faster and with fewer headaches. Strapi 5 is here to make content management simple, so you can focus on building and creating without any worry.

Checkout out this post.

And checkout this video from Marc and Remi talking about the new features.

Improves Developer Experience with Cleaner API, Document Service API, and Plugin SDK

With Strapi 5, we’ve made some key updates that will help you work more efficiently.

We're excited to share what we have done to improve the developer experience by removing unnecessary complexity.In this post, I’ll walk you through the biggest updates: a cleaner API response format, a new Document Service API, and the long-term support plan.

Checkout out this post.

And checkout this video from Jamies and Ben exploring the new features.

Boosting Performance and Type Safety with Vite and TypeScript

We’re excited to announce two key changes that significantly improve your experience as a developer: the adoption of Vite as our default bundler and enhanced TypeScript support. These updates are designed to make Strapi faster, easier to configure, and provide stronger type safety for your projects.

Checkout out this post.

And checkout this video from Alex and JS exploring the new features.

Checkout LaunchPad: Strapi's New and Improved Demo App

LaunchPad is designed to show you Strapi’s full potential, highlighting the latest features and giving you a more comprehensive look at what you can build. It’s made to help you understand how Strapi can scale and adapt to meet your project needs.

You can tryit out today here

And learn more about it in this post

Epic Next JS 15 Tutorial Part 7: Next.js and Strapi CRUD Permissions

Paul Bratslavsky — Wed, 17 Apr 2024 15:04:23 +0000

Welcome back to our Epic Next.js tutorial series!

Last time, we learned how to generate summaries using OpenAI and save them into our database.

Today, we'll take a look at how to update and delete our summaries while ensuring that only an authorized user can do this.

We must ensure that only the right people can change or delete information.

We'll tackle this challenge using Strapi's route middleware, ensuring only authorized users can interact with their summaries.

Quick CRUD Refresher

Let's briefly revisit the basics of CRUD—Create, Read, Update, and Delete—essential operations for any web application:

Create (POST): This method sends data to the server to create a new resource, like a summary.
Read (GET): GET requests to retrieve data from the server, such as loading summary details.
Update (PUT): Used for modifying an existing resource, like updating a user's bio.
Delete (DELETE): Removes resources, such as deleting a user's summary.

Implementing CRUD Operations

To better understand how to interact with our database, here's how Strapi maps CRUD operations to specific HTTP methods and routes:

Create Summary: POST /api/summaries
Find Summaries: GET /api/summaries
Find One Summary: GET /api/summaries/:id
Update Summary: PUT /api/summaries/:id
Delete Summary: DELETE /api/summaries/:id

Strapi Workflow Explained

Here's a basic breakdown of what happens in Strapi when a request is made:

Make a Request: A client (like a browser or mobile app) sends a request to the server.
Hit a Route: The request reaches Strapi and matches one of the predefined routes.
Call the Controller: The route triggers a controller function that handles the specifics of the request, such as retrieving data, updating a record, or deleting an item.
Managing Authorized Requests with JWT Tokens: Strapi uses JSON Web Tokens (JWT) to ensure that each request is legitimate.
Here's how it works: Users who log in receive a JWT, which must be included as a 'Bearer token' in the header of subsequent requests. This token is validated on each request to ensure it's still valid and that the user is authenticated. However, authenticating a request doesn't automatically mean it's authorized. Just because a user is logged in and has a token doesn't mean they should be able to modify any data they want. We need to define the logic that will prevent users from modifying data that isn't theirs.

Note: Strapi does not handle this out of the box, so we need to write custom logic within our middleware.

Understanding Route Middleware

Route middleware in Strapi acts as a security checkpoint for each request, where we can add additional checks, such as such as whether the user is authorized to update or delete content.

How Route Middleware Works

Intercept Requests: Middleware functions intercept incoming requests before they reach their final destination.
Check Permissions: It assesses whether the user's token grants them the right to perform the requested action.
Allow or Deny Access: If the user lacks necessary permissions, the middleware denies access and may return a response like "403 Forbidden".

Read more about Strapi middlewares here.

This system prevents unauthorized data modification and helps maintain a clear separation of duties within the application, simplifying management and enhancing security.

This approach enhances security and helps maintain a clean separation of concerns within the application, making the codebase more straightforward to manage and scale.

Now that we know we need to create our own middleware to handle the authorization check, let's implement our form logic first, then add the middleware.

Setting Up Summary Update Logic

In your project's frontend, navigate to the following file summary-card-form.tsx.

You should see the following code that we added in the previous tutorial.

// import { updateSummaryAction, deleteSummaryAction } from "@/data/actions/summary-actions";
import { cn } from "@/lib/utils";

import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

import { SubmitButton } from "@/components/custom/submit-button";
import ReactMarkdown from "react-markdown";
// import { DeleteButton } from "@/components/custom/delete-button";

export function SummaryCardForm({
  item,
  className,
}: {
  readonly item: any;
  readonly className?: string;
}) {
  // const deleteSummaryById = deleteSummaryAction.bind(null, item.documentId);

  return (
    <Card className={cn("mb-8 relative h-auto", className)}>
      <CardHeader>
        <CardTitle>Video Summary</CardTitle>
      </CardHeader>
      <CardContent>
        <div>
          <form>
            <Input
              id="title"
              name="title"
              placeholder="Update your title"
              required
              className="mb-4"
              defaultValue={item.title}
            />
            <div className="flex-1 flex flex-col">
              <Tabs
                defaultValue="preview"
                className="flex flex-col h-full gap-2"
              >
                <TabsList className="grid w-full grid-cols-2">
                  <TabsTrigger value="preview">Preview</TabsTrigger>
                  <TabsTrigger value="markdown">Edit Markdown</TabsTrigger>
                </TabsList>
                <TabsContent value="preview" className="flex-1">
                  <ReactMarkdown
                    className="
                    markdown-preview
                    relative w-full h-[600px]
                    overflow-auto scroll-smooth
                    p-4 px-3 py-2
                    text-sm
                    bg-white dark:bg-gray-800 bg-transparent
                    border border-gray-300 dark:border-gray-700
                    rounded-md
                    shadow-sm
                    mb-4
                    placeholder:text-muted-foreground
                    focus-visible:outline-none
                    focus-visible:bg-gray-50
                    focus-visible:ring-1
                    focus-visible:ring-ring
                    disabled:cursor-not-allowed
                    disabled:opacity-50
                  "
                  >
                    {item.summary}
                  </ReactMarkdown>
                </TabsContent>
                <TabsContent value="markdown" className="flex-1">
                  <Textarea
                    name="summary"
                    className="
                      markdown-preview
                      relative w-full h-[600px]
                      overflow-auto scroll-smooth
                      p-4 px-3 py-2
                      text-sm
                      bg-white dark:bg-gray-800 bg-transparent
                      border border-gray-300 dark:border-gray-700
                      rounded-md
                      shadow-sm
                      mb-4
                      placeholder:text-muted-foreground
                      focus-visible:outline-none
                      focus-visible:bg-gray-50
                      focus-visible:ring-1
                      focus-visible:ring-ring
                      disabled:cursor-not-allowed
                      disabled:opacity-50
                    "
                    defaultValue={item.summary}
                  />
                </TabsContent>
              </Tabs>
            </div>
            <input type="hidden" name="id" value={item.documentId} />
            <SubmitButton
              text="Update Summary"
              loadingText="Updating Summary"
            />
          </form>
          <form>
            {/* <DeleteButton className="absolute right-4 top-4 bg-red-700 hover:bg-red-600" /> */}
          </form>
        </div>
      </CardContent>
      <CardFooter></CardFooter>
    </Card>
  );
}

In the code above, we have yet to implement our updateSummaryAction and deleteSummaryAction.

Let's start with adding our new server actions; let's navigate to our src/data/actions folder, and, in the file name summary-actions.ts,, add update with the following code.

"use server";

import { getAuthToken } from "@/data/services/get-token";
import { mutateData } from "@/data/services/mutate-data";
import { redirect } from "next/navigation";
import { revalidatePath } from "next/cache";

interface Payload {
  data: {
    title?: string;
    videoId: string;
    summary: string;
  };
}

export async function createSummaryAction(payload: Payload) {
  const authToken = await getAuthToken();
  if (!authToken) throw new Error("No auth token found");

  const data = await mutateData("POST", "/api/summaries", payload);

  if (data.error) throw new Error(data.error.message);

  redirect("/dashboard/summaries/" + data.data.documentId);
}

export async function updateSummaryAction(prevState: any, formData: FormData) {
  const rawFormData = Object.fromEntries(formData);
  const id = rawFormData.id as string;

  const payload = {
    data: {
      title: rawFormData.title,
      summary: rawFormData.summary,
    },
  };

  const responseData = await mutateData("PUT", `/api/summaries/${id}`, payload);

  if (!responseData) {
    return {
      ...prevState,
      strapiErrors: null,
      message: "Oops! Something went wrong. Please try again.",
    };
  }

  if (responseData.error) {
    return {
      ...prevState,
      strapiErrors: responseData.error,
      message: "Failed to update summary.",
    };
  }

  revalidatePath("/dashboard/summaries");

  return {
    ...prevState,
    message: "Summary updated successfully",
    data: responseData,
    strapiErrors: null,
  };
}

export async function deleteSummaryAction(id: string, prevState: any) {
  const responseData = await mutateData("DELETE", `/api/summaries/${id}`);

  if (!responseData) {
    return {
      ...prevState,
      strapiErrors: null,
      message: "Oops! Something went wrong. Please try again.",
    };
  }

  redirect("/dashboard/summaries");
}

Now that we have both server actions to handle update and delete let's navigate back to our summary-card-form.tsx file.

Let's start by uncommenting our server actions import.

import {
  updateSummaryAction,
  deleteSummaryAction,
} from "@/data/actions/summary-actions";

Then, let's import the following to access the form state for error handling.

import { useActionState } from "react";

Don't forget, since we are using useActionState we need to add "use client"; at the top of the file.

Now, let's set the default state to the following:

const INITIAL_STATE = {
  strapiErrors: null,
  data: null,
  message: null,
};

Let's connect our actions with our formState by adding the following.

const deleteSummaryById = deleteSummaryAction.bind(null, item.id);

const [deleteState, deleteAction] = useActionState(
  deleteSummaryById,
  INITIAL_STATE
);

const [updateState, updateAction] = useActionState(
  updateSummaryAction,
  INITIAL_STATE
);

Based on what we have already covered, this should all start looking familiar. We are using useActionState to get our return from our server actions to display our errors on our frontend.

Now that we have our deleteAction and updateAction, we must add these to the respectful forms via the action attribute.

<form action={updateAction}>
  <Input
    id="title"
    name="title"
    placeholder="Update your title"
    required
    className="mb-4"
    defaultValue={item.title}
  />
  <div className="flex-1 flex flex-col">
    <Tabs defaultValue="preview" className="flex flex-col h-full gap-2">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="preview">Preview</TabsTrigger>
        <TabsTrigger value="markdown">Edit Markdown</TabsTrigger>
      </TabsList>
      <TabsContent value="preview" className="flex-1">
        <ReactMarkdown
          className="
                    markdown-preview
                    relative w-full h-[600px]
                    overflow-auto scroll-smooth
                    p-4 px-3 py-2
                    text-sm
                    bg-white dark:bg-gray-800 bg-transparent
                    border border-gray-300 dark:border-gray-700
                    rounded-md
                    shadow-sm
                    mb-4
                    placeholder:text-muted-foreground
                    focus-visible:outline-none
                    focus-visible:bg-gray-50
                    focus-visible:ring-1
                    focus-visible:ring-ring
                    disabled:cursor-not-allowed
                    disabled:opacity-50
                  "
        >
          {item.summary}
        </ReactMarkdown>
      </TabsContent>
      <TabsContent value="markdown" className="flex-1">
        <Textarea
          name="summary"
          className="
                      markdown-preview
                      relative w-full h-[600px]
                      overflow-auto scroll-smooth
                      p-4 px-3 py-2
                      text-sm
                      bg-white dark:bg-gray-800 bg-transparent
                      border border-gray-300 dark:border-gray-700
                      rounded-md
                      shadow-sm
                      mb-4
                      placeholder:text-muted-foreground
                      focus-visible:outline-none
                      focus-visible:bg-gray-50
                      focus-visible:ring-1
                      focus-visible:ring-ring
                      disabled:cursor-not-allowed
                      disabled:opacity-50
                    "
          defaultValue={item.summary}
        />
      </TabsContent>
    </Tabs>
  </div>
  <input type="hidden" name="id" value={item.documentId} />
  <SubmitButton text="Update Summary" loadingText="Updating Summary" />
</form>

<form action={deleteAction}>
  <DeleteButton className="absolute right-4 top-4 bg-red-700 hover:bg-red-600" />
</form>

Finally, let's import our StrapiError component with the following.

import { StrapiErrors } from "@/components/custom/strapi-errors";

And use it in our card footer.

<CardFooter>
  <StrapiErrors
    error={deleteState?.strapiErrors || updateState?.strapiErrors}
  />
</CardFooter>

The completed code should look like the following.

"use client";
import { useActionState } from "react";

import {
  updateSummaryAction,
  deleteSummaryAction,
} from "@/data/actions/summary-actions";
import { cn } from "@/lib/utils";

import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

import { StrapiErrors } from "@/components/custom/strapi-errors";

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

import { SubmitButton } from "@/components/custom/submit-button";
import ReactMarkdown from "react-markdown";
import { DeleteButton } from "@/components/custom/delete-button";

const INITIAL_STATE = {
  strapiErrors: null,
  data: null,
  message: null,
};

export function SummaryCardForm({
  item,
  className,
}: {
  readonly item: any;
  readonly className?: string;
}) {
  const deleteSummaryById = deleteSummaryAction.bind(null, item.documentId);

  const [deleteState, deleteAction] = useActionState(
    deleteSummaryById,
    INITIAL_STATE
  );

  const [updateState, updateAction] = useActionState(
    updateSummaryAction,
    INITIAL_STATE
  );
  return (
    <Card className={cn("mb-8 relative h-auto", className)}>
      <CardHeader>
        <CardTitle>Video Summary</CardTitle>
      </CardHeader>
      <CardContent>
        <div>
          <form action={updateAction}>
            <Input
              id="title"
              name="title"
              placeholder="Update your title"
              required
              className="mb-4"
              defaultValue={item.title}
            />
            <div className="flex-1 flex flex-col">
              <Tabs
                defaultValue="preview"
                className="flex flex-col h-full gap-2"
              >
                <TabsList className="grid w-full grid-cols-2">
                  <TabsTrigger value="preview">Preview</TabsTrigger>
                  <TabsTrigger value="markdown">Edit Markdown</TabsTrigger>
                </TabsList>
                <TabsContent value="preview" className="flex-1">
                  <ReactMarkdown
                    className="
                    markdown-preview
                    relative w-full h-[600px]
                    overflow-auto scroll-smooth
                    p-4 px-3 py-2
                    text-sm
                    bg-white dark:bg-gray-800 bg-transparent
                    border border-gray-300 dark:border-gray-700
                    rounded-md
                    shadow-sm
                    mb-4
                    placeholder:text-muted-foreground
                    focus-visible:outline-none
                    focus-visible:bg-gray-50
                    focus-visible:ring-1
                    focus-visible:ring-ring
                    disabled:cursor-not-allowed
                    disabled:opacity-50
                  "
                  >
                    {item.summary}
                  </ReactMarkdown>
                </TabsContent>
                <TabsContent value="markdown" className="flex-1">
                  <Textarea
                    name="summary"
                    className="
                      markdown-preview
                      relative w-full h-[600px]
                      overflow-auto scroll-smooth
                      p-4 px-3 py-2
                      text-sm
                      bg-white dark:bg-gray-800 bg-transparent
                      border border-gray-300 dark:border-gray-700
                      rounded-md
                      shadow-sm
                      mb-4
                      placeholder:text-muted-foreground
                      focus-visible:outline-none
                      focus-visible:bg-gray-50
                      focus-visible:ring-1
                      focus-visible:ring-ring
                      disabled:cursor-not-allowed
                      disabled:opacity-50
                    "
                    defaultValue={item.summary}
                  />
                </TabsContent>
              </Tabs>
            </div>
            <input type="hidden" name="id" value={item.documentId} />
            <SubmitButton
              text="Update Summary"
              loadingText="Updating Summary"
            />
          </form>
          <form action={deleteAction}>
            <DeleteButton className="absolute right-4 top-4 bg-red-700 hover:bg-red-600" />
          </form>
        </div>
      </CardContent>
      <CardFooter>
        <StrapiErrors
          error={deleteState?.strapiErrors || updateState?.strapiErrors}
        />
      </CardFooter>
    </Card>
  );
}

Now, let's test out our frontend. I disabled delete and update under user permission for authenticated users.

So, if we try to delete or update our summary, we should see the forbidden message in our card footer.

Excellent, we can tell our errors are working. Let's set the following permissions again and see if our update and delete functions work.

You should now see that you can update and delete your content.

But we have one small issue. When we make a GET request to the /api/summaries endpoint, we get all the summaries. And we want to make sure that we only get the summaries for the user that is logged in.

Here in Strapi Admin, you can see that I have two summaries from two different users. Still, in the frontend, you can see that I have access to all the summaries.

I should only see the summaries from the user that is logged in. But instead, I see all the summaries.

Let's fix this by creating a new middleware in the next section.

Create Is Owner Middleware In Strapi

Let's create a new middleware to only show summaries from the user who is logged in by applying a filter inside of our middleware.

Using Strapi CLI To Generate Middleware

Let's start in our Strapi project folder, so make sure you are on the backend of your project and run the following command.

yarn strapi generate

Select the middleware option.

➜  backend git:(main) ✗ yarn strapi generate
yarn run v1.22.22
$ strapi generate
? Strapi Generators
  api - Generate a basic API
  controller - Generate a controller for an API
  content-type - Generate a content type for an API
  policy - Generate a policy for an API
❯ middleware - Generate a middleware for an API
  migration - Generate a migration
  service - Generate a service for an API

I am going to call my middleware is-owner and we will add it to the root of the project.

? Middleware name is-owner
? Where do you want to add this middleware? (Use arrow keys)
❯ Add middleware to root of project
  Add middleware to an existing API
  Add middleware to an existing plugin

Select the Add middleware to root of project option and press Enter.

✔  ++ /middlewares/is-owner.js
✨  Done in 327.55s.

Our middleware is located in the root of our project, in a folder called src/middlewares inside the is-owner file.

It will have this basic template code.

/**
 * `is-owner` middleware
 */

import type { Core } from "@strapi/strapi";

export default (config, { strapi }: { strapi: Core.Strapi }) => {
  // Add your own logic here.
  return async (ctx, next) => {
    strapi.log.info("In is-owner middleware.");

    await next();
  };
};

Let's update the code with the following.

/**
 * `is-owner` middleware
 */

import type { Core } from "@strapi/strapi";

export default (config, { strapi }: { strapi: Core.Strapi }) => {
  // Add your own logic here.
  return async (ctx, next) => {
    strapi.log.info("In is-owner middleware.");

    const entryId = ctx.params.id;
    const user = ctx.state.user;
    const userId = user?.documentId;

    if (!userId) return ctx.unauthorized(`You can't access this entry`);

    const apiName = ctx.state.route.info.apiName;

    function generateUID(apiName) {
      const apiUid = `api::${apiName}.${apiName}`;
      return apiUid;
    }

    const appUid = generateUID(apiName);

    if (entryId) {
      const entry = await strapi.documents(appUid as any).findOne({
        documentId: entryId,
        populate: "*",
      });

      if (entry && entry.authorId !== userId)
        return ctx.unauthorized(`You can't access this entry`);
    }

    if (!entryId) {
      ctx.query = {
        ...ctx.query,
        filters: { ...ctx.query.filters, authorId: userId },
      };
    }

    await next();
  };
};

The code above will check for two cases. If entryId exists, that means we are calling the findOne route. In this case, we search for the entry and check if the userId is the same as the logged-in user. If that is the case, go ahead and return the entry.

In the second case, if there is no entryId, we assume that we are making a GET request, in which case filter the content by userId.

Before we can test the middleware, we need to add the appropriate routes.

In Strapi, navigate to the following folder and file src/api/summary/routes/summary.js, and you should see this code.

/**
 * summary router
 */

import { factories } from "@strapi/strapi";

export default factories.createCoreRouter("api::summary.summary", {
  config: {
    create: {
      middlewares: ["api::summary.on-summary-create"],
    },
  },
});

We have already added middleware to our create route. Let's do the same for find, findOne, update, and delete.

Completed code with the changes should look like the following.

/**
 * summary router
 */

import { factories } from "@strapi/strapi";

export default factories.createCoreRouter("api::summary.summary", {
  config: {
    create: {
      middlewares: ["api::summary.on-summary-create"],
    },
    find: {
      middlewares: ["global::is-owner"],
    },
    findOne: {
      middlewares: ["global::is-owner"],
    },
    update: {
      middlewares: ["global::is-owner"],
    },
    delete: {
      middlewares: ["global::is-owner"],
    },
  },
});

Whenever any of these routes get called, it will trigger our middleware that will either reject the request or approve it based on our logic.

Let's restart our Strapi backend and see if we are only able to see the post for the appropriate user.

Conclusion

In this tutorial, we focused on making our app more secure and user-friendly by setting up CRUD operations that are specific to each user. This way, each person can only update or delete their own summaries, adding a strong layer of protection and control. With custom middleware handling these checks, we made sure that users see only their own content and that any attempts to view or change someone else’s data are blocked.

Here’s a quick summary of everything we covered:

Setting up CRUD operations for summaries in Strapi, allowing users to create, read, update, and delete their own data.
Creating custom middleware to check user permissions and limit access based on the logged-in user’s ID.
Filtering content so each user only sees their own summaries, making the app more organized and secure.
Adding error handling for unauthorized actions, ensuring users receive clear feedback if they try to access data they shouldn’t.
Testing our middleware to confirm that only authorized users can update or delete their own summaries.
Configuring routes in Strapi to apply our custom middleware for create, read, update, and delete actions.

This setup combines Strapi’s middleware with Next.js to create a simple and secure app that works well even as more users join. Now, each user has a clear view of their own data, and we’re keeping everything safe by preventing unauthorized access.

In the next part, we’ll keep building out new features to make this app even better. Thanks for following along, and happy coding! See you in the next tutorial!

Note about this project

This project has been updated to use Next.js 15 and Strapi 5.

If you have any questions, feel free to stop by at our Discord Community for our daily "open office hours" from 12:30 PM CST to 1:30 PM CST.

If you have a suggestion or find a mistake in the post, please open an issue on the GitHub repository.

You can also find the blog post content in the Strapi Blog.

Feel free to make PRs to fix any issues you find in the project, or let me know if you have any questions.

Happy coding!

Paul

Epic Next JS 15 Tutorial Part 6: Create Video Summary with Next.js and Open AI

Paul Bratslavsky — Wed, 10 Apr 2024 15:25:34 +0000

In the previous tutorial, we completed our Dashboard and Account pages. In this section, we will work on generating our video summary using Open AI and LangChain.

We will kick off the tutorial by working on our SummaryForm component. This time around, instead of using a server action, we will explore how to create an api route in Next.js.

You can learn more about Next.js route handlers here

But first, let's create our summary form, which we can use to submit the request.

Navigate to src/components/forms and create a new file called summary-form.tsx and paste in the following code as the starting point.

"use client";

import { useState } from "react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";

import { Input } from "@/components/ui/input";
import { SubmitButton } from "@/components/custom/submit-button";

interface StrapiErrorsProps {
  message: string | null;
  name: string;
}

const INITIAL_STATE = {
  message: null,
  name: "",
};

export function SummaryForm() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<StrapiErrorsProps>(INITIAL_STATE);
  const [value, setValue] = useState<string>("");

  async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setLoading(true);
    toast.success("Summary Created");
    setLoading(false);
  }

  function clearError() {
    setError(INITIAL_STATE);
    if (error.message) setValue("");
  }

  const errorStyles = error.message
    ? "outline-1 outline outline-red-500 placeholder:text-red-700"
    : "";

  return (
    <div className="w-full max-w-[960px]">
      <form
        onSubmit={handleFormSubmit}
        className="flex gap-2 items-center justify-center"
      >
        <Input
          name="videoId"
          placeholder={
            error.message ? error.message : "Youtube Video ID or URL"
          }
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onMouseDown={clearError}
          className={cn(
            "w-full focus:text-black focus-visible:ring-pink-500",
            errorStyles
          )}
          required
        />

        <SubmitButton
          text="Create Summary"
          loadingText="Creating Summary"
          loading={loading}
        />
      </form>
    </div>
  );
}

The above code contains a basic form UI and a handleFormSubmit function, which does not include any of our logic to get the summary yet.

We also use Sonner, one of my favorite toast libraries. You can learn more about it here.

But we are not using it directly; instead, we are using the Chadcn UI component, which you can find here.

npx shadcn@latest add sonner

Once Sonner is installed, implement it in our main layout.tsx file by adding the following import.

import { Toaster } from "@/components/ui/sonner";

And adding the code below above our TopNav.

<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
  <Toaster position="bottom-center" />
  <Header data={globalData.data.header} />
  {children}
  <Footer data={globalData.data.footer} />
</body>

Let's add this form to our top navigation by navigating to the src/components/custom/header.tsx file and making the following changes.

// import the form
import { SummaryForm } from "@/components/forms/summary-form";

// rest of the code

export async function Header({ data }: Readonly<HeaderProps>) {
  const { logoText, ctaButton } = data;
  const user = await getUserMeLoader();

  return (
    <div className="flex items-center justify-between px-4 py-3 bg-white shadow-md dark:bg-gray-800">
      <Logo text={logoText.text} />
      {user.ok && <SummaryForm />}
      <div className="flex items-center gap-4">
        {user.ok ? (
          <LoggedInUser userData={user.data} />
        ) : (
          <Link href={ctaButton.url}>
            <Button>{ctaButton.text}</Button>
          </Link>
        )}
      </div>
    </div>
  );
}

Let's restart our frontend project and see if it shows up.

Now that our basic form is working let's examine how to set up our first API Handler Route in Next.js 15.

How To Create A Route Handler in Next.js 15

We will have the Next.js docs open as a reference.

Let's start by creating a new folder inside our app directory called api, a folder called summarize, and a file called route.ts. Then, paste in the following code.

import { NextRequest } from "next/server";

export async function POST(req: NextRequest) {
  console.log("FROM OUR ROUTE HANDLER:", req.body);
  try {
    return new Response(
      JSON.stringify({ data: "return from our handler", error: null }),
      {
        status: 200,
      }
    );
  } catch (error) {
    console.error("Error processing request:", error);
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error }));
    return new Response(JSON.stringify({ error: "Unknown error" }));
  }
}

Next, let's create a service to call our new route handler. Navigate to src/data/services and create a new file called summary-service.ts.

Create a new async function called generateSummaryService with the following code.

export async function generateSummaryService(videoId: string) {
  const url = "/api/summarize";
  try {
    const response = await fetch(url, {
      method: "POST",
      body: JSON.stringify({ videoId: videoId }),
    });
    return await response.json();
  } catch (error) {
    console.error("Failed to generate summary:", error);
    if (error instanceof Error) return { error: { message: error.message } };
    return { data: null, error: { message: "Unknown error" } };
  }
}

The following service allows us to call our newly created route handler located at api/summarize endpoint. It expects us to pass a videoId for the video we want to summarize.

Now that we have our basic route handler let's return to our summary-form.tsx file and see if we can request this endpoint.

Let's modify our handleFormSubmit with the following code to use our newly created service. Don't forget to import the generateSummaryService service.

import { generateSummaryService } from "@/data/services/summary-service";

async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  setLoading(true);

  const formData = new FormData(event.currentTarget);
  const videoId = formData.get("videoId") as string;

  toast.success("Generating Summary");

  const summaryResponseData = await generateSummaryService(videoId);
  console.log(summaryResponseData, "Response from route handler");

  toast.success("Testing Toast");
  setLoading(false);
}

When you submit your form, you should see the message returned from our route handler in our console log.

Now that we know that our Summary Form and Route Handler are connected, we can work on the logic responsible for summarizing our video.

Using Next.js Route Handler, LangChain and Open AI To Create A Summary

This section will examine how to create a video summary based on the video transcript.

We will be using a couple of services to help us accomplish this.

Prerequisite

You must have an account with Open AI. If you don't have one, go here and create one.

Getting Transcript From YouTube

In the past, I have used the youtube-transcript library; interestingly, it broke just recently. You can read through the issues here.

NOTE: Using other libraries, especially ones not officially supported, can lead to breaking changes, so keep this in mind.

I ended up creating my own implementation based on this library and created it as Strapi Plugin. You can learn about it here.

Which I have already deployed and we will just call that endpoint in our code to get the summary.

But I suggest checking out the tutorial above to learn how to build your own plugin and add it to your Strapi backend.

Let's navigate to src/app/api/summarize/route.ts and implement the logic to get the transcript.

Let's make the following changes.

import { NextRequest } from "next/server";

export async function POST(req: NextRequest) {
  console.log("FROM OUR ROUTE HANDLER:", req.body);

  const body = await req.json();
  const videoId = body.videoId;
  const url = `https://deserving-harmony-9f5ca04daf.strapiapp.com/utilai/yt-transcript/${videoId}`;

  let transcriptData;

  try {
    const transcript = await fetch(url);
    transcriptData = await transcript.text();
  } catch (error) {
    console.error("Error processing request:", error);
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error.message }));
    return new Response(JSON.stringify({ error: "Unknown error" }));
  }

  return new Response(JSON.stringify({ transcript: transcriptData }));
}

Before we test our front end, let's add a check to our form to ensure we have a valid video ID or URL.

In the summary-form.tsx update the handleFormSubmit function with the following.

async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  setLoading(true);

  const formData = new FormData(event.currentTarget);
  const videoId = formData.get("videoId") as string;

  const processedVideoId = extractYouTubeID(videoId);

  if (!processedVideoId) {
    toast.error("Invalid Youtube Video ID");
    setLoading(false);
    setValue("");
    setError({
      ...INITIAL_STATE,
      message: "Invalid Youtube Video ID",
      name: "Invalid Id",
    });
    return;
  }

  toast.success("Generating Summary");

  const summaryResponseData = await generateSummaryService(processedVideoId);
  console.log(summaryResponseData, "Response from route handler");

  toast.success("Testing Toast");
  setLoading(false);
}

Notice that we are using the extractYouTubeID function to ensure we have a valid YouTube video ID.

If we don't have a valid video ID or URL, we will show an error message and stop the function from continuing.

Now before we test our front end, let's add the extractYouTubeID function to our utils.ts file.

Here is the code for the extractYouTubeID function.

export function extractYouTubeID(urlOrID: string): string | null {
  // Regular expression for YouTube ID format
  const regExpID = /^[a-zA-Z0-9_-]{11}$/;

  // Check if the input is a YouTube ID
  if (regExpID.test(urlOrID)) {
    return urlOrID;
  }

  // Regular expression for standard YouTube links
  const regExpStandard = /youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/;

  // Regular expression for YouTube Shorts links
  const regExpShorts = /youtube\.com\/shorts\/([a-zA-Z0-9_-]+)/;

  // Check for standard YouTube link
  const matchStandard = urlOrID.match(regExpStandard);
  if (matchStandard) {
    return matchStandard[1];
  }

  // Check for YouTube Shorts link
  const matchShorts = urlOrID.match(regExpShorts);
  if (matchShorts) {
    return matchShorts[1];
  }

  // Return null if no match is found
  return null;
}

Just make sure to import it in our summary-form.tsx file.

import { extractYouTubeID } from "@/lib/utils";

The complete summary-form.tsx file should look like the following.

"use client";

import { useState } from "react";
import { toast } from "sonner";
import { cn, extractYouTubeID } from "@/lib/utils";

import { Input } from "@/components/ui/input";
import { SubmitButton } from "@/components/custom/submit-button";

import { generateSummaryService } from "@/data/services/summary-service";

interface StrapiErrorsProps {
  message: string | null;
  name: string;
}

const INITIAL_STATE = {
  message: null,
  name: "",
};

export function SummaryForm() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<StrapiErrorsProps>(INITIAL_STATE);
  const [value, setValue] = useState<string>("");

  async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setLoading(true);

    const formData = new FormData(event.currentTarget);
    const videoId = formData.get("videoId") as string;

    const processedVideoId = extractYouTubeID(videoId);

    if (!processedVideoId) {
      toast.error("Invalid Youtube Video ID");
      setLoading(false);
      setValue("");
      setError({
        ...INITIAL_STATE,
        message: "Invalid Youtube Video ID",
        name: "Invalid Id",
      });
      return;
    }

    toast.success("Generating Summary");

    const summaryResponseData = await generateSummaryService(processedVideoId);
    console.log(summaryResponseData, "Response from route handler");

    toast.success("Testing Toast");
    setLoading(false);
  }

  function clearError() {
    setError(INITIAL_STATE);
    if (error.message) setValue("");
  }

  const errorStyles = error.message
    ? "outline-1 outline outline-red-500 placeholder:text-red-700"
    : "";

  return (
    <div className="w-full max-w-[960px]">
      <form
        onSubmit={handleFormSubmit}
        className="flex gap-2 items-center justify-center"
      >
        <Input
          name="videoId"
          placeholder={
            error.message ? error.message : "Youtube Video ID or URL"
          }
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onMouseDown={clearError}
          className={cn(
            "w-full focus:text-black focus-visible:ring-pink-500",
            errorStyles
          )}
          required
        />

        <SubmitButton
          text="Create Summary"
          loadingText="Creating Summary"
          loading={loading}
        />
      </form>
    </div>
  );
}

Now, let's test our front end. Make sure to provide a valid YouTube video ID or URL.

Once we submit our form, you should see the response in the console.

Excellent. Now that we have our transcript, we can use it to prepare our summary.

Check if a user is logged in and has available credits

Now, let's navigate to our route handler at src/app/api/summarize/route.ts and add a check to check if a user is logged in and has available credits.

First, import the following helper methods.

import { getUserMeLoader } from "@/data/services/get-user-me-loader";
import { getAuthToken } from "@/data/services/get-token";

And the following lines are inside the POST function.

export async function POST(req: NextRequest) {
  const user = await getUserMeLoader();
  const token = await getAuthToken();

  if (!user.ok || !token) {
    return new Response(
      JSON.stringify({ data: null, error: "Not authenticated" }),
      { status: 401 }
    );
  }

  if (user.data.credits < 1) {
    return new Response(
      JSON.stringify({
        data: null,
        error: "Insufficient credits",
      }),
      { status: 402 }
    );
  }

  // rest of code
}

The final code should look like the following.

import { NextRequest } from "next/server";
import { getUserMeLoader } from "@/data/services/get-user-me-loader";
import { getAuthToken } from "@/data/services/get-token";

export async function POST(req: NextRequest) {
  const user = await getUserMeLoader();
  const token = await getAuthToken();

  if (!user.ok || !token) {
    return new Response(
      JSON.stringify({ data: null, error: "Not authenticated" }),
      { status: 401 }
    );
  }

  if (user.data.credits < 1) {
    return new Response(
      JSON.stringify({
        data: null,
        error: "Insufficient credits",
      }),
      { status: 402 }
    );
  }

  const body = await req.json();
  const videoId = body.videoId;
  const url = `https://deserving-harmony-9f5ca04daf.strapiapp.com/utilai/yt-transcript/${videoId}`;

  let transcriptData;

  try {
    const transcript = await fetch(url);
    transcriptData = await transcript.text();
  } catch (error) {
    console.error("Error processing request:", error);
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error.message }));
    return new Response(JSON.stringify({ error: "Unknown error" }));
  }

  return new Response(JSON.stringify({ transcript: transcriptData }));
}

We must add a check in our summary-form.tsx file to handle the errors inside our handleFormSubmit function.

Let's add the following code after this line.

const summaryResponseData = await generateSummaryService(videoId);
console.log(summaryResponseData, "Response from route handler");

// add the following

if (summaryResponseData.error) {
  setValue("");
  toast.error(summaryResponseData.error);
  setError({
    ...INITIAL_STATE,
    message: summaryResponseData.error,
    name: "Summary Error",
  });
  setLoading(false);
  return;
}

// rest of the code

The completed code in the handleFormSubmit function should look like the following.

async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  setLoading(true);

  const formData = new FormData(event.currentTarget);
  const videoId = formData.get("videoId") as string;

  const processedVideoId = extractYouTubeID(videoId);

  if (!processedVideoId) {
    toast.error("Invalid Youtube Video ID");
    setLoading(false);
    setValue("");
    setError({
      ...INITIAL_STATE,
      message: "Invalid Youtube Video ID",
      name: "Invalid Id",
    });
    return;
  }

  toast.success("Generating Summary");

  const summaryResponseData = await generateSummaryService(processedVideoId);
  console.log(summaryResponseData, "Response from route handler");

  if (summaryResponseData.error) {
    setValue("");
    toast.error(summaryResponseData.error);
    setError({
      ...INITIAL_STATE,
      message: summaryResponseData.error,
      name: "Summary Error",
    });
    setLoading(false);
    return;
  }

  toast.success("Testing Toast");
  setLoading(false);
}

Now, let's test our form. Make sure to provide a valid YouTube video ID or URL and set credits to 0.

Excellent, it is working. Now, we are ready to implement our logic to get our summary. Let's do it.

Generate Summary with LangChain and OpenAI in Next.js 15

Now, let's write our logic to handle the generation of our summary with OpenAi and LangChain.

If you never used LangChain before, it is a tool that helps you simplify building AI-powered apps. You can learn about it here.

Before starting, install the following packages @langchain/openai and langchain with the following command.

yarn add @langchain/core @langchain/openai

Nice. Now, let's make the following changes in our route handler: Navigate to src/app/api/summarize/route.ts and make the following changes.

First, let's import all the required dependencies.

import { ChatOpenAI } from "@langchain/openai";
import { PromptTemplate } from "@langchain/core/prompts";
import { StringOutputParser } from "@langchain/core/output_parsers";

Now, let's create our generateSummary function.

async function generateSummary(content: string, template: string) {
  const prompt = PromptTemplate.fromTemplate(template);

  const model = new ChatOpenAI({
    openAIApiKey: process.env.OPENAI_API_KEY,
    modelName: process.env.OPENAI_MODEL ?? "gpt-4o-mini",
    temperature: process.env.OPENAI_TEMPERATURE
      ? parseFloat(process.env.OPENAI_TEMPERATURE)
      : 0.7,
    maxTokens: process.env.OPENAI_MAX_TOKENS
      ? parseInt(process.env.OPENAI_MAX_TOKENS)
      : 4000,
  });

  const outputParser = new StringOutputParser();
  const chain = prompt.pipe(model).pipe(outputParser);

  try {
    const summary = await chain.invoke({ text: content });
    return summary;
  } catch (error) {
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error.message }));
    return new Response(
      JSON.stringify({ error: "Failed to generate summary." })
    );
  }
}

Now, let's create a prompt template.

const TEMPLATE = `
INSTRUCTIONS: 
  For the this {text} complete the following steps.
  Generate the title for based on the content provided
  Summarize the following content and include 5 key topics, writing in first person using normal tone of voice.

  Write a youtube video description
    - Include heading and sections.  
    - Incorporate keywords and key takeaways

  Generate bulleted list of key points and benefits

  Return possible and best recommended key words
`;

You can change the template accordingly to suit your needs.

Let's use the generateSummary function inside our POST function. Update the code with the following.

The updated POST function should look like the following.

export async function POST(req: NextRequest) {
  const user = await getUserMeLoader();
  const token = await getAuthToken();

  if (!user.ok || !token) {
    return new Response(
      JSON.stringify({ data: null, error: "Not authenticated" }),
      { status: 401 }
    );
  }

  if (user.data.credits < 1) {
    return new Response(
      JSON.stringify({
        data: null,
        error: "Insufficient credits",
      }),
      { status: 402 }
    );
  }

  const body = await req.json();
  const videoId = body.videoId;
  const url = `https://deserving-harmony-9f5ca04daf.strapiapp.com/utilai/yt-transcript/${videoId}`;

  let transcriptData;

  try {
    const transcript = await fetch(url);
    transcriptData = await transcript.text();
  } catch (error) {
    console.error("Error processing request:", error);
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error.message }));
    return new Response(JSON.stringify({ error: "Unknown error" }));
  }

  let summary: Awaited<ReturnType<typeof generateSummary>>;

  try {
    summary = await generateSummary(transcriptData, TEMPLATE);
    return new Response(JSON.stringify({ data: summary, error: null }));
  } catch (error) {
    console.error("Error processing request:", error);
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error.message }));
    return new Response(JSON.stringify({ error: "Error generating summary." }));
  }
}

In the code above, we implemented our generateSummary function, which will generate our summary and send it back to you via our form. We will also create a server action responsible for saving our data into our Strapi backend.

The complete code in the route.ts file should look like the following.

import { NextRequest } from "next/server";
import { getUserMeLoader } from "@/data/services/get-user-me-loader";
import { getAuthToken } from "@/data/services/get-token";

import { ChatOpenAI } from "@langchain/openai";
import { PromptTemplate } from "@langchain/core/prompts";
import { StringOutputParser } from "@langchain/core/output_parsers";

const TEMPLATE = `
INSTRUCTIONS: 
  For the this {text} complete the following steps.
  Generate the title for based on the content provided
  Summarize the following content and include 5 key topics, writing in first person using normal tone of voice.

  Write a youtube video description
    - Include heading and sections.  
    - Incorporate keywords and key takeaways

  Generate bulleted list of key points and benefits

  Return possible and best recommended key words
`;

async function generateSummary(content: string, template: string) {
  const prompt = PromptTemplate.fromTemplate(template);

  const model = new ChatOpenAI({
    openAIApiKey: process.env.OPENAI_API_KEY,
    modelName: process.env.OPENAI_MODEL ?? "gpt-4o-mini",
    temperature: process.env.OPENAI_TEMPERATURE
      ? parseFloat(process.env.OPENAI_TEMPERATURE)
      : 0.7,
    maxTokens: process.env.OPENAI_MAX_TOKENS
      ? parseInt(process.env.OPENAI_MAX_TOKENS)
      : 4000,
  });

  const outputParser = new StringOutputParser();
  const chain = prompt.pipe(model).pipe(outputParser);

  try {
    const summary = await chain.invoke({ text: content });
    return summary;
  } catch (error) {
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error.message }));
    return new Response(
      JSON.stringify({ error: "Failed to generate summary." })
    );
  }
}

export async function POST(req: NextRequest) {
  const user = await getUserMeLoader();
  const token = await getAuthToken();

  if (!user.ok || !token) {
    return new Response(
      JSON.stringify({ data: null, error: "Not authenticated" }),
      { status: 401 }
    );
  }

  if (user.data.credits < 1) {
    return new Response(
      JSON.stringify({
        data: null,
        error: "Insufficient credits",
      }),
      { status: 402 }
    );
  }

  const body = await req.json();
  const videoId = body.videoId;
  const url = `https://deserving-harmony-9f5ca04daf.strapiapp.com/utilai/yt-transcript/${videoId}`;

  let transcriptData;

  try {
    const transcript = await fetch(url);
    transcriptData = await transcript.text();
  } catch (error) {
    console.error("Error processing request:", error);
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error.message }));
    return new Response(JSON.stringify({ error: "Unknown error" }));
  }

  let summary: Awaited<ReturnType<typeof generateSummary>>;

  try {
    summary = await generateSummary(transcriptData, TEMPLATE);
    return new Response(JSON.stringify({ data: summary, error: null }));
  } catch (error) {
    console.error("Error processing request:", error);
    if (error instanceof Error)
      return new Response(JSON.stringify({ error: error.message }));
    return new Response(JSON.stringify({ error: "Error generating summary." }));
  }
}

Before we test our form, let's add our Open AI API key to our .env.local file and add your Open AI API key.

WARNING: Ensure your .gitignore file ignores the .env*.local file from your commit so you don't leak your Open AI key.

# local env files
.env*.local

OPENAI_API_KEY=ADD_YOUR_KEY_HERE

Let's test our form and see if we can get our summary. Make sure to add some credits to your user.

Excellent. We can see our output on the console.

**Title:** Quickstart Guide to Launching Your Project with Strapi in Just 3 Minutes

**YouTube Video Description:**

**Heading:** Fast Track Your Development with Strapi: A 3-Minute Quickstart Guide

**Introduction:**
Join me today as we explore how to get your project up and running with Strapi in just three minutes! Strapi is an open-source headless CMS that simplifies the process of building, managing, and deploying content. Whether you're a developer, content creator, or project manager, this guide is designed to help you kickstart your project effortlessly.

**Sections:**

- **Setting Up Your Strapi Project:**
  - Learn how to create a new Strapi project using the quickstart command to leverage default configurations, including setting up an SQLite database.

Rest of summary...

Now that we know we are getting our summary, the last step is to save it to Strapi and deduct 1 credit.

Saving Our Summary To Strapi

First, create a new collection-type in Strapi admin to save our summary.

Navigate to the content builder page and create a new collection named Summary with the following fields.

Let's add the following fields.

Name	Field	Type
videoId	Text	Short Text
title	Text	Short Text
summary	Rich Text	Markdown
authorId	Text	Short Text

You can make a relations between the Summary and User collection types. But in this case we will only use the authorId field to store the documentId of the user who created the summary.

This way we don't need to expose the user api which is something we would have to do if we were to make a relations between the Summary and User collection types.

So whenever we want to find all summaries for a user, we can simply query the Summary collection type and filter by the authorId field.

Here is what the final fields will look like.

Now, navigate to Setting and add the following permissions.

Now that we have our Summary collection-type, let's create a server action to save our data to Strapi.

Let's start by navigating to srs/data/actions, creating a new file called summary-actions.ts, and adding the following code.

"use server";

import { getAuthToken } from "@/data/services/get-token";
import { mutateData } from "@/data/services/mutate-data";
import { redirect } from "next/navigation";

interface Payload {
  data: {
    title?: string;
    videoId: string;
    summary: string;
  };
}

export async function createSummaryAction(payload: Payload) {
  const authToken = await getAuthToken();
  if (!authToken) throw new Error("No auth token found");

  const data = await mutateData("POST", "/api/summaries", payload);
  redirect("/dashboard/summaries/" + data.data.documentId);
}

Now that we have our createSummaryAction, let's use it in our handleFormSubmit, found in our form named summary-form.tsx.

First, let's import our newly created action.

import { createSummaryAction } from "@/data/actions/summary-actions";

Update the handleFormSubmit with the following code.

async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  setLoading(true);

  const formData = new FormData(event.currentTarget);
  const videoId = formData.get("videoId") as string;

  const processedVideoId = extractYouTubeID(videoId);

  if (!processedVideoId) {
    toast.error("Invalid Youtube Video ID");
    setLoading(false);
    setValue("");
    setError({
      ...INITIAL_STATE,
      message: "Invalid Youtube Video ID",
      name: "Invalid Id",
    });
    return;
  }

  toast.success("Generating Summary");

  const summaryResponseData = await generateSummaryService(processedVideoId);

  if (summaryResponseData.error) {
    setValue("");
    toast.error(summaryResponseData.error);
    setError({
      ...INITIAL_STATE,
      message: summaryResponseData.error,
      name: "Summary Error",
    });
    setLoading(false);
    return;
  }

  const payload = {
    data: {
      title: `Summary for video: ${processedVideoId}`,
      videoId: processedVideoId,
      summary: summaryResponseData.data,
    },
  };

  try {
    await createSummaryAction(payload);
    toast.success("Summary Created");
    // Reset form after successful creation
    setValue("");
    setError(INITIAL_STATE);
  } catch (error) {
    let errorMessage =
      "An unexpected error occurred while creating the summary";

    if (error instanceof Error) {
      errorMessage = error.message;
    } else if (typeof error === "string") {
      errorMessage = error;
    }

    toast.error(errorMessage);
    setError({
      message: errorMessage,
      name: "Summary Error",
    });
    setLoading(false);
    return;
  }
  setLoading(false);
}

The above code will be responsible for saving our data into Strapi.

Let's do a quick test and see if it works. We should be redirected to our summaries route, which we have yet to create, so we will get our not found page. This is okay, and we will fix it soon.

But you should see your data in your Strapi Admin.

You will notice that we are not setting our user or deducting one credit on creation. We will do this in Strapi by creating custom middleware. But first, let's finish all of our Next.js UI.

Create Summary Page Card View

Let's navigate to our dashboard folder. Inside, create another folder named summaries with a page.tsx file and paste it into the following code.

import Link from "next/link";
import { getSummaries } from "@/data/loaders";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface LinkCardProps {
  documentId: string;
  title: string;
  summary: string;
}

function LinkCard({ documentId, title, summary }: Readonly<LinkCardProps>) {
  return (
    <Link href={`/dashboard/summaries/${documentId}`}>
      <Card className="relative">
        <CardHeader>
          <CardTitle className="leading-8 text-pink-500">
            {title || "Video Summary"}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="w-full mb-4 leading-7">
            {summary.slice(0, 164) + " [read more]"}
          </p>
        </CardContent>
      </Card>
    </Link>
  );
}

export default async function SummariesRoute() {
  const { data } = await getSummaries();
  if (!data) return null;
  return (
    <div className="grid grid-cols-1 gap-4 p-4">
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {data.map((item: LinkCardProps) => (
          <LinkCard key={item.documentId} {...item} />
        ))}
      </div>
    </div>
  );
}

Before this component works, we must create the getSummaries function to load our data.

Let's navigate to our loaders.ts file and make the following changes.

First, import the following method to give us access to our auth token for authorized requests.

import { getAuthToken } from "./services/get-token";

Next, update the fetchData function with the following code.

async function fetchData(url: string) {
  const authToken = await getAuthToken();

  const headers = {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${authToken}`,
    },
  };

  try {
    const response = await fetch(url, authToken ? headers : {});
    const data = await response.json();
    return flattenAttributes(data);
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error;
  }
}

Now, let's add this code at the end of the file to get our summaries.

export async function getSummaries() {
  const url = new URL("/api/summaries", baseUrl);
  return await fetchData(url.href);
}

Now, we need to update the following permissions in the Strapi dashboard.

Under Settings => User Permissions => Roles => Authenticated, set the Global and Home-page checkboxes to checked.

Restart your application, and you should now be able to view the list.

Before we create the Single Card view, let's create a component that will display our markdown in a readable format.

We will use a package called react-markdown to display our markdown. You can find it here.

And install it with the following command.

 yarn add react-markdown

After installing react-markdown, let's update our summaries/page.tsx file to use it.

We will make the following change here.

<CardContent>
  <p className="w-full mb-4 leading-7">
    {summary.slice(0, 164) + " [read more]"}
  </p>
</CardContent>

And update to the following.

<CardContent>
  <ReactMarkdown
    className="card-markdown prose prose-sm max-w-none
              prose-headings:text-gray-900 prose-headings:font-semibold
              prose-p:text-gray-600 prose-p:leading-relaxed
              prose-a:text-pink-500 prose-a:no-underline hover:prose-a:underline
              prose-strong:text-gray-900 prose-strong:font-semibold
              prose-ul:list-disc prose-ul:pl-4
              prose-ol:list-decimal prose-ol:pl-4"
  >
    {summary.slice(0, 164) + " [read more]"}
  </ReactMarkdown>
</CardContent>

We are styling it with Tailwind in line. For this to work,you will need to install the @tailwindcss/typography package.

yarn add @tailwindcss/typography

And update your tailwind.config.ts in the plugins array with the following code.

  plugins: [
    require("tailwindcss-animate"),
    require("@tailwindcss/typography"),
  ],

It should now look a bit nicer, feel free to style it more. I will show you another example of this soon.

But first, let's create the Single Card view.

First, we will create a dynamic route; you can learn more about dynamic routes in Next.Js docs here.

"Dynamic Routes are pages that allow you to add custom params to your URLs."

Create a new folder called [videoId] inside the summaries folder.

Inside our newly created dynamic route, create a file named layout.tsx with the following code.

import { extractYouTubeID } from "@/lib/utils";

export default async function SummarySingleRoute({
  params,
  children,
}: {
  readonly params: any;
  readonly children: React.ReactNode;
}) {
  return (
    <div>
      <div className="h-full grid gap-4 grid-cols-5 p-4">
        <div className="col-span-3">{children}</div>
        <div className="col-span-2">
          <div>
            <p>Video will go here</p>
          </div>
        </div>
      </div>
    </div>
  );
}

Create another file called page.tsx file with the following.

interface ParamsProps {
  params: {
    videoId: string;
  };
}

export default async function SummaryCardRoute({
  params,
}: Readonly<ParamsProps>) {
  return <p>Summary card with go here: {params.videoId}</p>;
}

The above code will give us a warning in Next 15.

Error: Route "/dashboard/summaries/[videoId]" used `params.videoId`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

You can read more about it here

Let's run the following command to fix it. Just make sure you save or stash all your changes.

npx @next/codemod@canary next-async-request-api

➜  frontend git:(main) npx @next/codemod@canary next-async-request-api
✔ On which files or directory should the codemods be applied? … .
Executing command: jscodeshift --no-babel --ignore-pattern=**/node_modules/** --ignore-pattern=**/.next/** --extensions=tsx,ts,jsx,js --transform /Users/paulbratslavsky/.npm/_npx/6a090669e21b4303/node_modules/@next/codemod/transforms/next-async-request-api.js .
Processing 53 files...
Spawning 7 workers...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 5 files to free worker...
All done.
Results:
0 errors
52 unmodified
0 skipped
1 ok
Time elapsed: 0.479seconds

and refactor the code to the following.

export default async function SummaryCardRoute(props: Readonly<ParamsProps>) {
  const params = await props?.params;
  const { videoId } = params;
  return <p>Summary card with go here: {videoId}</p>;
}

Now the warning should be gone. Let's continue.

Now when you click on the summary card, you should be navigated to the single summary view and see our placeholder text.

Now that we know our pages work, let's create the loaders to get the appropriate data.

Fetching And Displaying Our Single Video and Summary

Let's start by navigating our loaders.ts file and adding the following functions.

export async function getSummaryById(summaryId: string) {
  return fetchData(`${baseUrl}/api/summaries/${summaryId}`);
}

Now, before using our getSummaryById function, let's install our video player. We will use React Player that you can find here.

Let's start by installing it with the following command.

yarn add react-player

Let's create a wrapper component using our React Player inside the components/custom folder. Create a new folder called client-youtube-player and inside create two files youtube-player.tsx and index.tsx and add the following code.

youtube-player.tsx

"use client";

import ReactPlayer from "react-player/youtube";

function generateYouTubeUrl(videoId: string) {
  const baseUrl = new URL("https://www.youtube.com/watch");
  baseUrl.searchParams.append("v", videoId);
  return baseUrl.href;
}

interface YouTubePlayerProps {
  videoId: string;
}

export default function YouTubePlayer({
  videoId,
}: Readonly<YouTubePlayerProps>) {
  if (!videoId) return null;
  const videoUrl = generateYouTubeUrl(videoId);

  return (
    <div className="relative aspect-video rounded-md overflow-hidden">
      <ReactPlayer
        url={videoUrl}
        width="100%"
        height="100%"
        controls
        className="absolute top-0 left-0"
      />
    </div>
  );
}

index.tsx

"use client";

import dynamic from "next/dynamic";

const YouTubePlayer = dynamic(
  () => import("@/components/custom/client-youtube-player/youtube-player"),
  { ssr: false }
);

export default function ClientYouTubePlayer({ videoId }: { videoId: string }) {
  return <YouTubePlayer videoId={videoId} />;
}

In the code above, we use dynamic to disable SSR, which helps avoid issues when using some client-side components. In this blog post, you can read more here.

Next.js docs reference on solving hydration issues here

Now that we have our React Player let's update the layout.tsx file using the following code.

import { extractYouTubeID } from "@/lib/utils";
import { getSummaryById } from "@/data/loaders";
import ClientYouTubePlayer from "@/components/custom/client-youtube-player";

export default async function SummarySingleRoute({
  params,
  children,
}: {
  readonly params: any;
  readonly children: React.ReactNode;
}) {
  const { videoId } = await params;
  const data = await getSummaryById(videoId);
  if (data?.error?.status === 404) return <p>No Items Found</p>;
  const videoYTId = extractYouTubeID(data.data.videoId);

  return (
    <div>
      <div className="h-full grid gap-4 grid-cols-5 p-4">
        <div className="col-span-3">{children}</div>
        <div className="col-span-2">
          <ClientYouTubePlayer videoId={videoYTId as string} />
        </div>
      </div>
    </div>
  );
}

Now, let's display our summary.

Let's first create a new file called summary-card-form.tsx. We can add it to our src/components/forms folder and paste it into the following code.

We are using Tabs component to switch between the preview and markdown editor. So make sure to install it by running the following command.

npx shadcn@latest add tabs

/// import { updateSummaryAction, deleteSummaryAction } from "@/data/actions/summary-actions";
import { cn } from "@/lib/utils";

import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

import { SubmitButton } from "@/components/custom/submit-button";
import ReactMarkdown from "react-markdown";
// import { DeleteButton } from "@/components/custom/delete-button";

export function SummaryCardForm({
  item,
  className,
}: {
  readonly item: any;
  readonly className?: string;
}) {
  // const deleteSummaryById = deleteSummaryAction.bind(null, item.documentId);

  return (
    <Card className={cn("mb-8 relative h-auto", className)}>
      <CardHeader>
        <CardTitle>Video Summary</CardTitle>
      </CardHeader>
      <CardContent>
        <div>
          <form>
            <Input
              id="title"
              name="title"
              placeholder="Update your title"
              required
              className="mb-4"
              defaultValue={item.title}
            />
            <div className="flex-1 flex flex-col">
              <Tabs
                defaultValue="preview"
                className="flex flex-col h-full gap-2"
              >
                <TabsList className="grid w-full grid-cols-2">
                  <TabsTrigger value="preview">Preview</TabsTrigger>
                  <TabsTrigger value="markdown">Edit Markdown</TabsTrigger>
                </TabsList>
                <TabsContent value="preview" className="flex-1">
                  <ReactMarkdown
                    className="
                    markdown-preview
                    relative w-full h-[600px]
                    overflow-auto scroll-smooth
                    p-4 px-3 py-2
                    text-sm
                    bg-white dark:bg-gray-800 bg-transparent
                    border border-gray-300 dark:border-gray-700
                    rounded-md
                    shadow-sm
                    mb-4
                    placeholder:text-muted-foreground
                    focus-visible:outline-none
                    focus-visible:bg-gray-50
                    focus-visible:ring-1
                    focus-visible:ring-ring
                    disabled:cursor-not-allowed
                    disabled:opacity-50
                  "
                  >
                    {item.summary}
                  </ReactMarkdown>
                </TabsContent>
                <TabsContent value="markdown" className="flex-1">
                  <Textarea
                    name="summary"
                    className="
                      markdown-preview
                      relative w-full h-[600px]
                      overflow-auto scroll-smooth
                      p-4 px-3 py-2
                      text-sm
                      bg-white dark:bg-gray-800 bg-transparent
                      border border-gray-300 dark:border-gray-700
                      rounded-md
                      shadow-sm
                      mb-4
                      placeholder:text-muted-foreground
                      focus-visible:outline-none
                      focus-visible:bg-gray-50
                      focus-visible:ring-1
                      focus-visible:ring-ring
                      disabled:cursor-not-allowed
                      disabled:opacity-50
                    "
                    defaultValue={item.summary}
                  />
                </TabsContent>
              </Tabs>
            </div>
            <input type="hidden" name="id" value={item.documentId} />
            <SubmitButton
              text="Update Summary"
              loadingText="Updating Summary"
            />
          </form>
          <form>
            {/* <DeleteButton className="absolute right-4 top-4 bg-red-700 hover:bg-red-600" /> */}
          </form>
        </div>
      </CardContent>
      <CardFooter></CardFooter>
    </Card>
  );
}

Keep in mind that in the ReactMarkdown component, we are passing tailwind classes for basic styling.

We are also passing a class name markdown-preview to the ReactMarkdown component.

In order to get the styling, we will need to add the following to our globals.css file.

/* ************************** */
/* markdown preview start */
/* ************************** */

.markdown-preview {
  @apply text-base;
  @apply overflow-auto;
}

.markdown-preview h1 {
  @apply text-3xl font-bold mt-6 mb-4;
}

.markdown-preview h2 {
  @apply text-2xl font-semibold mt-5 mb-3;
}

.markdown-preview h3 {
  @apply text-xl font-medium mt-4 mb-2;
}

.markdown-preview p {
  @apply mb-4;
}

.markdown-preview ul,
.markdown-preview ol {
  @apply ml-6 mb-4;
}

.markdown-preview ul {
  @apply list-disc;
}

.markdown-preview ol {
  @apply list-decimal;
}

.markdown-preview li {
  @apply mb-2;
}

.markdown-preview a {
  @apply text-blue-600 hover:underline;
}

.markdown-preview blockquote {
  @apply border-l-4 border-gray-300 pl-4 italic my-4;
}

.markdown-preview code {
  @apply bg-gray-100 rounded px-1 py-0.5 font-mono text-sm;
}

.markdown-preview pre {
  @apply bg-gray-100 rounded p-4 overflow-x-auto mb-4;
}

.markdown-preview pre code {
  @apply bg-transparent p-0;
}

.markdown-preview table {
  @apply w-full border-collapse mb-4;
}

.markdown-preview th,
.markdown-preview td {
  @apply border border-gray-300 px-4 py-2;
}

.markdown-preview th {
  @apply bg-gray-100 font-semibold;
}

.markdown-preview img {
  @apply max-w-full h-auto my-4;
}

.markdown-preview hr {
  @apply my-8 border-t border-gray-300;
}

/* ************************** */
/* markdown preview end       */
/* ************************** */

Nice.

Also, notice that we are using a new component, DeleteButton. Let's create it inside our components/custom folder. Create a delete-button.tsx file and add the following code.

"use client";
import { useFormStatus } from "react-dom";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { TrashIcon } from "lucide-react";
import { Loader2 } from "lucide-react";

function Loader() {
  return (
    <div className="flex items-center">
      <Loader2 className="h-4 w-4 animate-spin" />
    </div>
  );
}

interface DeleteButtonProps {
  className?: string;
}

export function DeleteButton({ className }: Readonly<DeleteButtonProps>) {
  const status = useFormStatus();
  return (
    <Button
      type="submit"
      aria-disabled={status.pending}
      disabled={status.pending}
      className={cn(className)}
    >
      {status.pending ? <Loader /> : <TrashIcon className="w-4 h-4" />}
    </Button>
  );
}

Let's update our page.tsx file with the following code.

import { getSummaryById } from "@/data/loaders";
import { SummaryCardForm } from "@/components/custom/summary-card-form";

interface ParamsProps {
  params: {
    videoId: string;
  };
}

export default async function SummaryCardRoute(props: Readonly<ParamsProps>) {
  const params = await props?.params;
  const { videoId } = params;
  const data = await getSummaryById(videoId);
  return <SummaryCardForm item={data.data} />;
}

Nice. Everything works.

Using Strapi Route Middleware To Set User/Summary Relation

When creating our summary, we will set the summary/user relation on the backend, where we can confirm the logged-in user creating the content.

This will prevent anyone from the front end from passing a user ID that is not their own.

We are also not handling user credit updates; let's do that in the middleware.

What is a route middleware

In Strapi, a route middleware is a type of middleware that has a more limited scope compared to global middlewares.

They control the request flow and can change the request itself before moving forward.

Now that we know our front end works. Let's revisit our route handler.
They can also be used to control access to a route and perform additional logic.

For example, they can be used instead of policies to control access to an endpoint. They could modify the context before passing it down to further core elements of the Strapi server.

You can learn more about route middlewares here.

Let's first start by creating our route middleware.

We can use our cli command. In your backend folder, run the following command.

yarn strapi generate

Choose to generate a middleware option.

➜  backend git:(main) ✗ yarn strapi generate
yarn run v1.22.22
$ strapi generate
? Strapi Generators
  api - Generate a basic API
  controller - Generate a controller for an API
  content-type - Generate a content type for an API
  policy - Generate a policy for an API
❯ middleware - Generate a middleware for an API
  migration - Generate a migration
  service - Generate a service for an API

Let's call it on-summary-create and add it to an existing API. Which will be summary

? Strapi Generators middleware - Generate a middleware for an API
? Middleware name on-summary-create
? Where do you want to add this middleware?
  Add middleware to root of project
❯ Add middleware to an existing API
  Add middleware to an existing plugin

$ strapi generate
? Strapi Generators middleware - Generate a middleware for an API
? Middleware name on-summary-create
? Where do you want to add this middleware? Add middleware to an existing API
? Which API is this for?
  global
  home-page
❯ summary

Now, let's take a look in the following folder: backend/src/api/summary/middlewares. You should see the following file: on-summary-create with the following boilerplate.

/**
 * `on-summary-create` middleware
 */

import type { Core } from "@strapi/strapi";

export default (config, { strapi }: { strapi: Core.Strapi }) => {
  // Add your own logic here.
  return async (ctx, next) => {
    strapi.log.info("In on-summary-create middleware.");

    await next();
  };
};

Let's update it with the following code.

/**
 * `on-summary-create` middleware
 */

import type { Core } from "@strapi/strapi";

export default (config, { strapi }: { strapi: Core.Strapi }) => {
  return async (ctx, next) => {
    const user = ctx.state.user;
    if (!user) return ctx.unauthorized("You are not authenticated");

    const availableCredits = user.credits;
    if (availableCredits === 0)
      return ctx.unauthorized("You do not have enough credits.");

    console.log("############ Inside middleware end #############");

    // ADD THE AUTHOR ID TO THE BODY
    const modifiedBody = {
      ...ctx.request.body,
      data: {
        ...ctx.request.body.data,
        authorId: ctx.state.user.documentId,
      },
    };

    ctx.request.body = modifiedBody;

    await next();

    // UPDATE THE USER'S CREDITS
    try {
      await strapi.documents("plugin::users-permissions.user").update({
        documentId: user.documentId,
        data: {
          credits: availableCredits - 1,
        },
      });
    } catch (error) {
      ctx.badRequest("Error Updating User Credits");
    }

    console.log("############ Inside middleware end #############");
  };
};

In the code above, we add the authorId to the body and deduct one credit from the user.

Before testing it out, we have to enable it inside our route.

You can learn more about Strapi's routes here.

Navigate to the backend/src/api/summary/routes/summary.js file and update with the following.

/**
 * summary router
 */

import { factories } from "@strapi/strapi";

export default factories.createCoreRouter("api::summary.summary", {
  config: {
    create: {
      middlewares: ["api::summary.on-summary-create"],
    },
  },
});

Now, our middleware will fire when we create a new summary.

Now, restart your Strapi backend and Next.js frontend and create a new summary.

You will see that we are now setting our user data.

Conclusion

In this part of our Next.js 15 tutorial series, we tackled generating video summaries using Open AI and LangChain, a highlight feature for our Next.js app.

We built a SummaryForm component to handle user submissions and explored Next.js API routes for server-side logic.

We then leveraged OpenAI to summarize video transcripts, demonstrating the practical use of AI in web development.

In the next post, we will examine our summary details page and discuss updating and deleting posts.

As well as how to add policies to ensure that our user can only modify their content.

Hope you are enjoying this series as much as I am making it.

If you have any questions, feel free to stop by at our Discord Community for our daily "open office hours" from 12:30 PM CST to 1:30 PM CST.

If you have a suggestion or find a mistake in the post, please open an issue on the GitHub repository.

You can also find the blog post content in the Strapi Blog.

Feel free to make PRs to fix any issues you find in the project, or let me know if you have any questions.

Happy coding!

Paul

Epic Next JS 15 Tutorial Part 5: File upload using server actions

Paul Bratslavsky — Thu, 04 Apr 2024 19:06:25 +0000

In the previous tutorial, we finished our Home Page, so we will build out our Sign In and Sign Up Pages and hook up the logic to allow us to sign in and sign up.

Part 1: Learn Next.js by building a website
Part 2: Building Out The Hero Section of the homepage
Part 3: Finishup up the homepage Features Section, TopNavigation and Footer
Part 4: How to handle login and Authentication in Next.js
Part 5: Building out the Dashboard page and upload file using NextJS server actions
Part 6: Get Video Transcript with OpenAI Function
Part 7: Strapi CRUD permissions
Part 8: Search & pagination in Nextjs
Part 9: Backend deployment to Strapi Cloud
Part 10: Frontend deployment to Vercel

Welcome to the next part of our React tutorial with Next.js. In the last post, we finished our Signup & Signin Page with authentication using HTTPOnly cookies and saw how to protect our routes via Next.js middleware.

In this section, we will be working on completing our Dashboard and Profile Page, where we will look at uploading files using NextJs server actions. At the end of the tutorial, you should be able to perform any file upload, handling of forms and server actions in Next.Js 14.

Currently, our Dashboard Page looks like the following. Let's create a layout.tsx page to give our page shared styling.

Navigate to src/app/dashboard, create a file called layout.tsx, and add the following code.

import Link from "next/link";

export default function DashboardLayout({
  children,
}: {
  readonly children: React.ReactNode;
}) {
  return (
    <div className="h-screen grid grid-cols-[240px_1fr]">
      <nav className="border-r bg-gray-100/40 dark:bg-gray-800/40">
        <div className="flex h-full max-h-screen flex-col gap-2">
          <div className="flex h-[60px] items-center border-b px-6">
            <Link
              className="flex items-center gap-2 font-semibold"
              href="/dashboard"
            >
              <LayoutDashboardIcon className="h-6 w-6" />
              <span className="">Dashboard</span>
            </Link>
          </div>
          <div className="flex-1 overflow-auto py-2">
            <nav className="grid items-start px-4 text-sm font-medium">
              <Link
                className="flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
                href="/dashboard/summaries"
              >
                <ViewIcon className="h-4 w-4" />
                Summaries
              </Link>

              <Link
                className="flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
                href="/dashboard/account"
              >
                <UsersIcon className="h-4 w-4" />
                Account
              </Link>
            </nav>
          </div>
        </div>
      </nav>
      <main className="flex flex-col overflow-scroll">{children}</main>
    </div>
  );
}

function LayoutDashboardIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect width="7" height="9" x="3" y="3" rx="1" />
      <rect width="7" height="5" x="14" y="3" rx="1" />
      <rect width="7" height="9" x="14" y="12" rx="1" />
      <rect width="7" height="5" x="3" y="16" rx="1" />
    </svg>
  );
}

function PieChartIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
      <path d="M22 12A10 10 0 0 0 12 2v10z" />
    </svg>
  );
}

function UsersIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
    </svg>
  );
}

function ViewIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M5 12s2.545-5 7-5c4.454 0 7 5 7 5s-2.546 5-7 5c-4.455 0-7-5-7-5z" />
      <path d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
      <path d="M21 17v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2" />
      <path d="M21 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2" />
    </svg>
  );
}

Your updated UI should look like the following.

Updating Top Header To Include Username and Logout Button

Currently, our Top Header does not show the user who is logged in when we are logged in. Let's go ahead and update it.

Navigate to src/components/custom/header.tsx and make the following changes.

First, let's import our getUserMeLoader, a function we created in the previous video to retrieve our users' data if they are logged in.

import { getUserMeLoader } from "@/data/services/get-user-me-loader";

Next, let's call it inside our Header component with the following.

const user = await getUserMeLoader();
console.log(user);

If you are logged in, you should see your user data in the console.

{
  ok: true,
  data: {
    id: 3,
    username: 'testuser',
    email: 'testuser@email.com',
    provider: 'local',
    confirmed: true,
    blocked: false,
    createdAt: '2024-03-23T20:32:32.978Z',
    updatedAt: '2024-03-23T20:32:32.978Z'
  },
  error: null
}

We can use the ok key to conditionally render our Sign Up button or the user's Name and Logout Button.

Before we can do that, let's import our Logout Button first with the following.

import { LogoutButton } from "./logout-button";

Now, let's create a simple component showing the logout button and the user name. The code is in the following snippet.

interface AuthUserProps {
  username: string;
  email: string;
}

export function LoggedInUser({
  userData,
}: {
  readonly userData: AuthUserProps;
}) {
  return (
    <div className="flex gap-2">
      <Link
        href="/dashboard/account"
        className="font-semibold hover:text-primary"
      >
        {userData.username}
      </Link>
      <LogoutButton />
    </div>
  );
}

Now, let's update the following code.

<div className="flex items-center gap-4">
  <Link href={ctaButton.url}>
    <Button>{ctaButton.text}</Button>
  </Link>
</div>

And replace them with the new changes.

<div className="flex items-center gap-4">
  {user.ok ? (
    <LoggedInUser userData={user.data} />
  ) : (
    <Link href={ctaButton.url}>
      <Button>{ctaButton.text}</Button>
    </Link>
  )}
</div>

Let's also add the following to check if there is no header data, and display this message.

if (!data) return <div>No Header Data</div>;

We will keep this basic check but feel free to add more robust checks if you like.

The completed code in our header.tsx file should look like the following.

import Link from "next/link";

import { getUserMeLoader } from "@/data/services/get-user-me-loader";

import { Logo } from "@/components/custom/logo";
import { Button } from "@/components/ui/button";
import { LogoutButton } from "./logout-button";

interface HeaderProps {
  data: {
    logoText: {
      id: number;
      text: string;
      url: string;
    };
    ctaButton: {
      id: number;
      text: string;
      url: string;
    };
  };
}

interface AuthUserProps {
  username: string;
  email: string;
}

export function LoggedInUser({
  userData,
}: {
  readonly userData: AuthUserProps;
}) {
  return (
    <div className="flex gap-2">
      <Link
        href="/dashboard/account"
        className="font-semibold hover:text-primary"
      >
        {userData.username}
      </Link>
      <LogoutButton />
    </div>
  );
}

export async function Header({ data }: Readonly<HeaderProps>) {
  const { logoText, ctaButton } = data;
  const user = await getUserMeLoader();

  return (
    <div className="flex items-center justify-between px-4 py-3 bg-white shadow-md dark:bg-gray-800">
      <Logo text={logoText.text} />
      <div className="flex items-center gap-4">
        {user.ok ? (
          <LoggedInUser userData={user.data} />
        ) : (
          <Link href={ctaButton.url}>
            <Button>{ctaButton.text}</Button>
          </Link>
        )}
      </div>
    </div>
  );
}

Nice. Now, when you are logged in, you should see the username and Logout Buttons.

Let's make another quick change in our hero-section.tsx file, which is in the src/components/custom folder.

The cool part about React Server Components is that they can be responsible for their own data. Let's update it so that if the user is Logged In, they will see the button to take them to the Dashboard.

Let's make the following changes.

import Link from "next/link";
import { getUserMeLoader } from "@/data/services/get-user-me-loader";
import { StrapiImage } from "@/components/custom/strapi-image";

interface Image {
  id: number;
  documentId: string;
  url: string;
  alternativeText: string | null;
}

interface Link {
  id: number;
  url: string;
  text: string;
}

interface HeroSectionProps {
  id: number;
  documentId: string;
  __component: string;
  heading: string;
  subHeading: string;
  image: Image;
  link: Link;
}

export async function HeroSection({
  data,
}: {
  readonly data: HeroSectionProps;
}) {
  const user = await getUserMeLoader();
  const userLoggedIn = user?.ok;

  const { heading, subHeading, image, link } = data;
  const linkUrl = userLoggedIn ? "/dashboard" : link.url;

  return (
    <header className="relative h-[600px] overflow-hidden">
      <StrapiImage
        alt={image.alternativeText ?? "no alternative text"}
        className="absolute inset-0 object-cover w-full h-full aspect/16:9"
        src={image.url}
        height={1080}
        width={1920}
      />
      <div className="relative z-10 flex flex-col items-center justify-center h-full text-center text-white bg-black bg-opacity-40">
        <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl">
          {heading}
        </h1>
        <p className="mt-4 text-lg md:text-xl lg:text-2xl">{subHeading}</p>
        <Link
          className="mt-8 inline-flex items-center justify-center px-6 py-3 text-base font-medium text-black bg-white rounded-md shadow hover:bg-gray-100"
          href={linkUrl}
        >
          {userLoggedIn ? "Dashboard" : link.text}
        </Link>
      </div>
    </header>
  );
}

Now, our UI in the Hero Section should look like the following if the user is logged in.

Now, let's work on our Account Page.

Creating Our User Profile Page (Account Page)

Let's start by navigating to our dashboard folder and creating an account folder with a page.tsx file.

We will add the following code.

import { getUserMeLoader } from "@/data/services/get-user-me-loader";
// import { ProfileForm } from "@/components/forms/profile-form";
// import { ProfileImageForm } from "@/components/forms/profile-image-form";

export default async function AccountRoute() {
  const user = await getUserMeLoader();
  const userData = user.data;
  const userImage = userData?.image;

  return (
    <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 p-4">
      Account Page
      {/* <ProfileForm data={userData} className="col-span-3" /> */}
      {/* <ProfileImageForm data={userImage} className="col-span-2" /> */}
    </div>
  );
}

I commented out the components that we still need to create to get our app to render. Let's make our ProfileForm and ProfileImageForm components.

Create a Form To Update User's Details

Let's navigate to src/components/forms and create a profile-form.tsx file.

Let's paste in the following code.

"use client";
import React from "react";
import { cn } from "@/lib/utils";

import { SubmitButton } from "@/components/custom/submit-button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

interface ProfileFormProps {
  id: string;
  username: string;
  email: string;
  firstName: string;
  lastName: string;
  bio: string;
  credits: number;
}

function CountBox({ text }: { readonly text: number }) {
  const style = "font-bold text-md mx-1";
  const color = text > 0 ? "text-primary" : "text-red-500";
  return (
    <div className="flex items-center justify-center h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none">
      You have<span className={cn(style, color)}>{text}</span>credit(s)
    </div>
  );
}

export function ProfileForm({
  data,
  className,
}: {
  readonly data: ProfileFormProps;
  readonly className?: string;
}) {
  return (
    <form className={cn("space-y-4", className)}>
      <div className="space-y-4 grid ">
        <div className="grid grid-cols-3 gap-4">
          <Input
            id="username"
            name="username"
            placeholder="Username"
            defaultValue={data?.username || ""}
            disabled
          />
          <Input
            id="email"
            name="email"
            placeholder="Email"
            defaultValue={data?.email || ""}
            disabled
          />
          <CountBox text={data?.credits} />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <Input
            id="firstName"
            name="firstName"
            placeholder="First Name"
            defaultValue={data?.firstName || ""}
          />
          <Input
            id="lastName"
            name="lastName"
            placeholder="Last Name"
            defaultValue={data?.lastName || ""}
          />
        </div>
        <Textarea
          id="bio"
          name="bio"
          placeholder="Write your bio here..."
          className="resize-none border rounded-md w-full h-[224px] p-2"
          defaultValue={data?.bio || ""}
          required
        />
      </div>
      <div className="flex justify-end">
        <SubmitButton text="Update Profile" loadingText="Saving Profile" />
      </div>
    </form>
  );
}

Since we use a new Shadcn UI component, Textarea, let's install it using the following:

npx shadcn@latest add textarea

Let's uncomment our ProfileForm in our dashboard/account/page.tsx file.

import { getUserMeLoader } from "@/data/services/get-user-me-loader";
import { ProfileForm } from "@/components/forms/profile-form";
// import { ProfileImageForm } from "@/components/forms/profile-image-form";

export default async function AccountRoute() {
  const user = await getUserMeLoader();
  const userData = user.data;
  const userImage = userData?.image;

  return (
    <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 p-4">
      <ProfileForm data={userData} className="col-span-3" />
      {/* <ProfileImageForm data={userImage} className="col-span-2" /> */}
    </div>
  );
}

Restart the app and your Next.js frontend, and you should see the following.

You should notice two things. One, we are not getting our users' First Name, Last Name, Bio, or the number of credits they have left.

Second, we are not able to submit the form because we have not implemented the form logic via server action yet. We will do that next. But first, let's update our user schema in Strapi.

Updating User Data Schema In Our Backend

Inside our Strapi Admin area, navigate to the content-builder and choose the user collection type.

Let's add the following fields.

Name	Field	Type	Advanced Settings
firstName	Text	Short Text
lastName	Text	Short Text
bio	Text	Long Text
credits	Number	Integer	Set default value to be 0

We will manually add the credits for new users when they sign in, but their default starting credits should be 0.

Once you are done, you should have the following new fields.

Now, let's manually update our users' information so we can check whether we are getting it in our front end.

Navigating to your Account page on your front end should see the following output.

Let's move on to the form update using server action.

Updating User Data With Server Actions

First, let's create our updateProfileAction responsible for handling our form submission.

Navigate to src/data/actions, create a new file called profile-actions.ts and paste in the following code.

"use server";
import qs from "qs";

export async function updateProfileAction(
  userId: string,
  prevState: any,
  formData: FormData
) {
  const rawFormData = Object.fromEntries(formData);

  const query = qs.stringify({
    populate: "*",
  });

  const payload = {
    firstName: rawFormData.firstName,
    lastName: rawFormData.lastName,
    bio: rawFormData.bio,
  };

  console.log("updateProfileAction", userId);
  console.log("############################");
  console.log(payload);
  console.log("############################");

  return {
    ...prevState,
    message: "Profile Updated",
    data: payload,
    strapiErrors: null,
  };
}

We have created actions before, so there is not much new here except one small addition. Notice that we can access userId, which we are getting as one of the arguments.

Let's implement this action in our ProfileForm and see how we pass the userId to our action.

Navigate to your profile-form.tsx file and make the following changes.

First, let's import our action with the following.

import { useActionState} from "react";
import { updateProfileAction } from "@/data/actions/profile-actions";

Next, let's create the initial state for our useActionState.

const INITIAL_STATE = {
  data: null,
  strapiErrors: null,
  message: null,
};

I will not focus on form validation with Zod since we already covered this in previous sections. It can be a great extra challenge for you to explore independently and to see how useful it is for data validation in JavaScript/TypeScript applications and frameworks such as Next.JS 14, VueJs, Remix, etc.

But we will import our StrapiErrors component and handle those.

import { StrapiErrors } from "@/components/custom/strapi-errors";

Before using the useActionState as we did in previous sections, let's look at how we can bind additional data that we would like to pass to our server actions.

Add the following line of code.

const updateProfileWithId = updateProfileAction.bind(null, data.id);

We can use the bind method to add new data that we can access inside our server action.

This is how we are setting our userId so that we can access it from our updateProfileAction server action.

You can read more about it in the Next.js documentation here.

Finally, let's use our useActionState hook to access the data returned from our server actions.

const [formState, formAction] = useActionState(
  updateProfileWithId,
  INITIAL_STATE
);

Let's update our form tag with the following.

  <form
    className={cn("space-y-4", className)}
    action={formAction}
  >

And remember to add our StrapiErrors component.

<div className="flex justify-end">
    <SubmitButton text="Update Profile" loadingText="Saving Profile" />
</div>
<StrapiErrors error={formState?.strapiErrors} />

The final code should look like the following inside your profile-form.tsx file.

"use client";
import React from "react";
import { cn } from "@/lib/utils";

import { useActionState} from "react";
import { updateProfileAction } from "@/data/actions/profile-actions";

import { SubmitButton } from "@/components/custom/submit-button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { StrapiErrors } from "@/components/custom/strapi-errors";

const INITIAL_STATE = {
  data: null,
  strapiErrors: null,
  message: null,
};

interface ProfileFormProps {
  id: string;
  username: string;
  email: string;
  firstName: string;
  lastName: string;
  bio: string;
  credits: number;
}

function CountBox({ text }: { readonly text: number }) {
  const style = "font-bold text-md mx-1";
  const color = text > 0 ? "text-primary" : "text-red-500";
  return (
    <div className="flex items-center justify-center h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none">
      You have<span className={cn(style, color)}>{text}</span>credit(s)
    </div>
  );
}

export function ProfileForm({
  data,
  className,
}: {
  readonly data: ProfileFormProps;
  readonly className?: string;
}) {
  const updateProfileWithId = updateProfileAction.bind(null, data.id);

  const [formState, formAction] = useActionState(
    updateProfileWithId,
    INITIAL_STATE
  );

  return (
    <form className={cn("space-y-4", className)} action={formAction}>
      <div className="space-y-4 grid ">
        <div className="grid grid-cols-3 gap-4">
          <Input
            id="username"
            name="username"
            placeholder="Username"
            defaultValue={data?.username || ""}
            disabled
          />
          <Input
            id="email"
            name="email"
            placeholder="Email"
            defaultValue={data?.email || ""}
            disabled
          />
          <CountBox text={data?.credits} />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <Input
            id="firstName"
            name="firstName"
            placeholder="First Name"
            defaultValue={data?.firstName || ""}
          />
          <Input
            id="lastName"
            name="lastName"
            placeholder="Last Name"
            defaultValue={data?.lastName || ""}
          />
        </div>
        <Textarea
          id="bio"
          name="bio"
          placeholder="Write your bio here..."
          className="resize-none border rounded-md w-full h-[224px] p-2"
          defaultValue={data?.bio || ""}
          required
        />
      </div>
      <div className="flex justify-end">
        <SubmitButton text="Update Profile" loadingText="Saving Profile" />
      </div>
      <StrapiErrors error={formState?.strapiErrors} />
    </form>
  );
}

Let's test it and see if we can console our changes before making the API call to Strapi.

If you check your terminal, you will see the following console message.

updateProfileAction 3
############################
{
  firstName: 'Paul',
  lastName: 'Brats',
  bio: 'I made this update'
}
############################

Notice we are getting our userId and the data we want to update.

Now, let's go ahead and implement the logic that will send this data to Strapi.

But first, let's navigate to src/data/services, create a new service called mutate-data.ts, and import the following code.

import { getAuthToken } from "./get-token";
import { getStrapiURL } from "@/lib/utils";

export async function mutateData(method: string, path: string, payload?: any) {
  const baseUrl = getStrapiURL();
  const authToken = await getAuthToken();
  const url = new URL(path, baseUrl);

  if (!authToken) throw new Error("No auth token found");

  try {
    const response = await fetch(url, {
      method: method,
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${authToken}`,
      },
      body: JSON.stringify({ ...payload }),
    });

    if (method === 'DELETE') {
      return response.ok;
    }

    const data = await response?.json();
    return data;
  } catch (error) {
    console.log("error", error);
    throw error;
  }
}

Here, we are just using fetch to submit our data, but to make it more flexible and reusable, we are passing path and payload as arguments.

Let's use it on our profile-actions.ts file.

Let's make the following update.

"use server";
import qs from "qs";
import { mutateData } from "@/data/services/mutate-data";
import { revalidatePath } from "next/cache";

export async function updateProfileAction(
  userId: string,
  prevState: any,
  formData: FormData
) {
  const rawFormData = Object.fromEntries(formData);

  const query = qs.stringify({
    populate: "*",
  });

  const payload = {
    firstName: rawFormData.firstName,
    lastName: rawFormData.lastName,
    bio: rawFormData.bio,
  };

  const responseData = await mutateData(
    "PUT",
    `/api/users/${userId}?${query}`,
    payload
  );

  if (!responseData) {
    return {
      ...prevState,
      strapiErrors: null,
      message: "Ops! Something went wrong. Please try again.",
    };
  }

  if (responseData.error) {
    return {
      ...prevState,
      strapiErrors: responseData.error,
      message: "Failed to Update Profile.",
    };
  }

  revalidatePath("/dashboard/account");

  return {
    ...prevState,
    message: "Profile Updated",
    data: responseData,
    strapiErrors: null,
  };

}

We will be using revalidatePath to clear the cache and fetch the latest data from Strapi.

Uploading Files In Next.js Using Server Actions.

We will now focus on handling file upload in Next.js with Server Actions. But before we can do that, let's create an ImagePicker component.

Navigate to src/components/custom, create a file called image-picker.tsx,, and paste the following code.

"use client";
import React, { useState, useRef } from "react";
import { StrapiImage } from "./strapi-image";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

interface ImagePickerProps {
  id: string;
  name: string;
  label: string;
  showCard?: boolean;
  defaultValue?: string;
}

function generateDataUrl(file: File, callback: (imageUrl: string) => void) {
  const reader = new FileReader();
  reader.onload = () => callback(reader.result as string);
  reader.readAsDataURL(file);
}

function ImagePreview({ dataUrl }: { readonly dataUrl: string }) {
  return (
    <StrapiImage
      src={dataUrl}
      alt="preview"
      height={200}
      width={200}
      className="rounded-lg w-full object-cover"
    />
  );
}

function ImageCard({
  dataUrl,
  fileInput,
}: {
  readonly dataUrl: string;
  readonly fileInput: React.RefObject<HTMLInputElement>;
}) {
  const imagePreview = dataUrl ? (
    <ImagePreview dataUrl={dataUrl} />
  ) : (
    <p>No image selected</p>
  );

  return (
    <div className="w-full relative">
      <div className=" flex items-center space-x-4 rounded-md border p-4">
        {imagePreview}
      </div>
      <button
        onClick={() => fileInput.current?.click()}
        className="w-full absolute inset-0"
        type="button"
      ></button>
    </div>
  );
}

export default function ImagePicker({
  id,
  name,
  label,
  defaultValue,
}: Readonly<ImagePickerProps>) {
  const fileInput = useRef<HTMLInputElement>(null);
  const [dataUrl, setDataUrl] = useState<string | null>(defaultValue ?? null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) generateDataUrl(file, setDataUrl);
  };

  return (
    <React.Fragment>
      <div className="hidden">
        <Label htmlFor={name}>{label}</Label>
        <Input
          type="file"
          id={id}
          name={name}
          onChange={handleFileChange}
          ref={fileInput}
          accept="image/*"
        />
      </div>
      <ImageCard dataUrl={dataUrl ?? ""} fileInput={fileInput} />
    </React.Fragment>
  );
}

This component lets the user select an image in the form.

Now, let's create our ProfileImageForm to utilize this component.

Navigate to src/components/forms, create a file called profile-image-form.tsx, and paste it into the following code.

"use client";
import React from "react";
// import { useActionState} from "react";

import { cn } from "@/lib/utils";

// import { uploadProfileImageAction } from "@/data/actions/profile-actions";

import { SubmitButton } from "@/components/custom/submit-button";
import ImagePicker from "@/components/custom/image-picker";
import { ZodErrors } from "@/components/custom/zod-errors";
import { StrapiErrors } from "@/components/custom/strapi-errors";

interface ProfileImageFormProps {
  id: string;
  url: string;
  alternativeText: string;
}

const initialState = {
  message: null,
  data: null,
  strapiErrors: null,
  zodErrors: null,
};

export function ProfileImageForm({
  data,
  className,
}: {
  data: Readonly<ProfileImageFormProps>;
  className?: string;
}) {
  // const uploadProfileImageWithIdAction = uploadProfileImageAction.bind(
  //   null,
  //   data?.id
  // );

  // const [formState, formAction] = useActionState(
  //   uploadProfileImageWithIdAction,
  //   initialState
  // );

  return (
    <form className={cn("space-y-4", className)}>
      <div className="">
        <ImagePicker
          id="image"
          name="image"
          label="Profile Image"
          defaultValue={data?.url || ""}
        />
        {/* <ZodErrors error={formState?.zodErrors?.image} />
        <StrapiErrors error={formState?.strapiErrors} /> */}
      </div>
      <div className="flex justify-end">
        <SubmitButton text="Update Image" loadingText="Saving Image" />
      </div>
    </form>
  );
}

We have couple of the items commented out, but we will come back to them in just a moment.

But first, let's uncomment our ProfileImageForm in the app/dashboard/account/page.tsx.

The completed code should look like the following.

import { getUserMeLoader } from "@/data/services/get-user-me-loader";
import { ProfileForm } from "@/components/forms/profile-form";
import { ProfileImageForm } from "@/components/forms/profile-image-form";

export default async function AccountRoute() {
  const user = await getUserMeLoader();
  const userData = user.data;
  const userImage = userData?.image;

  return (
    <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 p-4">
      <ProfileForm data={userData} className="col-span-3" />
      <ProfileImageForm data={userImage} className="col-span-2" />
    </div>
  );
}

Now, let's checkout out our account page and see if we see our image picker?

Nice. Now let's add the image field to our user collection type in Strapi Admin.

Navigate to Content Type Builder, click on the User collection type, and click on the Add Another Field to This Collection button.

Select the media field.

Make sure to name it image, select the Single media option, and then navigate to the Advanced Settings tab.

In the advanced settings tabs, configure allowed file types only to include images. Once you've done this, click the Finish button.

Now, add an image to your user.

Finally, before we move on, we need to update our get-user-me-loader.ts file to include the image field in the populate query.

populate: {
  image: {
    fields: ["url", "alternativeText"],
  },
},

Final code should look like the following.

import qs from "qs";
import { getAuthToken } from "./get-token";
import { getStrapiURL } from "@/lib/utils";

export async function getUserMeLoader() {
  const baseUrl = getStrapiURL();

  const url = new URL("/api/users/me", baseUrl);

  url.search = qs.stringify({
    populate: {
      image: {
        fields: ["url", "alternativeText"],
      },
    },
  });

  const authToken = await getAuthToken();
  if (!authToken) return { ok: false, data: null, error: null };

  try {
    const response = await fetch(url.href, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${authToken}`,
      },
    });
    const data = await response.json();
    if (data.error) return { ok: false, data: null, error: data.error };
    return { ok: true, data: data, error: null };
  } catch (error) {
    console.log(error);
    return { ok: false, data: null, error: error };
  }
}

Now refresh your frontend application; you should now see your newly added user image.

Let's now create our server action to handle file upload.

File Upload With Server Actions in Next.js

Let's navigate to profile-actions.ts and update the file with the following code.

"use server";
import { z } from "zod";
import qs from "qs";
import { revalidatePath } from "next/cache";

import { getUserMeLoader } from "@/data/services/get-user-me-loader";
import { mutateData } from "@/data/services/mutate-data";

import {
  fileDeleteService,
  fileUploadService,
} from "@/data/services/file-service";

export async function updateProfileAction(
  userId: string,
  prevState: any,
  formData: FormData
) {
  const rawFormData = Object.fromEntries(formData);

  const query = qs.stringify({
    populate: "*",
  });

  const payload = {
    firstName: rawFormData.firstName,
    lastName: rawFormData.lastName,
    bio: rawFormData.bio,
  };

  const responseData = await mutateData(
    "PUT",
    `/api/users/${userId}?${query}`,
    payload
  );

  if (!responseData) {
    return {
      ...prevState,
      strapiErrors: null,
      message: "Ops! Something went wrong. Please try again.",
    };
  }

  if (responseData.error) {
    return {
      ...prevState,
      strapiErrors: responseData.error,
      message: "Failed to Update Profile.",
    };
  }

  revalidatePath("/dashboard/account");

  return {
    ...prevState,
    message: "Profile Updated",
    data: responseData,
    strapiErrors: null,
  };
}

const MAX_FILE_SIZE = 5000000;

const ACCEPTED_IMAGE_TYPES = [
  "image/jpeg",
  "image/jpg",
  "image/png",
  "image/webp",
];

// VALIDATE IMAGE WITH ZOD
const imageSchema = z.object({
  image: z
    .any()
    .refine((file) => {
      if (file.size === 0 || file.name === undefined) return false;
      else return true;
    }, "Please update or add new image.")

    .refine(
      (file) => ACCEPTED_IMAGE_TYPES.includes(file?.type),
      ".jpg, .jpeg, .png and .webp files are accepted."
    )
    .refine((file) => file.size <= MAX_FILE_SIZE, `Max file size is 5MB.`),
});

export async function uploadProfileImageAction(
  imageId: string,
  prevState: any,
  formData: FormData
) {
  // GET THE LOGGED IN USER
  const user = await getUserMeLoader();
  if (!user.ok)
    throw new Error("You are not authorized to perform this action.");

  const userId = user.data.id;

  // CONVERT FORM DATA TO OBJECT
  const data = Object.fromEntries(formData);

  // VALIDATE THE IMAGE
  const validatedFields = imageSchema.safeParse({
    image: data.image,
  });

  if (!validatedFields.success) {
    return {
      ...prevState,
      zodErrors: validatedFields.error.flatten().fieldErrors,
      strapiErrors: null,
      data: null,
      message: "Invalid Image",
    };
  }

  // DELETE PREVIOUS IMAGE IF EXISTS
  if (imageId) {
    try {
      await fileDeleteService(imageId);
    } catch (error) {
      return {
        ...prevState,
        strapiErrors: null,
        zodErrors: null,
        message: "Failed to Delete Previous Image.",
      };
    }
  }

  // UPLOAD NEW IMAGE TO MEDIA LIBRARY
  const fileUploadResponse = await fileUploadService(data.image);

  if (!fileUploadResponse) {
    return {
      ...prevState,
      strapiErrors: null,
      zodErrors: null,
      message: "Ops! Something went wrong. Please try again.",
    };
  }

  if (fileUploadResponse.error) {
    return {
      ...prevState,
      strapiErrors: fileUploadResponse.error,
      zodErrors: null,
      message: "Failed to Upload File.",
    };
  }
  const updatedImageId = fileUploadResponse[0].id;
  const payload = { image: updatedImageId };

  // UPDATE USER PROFILE WITH NEW IMAGE
  const updateImageResponse = await mutateData(
    "PUT",
    `/api/users/${userId}`,
    payload
  );

  revalidatePath("/dashboard/account");

  return {
    ...prevState,
    data: updateImageResponse,
    zodErrors: null,
    strapiErrors: null,
    message: "Image Uploaded",
  };
}

The above server action handles the following steps.

First, check if the user is logged in and identifies their account.
It then checks the image the user selected to ensure it's a valid image type (like JPEG or PNG) and not too large in file size.
If the image is valid, and there was previously an image, the old image is removed.
The new image is uploaded to the server and associated with the user's profile.
The application updates the user's profile with this new image. If there's an error, it informs the user.

In essence, this code is about two main actions on a user's profile in an application: updating personal details and changing the profile picture.

It ensures that the data is valid via Zod and communicates with the server to store these changes, providing feedback to the user based on whether these actions were successful.

To check if the image is valid, we use the refine method in Zod, which allows us to create custom validation logic.

Let's briefly review the use of refine in the code below.

const imageSchema = z.object({
  image: z
    .any()
    .refine((file) => {
      if (file.size === 0 || file.name === undefined) return false;
      else return true;
    }, "Please update or add new image.")

    .refine(
      (file) => ACCEPTED_IMAGE_TYPES.includes(file?.type),
      ".jpg, .jpeg, .png and .webp files are accepted."
    )
    .refine((file) => file.size <= MAX_FILE_SIZE, `Max file size is 5MB.`),
});

Why Use refine
Flexibility and Precision: Refines allow for custom validations beyond basic type checks, which means you can implement complex, tailored criteria for data validity.

User Feedback: By specifying an error message with each refine, you provide clear, actionable feedback, improving the user experience by guiding them through correcting their input.

Composition: Multiple refine validations can be chained together, allowing for a comprehensive and readable sequence of checks.

You can learn more about using refine here.

Finally, let's create our two services, fileDeleteService and fileUploadService. They will be responsible for deleting an existing image and uploading a new one.

Navigate to src/data/services and create a file named file-service.ts and paste in the following code.

To learn more about file upload in Strapi, see the docs.

import { getAuthToken } from "@/data/services/get-token";
import { mutateData } from "@/data/services/mutate-data";
import { getStrapiURL } from "@/lib/utils";

export async function fileDeleteService(imageId: string) {
  const authToken = await getAuthToken();
  if (!authToken) throw new Error("No auth token found");

  const data = await mutateData("DELETE", `/api/upload/files/${imageId}`);
  return data;
}

export async function fileUploadService(image: any) {
  const authToken = await getAuthToken();
  if (!authToken) throw new Error("No auth token found");

  const baseUrl = getStrapiURL();
  const url = new URL("/api/upload", baseUrl);

  const formData = new FormData();
  formData.append("files", image, image.name);

  try {
    const response = await fetch(url, {
      headers: { Authorization: `Bearer ${authToken}` },
      method: "POST",
      body: formData,
    });

    const dataResponse = await response.json();

    return dataResponse;
  } catch (error) {
    console.error("Error uploading image:", error);
    throw error;
  }
}

Finally, navigate back to profile-image-form.tsx file and uncomment previously commented code. And make sure to add action={formAction} to our form element.

The following code should look like the code below.

"use client";
import React from "react";
import { useActionState} from "react";

import { cn } from "@/lib/utils";

import { uploadProfileImageAction } from "@/data/actions/profile-actions";

import { SubmitButton } from "@/components/custom/submit-button";
import ImagePicker from "@/components/custom/image-picker";
import { ZodErrors } from "@/components/custom/zod-errors";
import { StrapiErrors } from "@/components/custom/strapi-errors";

interface ProfileImageFormProps {
  id: string;
  url: string;
  alternativeText: string;
}

const initialState = {
  message: null,
  data: null,
  strapiErrors: null,
  zodErrors: null,
};

export function ProfileImageForm({
  data,
  className,
}: {
  data: Readonly<ProfileImageFormProps>;
  className?: string;
}) {
  const uploadProfileImageWithIdAction = uploadProfileImageAction.bind(
    null,
    data?.id
  );

  const [formState, formAction] = useActionState(
    uploadProfileImageWithIdAction,
    initialState
  );

  return (
    <form className={cn("space-y-4", className)} action={formAction}>
      <div className="">
        <ImagePicker
          id="image"
          name="image"
          label="Profile Image"
          defaultValue={data?.url || ""}
        />
        <ZodErrors error={formState?.zodErrors?.image} />
        <StrapiErrors error={formState?.strapiErrors} />
      </div>
      <div className="flex justify-end">
        <SubmitButton text="Update Image" loadingText="Saving Image" />
      </div>
    </form>
  );
}

Before we can test whether our image uploader works, let's change our Strapi setting to enable file upload and deletion.

These options are under Settings => USERS & PERMISSIONS PLUGIN => Roles => Authenticated => Upload.

Check both upload and destroy boxes.

Let's test out our upload functionality.

Excellent, we now have our file upload working.

The following post will look at handling our video summary generation.

Conclusion

Excellent. We completed our initial Dashboard layout with an Account section where the user can update their first name, last name, bio, and image.

We covered how to handle file uploads using NextJs server actions. By this point, you should be starting to feel more comfortable working with forms, file upload and server actions in Next.js.

In the next post, we will start working on our main feature, which will allow us to summarize our YouTube videos.

See you in the next one.

Also, if you made it this far, thank you. I really appreciate your support. I did my best to do diligence, but if you find errors, share them in the comments below.

Note about this project

This project has been updated to use Next.js 15 and Strapi 5.

If you have any questions, feel free to stop by at our Discord Community for our daily "open office hours" from 12:30 PM CST to 1:30 PM CST.

If you have a suggestion or find a mistake in the post, please open an issue on the GitHub repository.

You can also find the blog post content in the Strapi Blog.

Feel free to make PRs to fix any issues you find in the project, or let me know if you have any questions.

Happy coding!

Paul

Epic Next JS 15 Tutorial Part 4: How To Handle Login And Authentication in Next.js

Paul Bratslavsky — Thu, 04 Apr 2024 19:04:19 +0000

In the previous tutorial, we finished our Home Page, so we will build out our Sign In and Sign Up Pages and hook up the logic to allow us to sign in and sign up.

Part 1: Learn Next.js by building a website
Part 2: Building Out The Hero Section of the homepage
Part 3: Finishing up the homepage Features Section, TopNavigation and Footer
Part 4: How to handle login and Authentification in Next.js
Part 5: Building out the Dashboard page and uploading file using NextJS server actions
Part 6: Get Video Transcript with OpenAI Function
Part 7: Strapi CRUD permissions
Part 8: Search & pagination
Part 9: Backend deployment to Strapi Cloud
Part 10: Frontend deployment to Vercel

Let's start by creating our routes.

How To Group Routes In Next.js

Next, we can group our routes and create shared layouts; you can read more here, but for our use case, we will create a route group called auth, to make a route a group, you will create a folder whose name will be between parentheses.

Our folder structure will look like the following.

Folder named (auth)
Inside the (auth) folder, create two additional folders, signin and signup, with a blank page.tsx file.
Finally, inside the (auth) folder, create a file called layout.tsx to function as our shared layout between our signin and signup pages.

You can learn more about the layout.tsx file in Next.js docs here

Now that we have our basic folder structure. Let's create the following components.

In the layout.tsx file, paste the following code.

export default function AuthLayout({ children }: {
  readonly children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
      {children}
    </div>
  );
}

Paste the following code in the signin/page.tsx file.

export default function SignInRoute() {
  return <div>Sign In Route</div>;
}

Paste the following code in the signup/page.tsx file.

export default function SingUpRoute() {
  return <div>Sign Up Route</div>;
}

After creating the following components you should be able to navigate to our signin page via the link.

Inside src/app, create the following.
Great. Let's now work on our signin and signup forms.

Building Our Signin and Signup Form

Let's navigate to app/components and create a new folder called forms. Inside that folder, create two new files called signin-form.tsx and signup-form.tsx and paste the following code for the respective components.

signin-form.tsx

"use client";

import Link from "next/link";

import {
  CardTitle,
  CardDescription,
  CardHeader,
  CardContent,
  CardFooter,
  Card,
} from "@/components/ui/card";

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

export function SigninForm() {
  return (
    <div className="w-full max-w-md">
      <form>
        <Card>
          <CardHeader className="space-y-1">
            <CardTitle className="text-3xl font-bold">Sign In</CardTitle>
            <CardDescription>
              Enter your details to sign in to your account
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="identifier"
                name="identifier"
                type="text"
                placeholder="username or email"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                name="password"
                type="password"
                placeholder="password"
              />
            </div>
          </CardContent>
          <CardFooter className="flex flex-col">
            <button className="w-full">Sign In</button>
          </CardFooter>
        </Card>
        <div className="mt-4 text-center text-sm">
          Don't have an account?
          <Link className="underline ml-2" href="signup">
            Sign Up
          </Link>
        </div>
      </form>
    </div>
  );
}

signup-form.tsx

"use client";

import Link from "next/link";

import {
  CardTitle,
  CardDescription,
  CardHeader,
  CardContent,
  CardFooter,
  Card,
} from "@/components/ui/card";

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

export function SignupForm() {
  return (
    <div className="w-full max-w-md">
      <form>
        <Card>
          <CardHeader className="space-y-1">
            <CardTitle className="text-3xl font-bold">Sign Up</CardTitle>
            <CardDescription>
              Enter your details to create a new account
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="username">Username</Label>
              <Input
                id="username"
                name="username"
                type="text"
                placeholder="username"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                name="email"
                type="email"
                placeholder="name@example.com"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                name="password"
                type="password"
                placeholder="password"
              />
            </div>
          </CardContent>
          <CardFooter className="flex flex-col">
            <button className="w-full">Sign Up</button>
          </CardFooter>
        </Card>
        <div className="mt-4 text-center text-sm">
          Have an account?
          <Link className="underline ml-2" href="signin">
            Sing In
          </Link>
        </div>
      </form>
    </div>
  );
}

Since we are using Shadcn UI, we need to install the card, input, and label components since we are using them in the code above.

You can learn more about Shadcn UI here

We can install the components by running the following code.

  npx shadcn@latest add card label input

Now that we have installed our components, let's navigate to app/(auth)/signin/page.tsx and import and add our newly created SigninForm component.

The final code should look like the following.

import { SigninForm } from "@/components/forms/signin-form";

export default function SingInRoute() {
  return <SigninForm />;
}

Let's do the same inside the signup/page.tsx file by updating the following.

import { SignupForm } from "@/components/forms/signup-form";

export default function SingUoRoute() {
  return <SignupForm />;
}

Now restart your frontend Next.js application. You should see the following when navigating the Sign In page.

Nice, we now have both of our forms. Before getting into the details of how to implement our form submission via Server Actions, here are some great resources to learn more about the process MDN HTML Forms and specific to Next.js Server Action & Mutations

Now let's dive in in building out our SignupForm.

Form Submission Using Next.js Server Actions

We will first focus on our SignupForm, and then, after we understand how things work, we will make the same changes inside our SigninForm.

While building our form, let's consider these items in the context of Next.js.

we can get form values via the name attribute in the input fields inside the form.
the form will have an action attribute pointing to a server action.
when we click the button with the submit, it will submit the form and trigger our action.
we will be able to access our data inside server action via FormData
Inside the server action, our business logic will handle our signup via our Strapi backend.

Let's start by defining our first Next.js server actions. Navigate to src/app/data and create a new folder called actions and a file name auth-actions.ts.

Inside our newly created file, let's paste the following code.

"use server";

export async function registerUserAction(formData: FormData) {
  console.log("Hello From Register User Action");
}

Now let's import our registerUserAction inside our signup-form.tsx file and add it to our form action.

import { registerUserAction } from "@/data/actions/auth-actions";

Update the form attribute with the following:

{
  /*  rest of our code  */
}
<form action={registerUserAction}>
{/*  rest of our code  */}
</form>;
{
  /*  rest of our code  */
}

Now, you should be able to click the Sign Up button, and we should see our console log in our terminal since it is being executed on the server.

Nice. We don't know if we can trigger our server action via our form submission. Let's examine how we can access our form data via our FormData.

How To Access FormData Inside Next.js Server Action

For additional reading, I recommend checking out this post about FormData on MDN, but we will be using the get method to get our values.

When we submit our form, the values will be passed down to our server action via the form data using the input name attribute as the key to our value.

For example, we can retrieve our data using FormData.get("username") for the following input.

With the following code, let's update our registerUserAction action in the auth-actions.ts file.

"use server";

export async function registerUserAction(formData: FormData) {
  console.log("Hello From Register User Action");

  const fields = {
    username: formData.get("username"),
    password: formData.get("password"),
    email: formData.get("email"),
  };

  console.log("#############");
  console.log(fields);
  console.log("#############");
}

Now, fill out the fields in the Signup form and click the Sign Up button. You should see the following console log in your terminal.

Hello From Register User Action
#############
{
  username: 'testuser',
  password: 'Monkey1234!',
  email: 'testuser@email.com'
}
#############

We can now get our data in our server action, but how do we return or validate it?

Well, that is what we will do in our next section.

How To Get Form State With useActionState Hook

We will use React's useActionState hook to return data from our server action. You can learn more here.

Let's first start in the signup-form.tsx file.

We will first import our useActionState hook from react-dom.

import { useActionState } from "react";

Now, let's create a variable to store our initial state.

const INITIAL_STATE = {
  data: null,
};

Now let's use our useActionState hook.

const [formState, formAction] = useActionState(registerUserAction, INITIAL_STATE);

And update the form action attribute with the following.

  <form action={formAction}>

The completed code should look like the following.

"use client";

import Link from "next/link";
import { useActionState } from "react";

import { registerUserAction } from "@/data/actions/auth-actions";

import {
  CardTitle,
  CardDescription,
  CardHeader,
  CardContent,
  CardFooter,
  Card,
} from "@/components/ui/card";

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

const INITIAL_STATE = {
  data: null,
};

export function SignupForm() {
  const [formState, formAction] = useActionState(registerUserAction, INITIAL_STATE);

  console.log("## will render on client ##");
  console.log(formState);
  console.log("###########################");

  return (
    <div className="w-full max-w-md">
      <form action={formAction}>
        <Card>
          <CardHeader className="space-y-1">
            <CardTitle className="text-3xl font-bold">Sign Up</CardTitle>
            <CardDescription>
              Enter your details to create a new account
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="username">Username</Label>
              <Input
                id="username"
                name="username"
                type="text"
                placeholder="username"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                name="email"
                type="email"
                placeholder="name@example.com"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                name="password"
                type="password"
                placeholder="password"
              />
            </div>
          </CardContent>
          <CardFooter className="flex flex-col">
            <button className="w-full">Sign Up</button>
          </CardFooter>
        </Card>
        <div className="mt-4 text-center text-sm">
          Have an account?
          <Link className="underline ml-2" href="signin">
            Sing In
          </Link>
        </div>
      </form>
    </div>
  );
}

Finally, we have to update our registerUserAction action in the auth-actions.ts file using the following code:

"use server";

export async function registerUserAction(prevState: any, formData: FormData) {
  console.log("Hello From Register User Action");

  const fields = {
    username: formData.get("username"),
    password: formData.get("password"),
    email: formData.get("email"),
  };

  console.log(fields);

  return {
    ...prevState,
    data: fields,
  };
}

When you submit the form, you should see our data console logged in our frontend via our console.log(formState); that we have in our signup-form.tsx file.

This is great. We are able to pass data to our server action and return it via useActionState.

Before we see how to submit our form and sign in via our Strapi backend, let's examine how to handle form validation with Zod.

Form Validation In Next.js with Zod

You can learn more about Zod on their website here.

Zod is a validation library designed for use with TypeScript and JavaScript.

It offers an expressive syntax for creating complex validation schema, which makes Zod particularly useful for validating user-generated data, such as information submitted through forms or received from API requests, to ensure the data aligns with your application's expected structures and types.

Let's examine how we can add Zod validation for our forms. We will choose to do the validation inside of our server action.

Let's start by installing Zod with the following command.

yarn add zod

Once the installation is complete, restart your app, navigate to our auth-actions.ts file, and import it with the following command.

import { z } from "zod";

Next, let's define our schema. You can learn more about Zod schemas here.

const schemaRegister = z.object({
  username: z.string().min(3).max(20, {
    message: "Username must be between 3 and 20 characters",
  }),
  password: z.string().min(6).max(100, {
    message: "Password must be between 6 and 100 characters",
  }),
  email: z.string().email({
    message: "Please enter a valid email address",
  }),
});

Here, we are adding simple validation and message.

Now, let's update our registerUserAction to use our schema to validate our fields by making the following changes.

export async function registerUserAction(prevState: any, formData: FormData) {
  console.log("Hello From Register User Action");

  const validatedFields = schemaRegister.safeParse({
    username: formData.get("username"),
    password: formData.get("password"),
    email: formData.get("email"),
  });

  if (!validatedFields.success) {
    return {
      ...prevState,
      zodErrors: validatedFields.error.flatten().fieldErrors,
      strapiErrors: null,
      message: "Missing Fields. Failed to Register.",
    };
  }

  return {
    ...prevState,
    data: "ok",
  };
}

We are using Zod in the above code to validate our user registration data.

The schemaRegister.safeParse function validates username, password, and email fields extracted from formData.

If validation fails (indicated by validatedFields.success being false), the function returns the previous state, Zod validation errors (zodErrors), and a failure message.

If validation succeeds, it returns the previous state updated with a success indicator.

This Zod validation process ensures that user data meets the application's requirements before proceeding.

Let's test our form by not adding any of our fields and submitting it.

Notice we can see our errors in the front end. Let's create a new component called ZodErrors to help us display them inside our signup-form.tsx file.

First, navigate to src/app/components/custom, create a new file called zod-errors.tsx, and paste it into the following code.

export function ZodErrors({ error }: { error: string[] }) {
  if (!error) return null;
  return error.map((err: string, index: number) => (
    <div key={index} className="text-pink-500 text-xs italic mt-1 py-2">
      {err}
    </div>
  ));
}

Now, navigate to src/app/components/forms/signup-form.tsx and let's use the following component.

We will import and add it to our form and pass the zod errors we are getting back from our formState.

The updated signup-form.tsx code should look like the following.

"use client";

import Link from "next/link";
import { useActionState } from "react";
import { registerUserAction } from "@/data/actions/auth-actions";

import {
  CardTitle,
  CardDescription,
  CardHeader,
  CardContent,
  CardFooter,
  Card,
} from "@/components/ui/card";

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

import { ZodErrors } from "@/components/custom/zod-errors";

const INITIAL_STATE = {
  data: null,
};

export function SignupForm() {
  const [formState, formAction] = useActionState(
    registerUserAction,
    INITIAL_STATE
  );

  console.log("## will render on client ##");
  console.log(formState);
  console.log("###########################");

  return (
    <div className="w-full max-w-md">
      <form action={formAction}>
        <Card>
          <CardHeader className="space-y-1">
            <CardTitle className="text-3xl font-bold">Sign Up</CardTitle>
            <CardDescription>
              Enter your details to create a new account
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="username">Username</Label>
              <Input
                id="username"
                name="username"
                type="text"
                placeholder="username"
              />
              <ZodErrors error={formState?.zodErrors?.username} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                name="email"
                type="email"
                placeholder="name@example.com"
              />
              <ZodErrors error={formState?.zodErrors?.email} />
            </div>

            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                name="password"
                type="password"
                placeholder="password"
              />
              <ZodErrors error={formState?.zodErrors?.password} />
            </div>
          </CardContent>
          <CardFooter className="flex flex-col">
            <button className="w-full">Sign Up</button>
          </CardFooter>
        </Card>
        <div className="mt-4 text-center text-sm">
          Have an account?
          <Link className="underline ml-2" href="signin">
            Sing In
          </Link>
        </div>
      </form>
    </div>
  );
}

Now, restart your frontend Next.js project and try submitting the form without entering any data; you should see the following errors.

Nice. We don't know if our form validation works, so let's move on and create a service that will handle our Strapi Auth Login.

Authentication with Next.js and Strapi

Now, let's implement Strapi authentication by registering our user via our Strapi API. You can find the process explained here

The basic overview,

request to register user to Strapi
after the user is created, we will get back a JWT token
save the cookie via the httpOnly cookie
redirect the user to the dashboard.
handle Strapi errors if any exist

Let's start by creating a service that will handle Strapi User Registration.

Navigate to src/app/data and create a new folder called services inside. Create the file auth-service.ts and paste it into the following code.

import { getStrapiURL } from "@/lib/utils";

interface RegisterUserProps {
  username: string;
  password: string;
  email: string;
}

interface LoginUserProps {
  identifier: string;
  password: string;
}

const baseUrl = getStrapiURL();

export async function registerUserService(userData: RegisterUserProps) {
  const url = new URL("/api/auth/local/register", baseUrl);

  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ ...userData }),
    });

    return response.json();
  } catch (error) {
    console.error("Registration Service Error:", error);
  }
}

export async function loginUserService(userData: LoginUserProps) {
  const url = new URL("/api/auth/local", baseUrl);

  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ ...userData }),
    });

    return response.json();
  } catch (error) {
    console.error("Login Service Error:", error);
    throw error;
  }
}

This includes both our registerUserService and loginUserService, which is based on what you can find in the Strapi Docs here.

Now, we can utilize our registerUserService service inside our auth-actions.ts file. Let's navigate to that file and add the following to our registerUserAction.

const responseData = await registerUserService(validatedFields.data);

if (!responseData) {
  return {
    ...prevState,
    strapiErrors: null,
    zodErrors: null,
    message: "Ops! Something went wrong. Please try again.",
  };
}

if (responseData.error) {
  return {
    ...prevState,
    strapiErrors: responseData.error,
    zodErrors: null,
    message: "Failed to Register.",
  };
}

Don't forget to import our registerUserService with the following.

import { registerUserService } from "@/data/services/auth-service";

The completed code should look like the following.

"use server";
import { z } from "zod";
import { registerUserService } from "@/data/services/auth-service";

const schemaRegister = z.object({
  username: z.string().min(3).max(20, {
    message: "Username must be between 3 and 20 characters",
  }),
  password: z.string().min(6).max(100, {
    message: "Password must be between 6 and 100 characters",
  }),
  email: z.string().email({
    message: "Please enter a valid email address",
  }),
});

export async function registerUserAction(prevState: any, formData: FormData) {
  console.log("Hello From Register User Action");

  const validatedFields = schemaRegister.safeParse({
    username: formData.get("username"),
    password: formData.get("password"),
    email: formData.get("email"),
  });

  if (!validatedFields.success) {
    return {
      ...prevState,
      zodErrors: validatedFields.error.flatten().fieldErrors,
      strapiErrors: null,
      message: "Missing Fields. Failed to Register.",
    };
  }

  const responseData = await registerUserService(validatedFields.data);

  if (!responseData) {
    return {
      ...prevState,
      strapiErrors: null,
      zodErrors: null,
      message: "Ops! Something went wrong. Please try again.",
    };
  }

  if (responseData.error) {
    return {
      ...prevState,
      strapiErrors: responseData.error,
      zodErrors: null,
      message: "Failed to Register.",
    };
  }

  console.log("#############");
  console.log("User Registered Successfully", responseData.jwt);
  console.log("#############");
}

Notice in the code above, inside of our return we are now returning strapiErrors. We will see how to render them in the front in just a moment, but first, let's test our form and see if we can see our jwt token being returned in our terminal console.

Nice, we are able to create a new user and register. Before moving on to handling redirects and setting the httpOnly cookie, let's create a component to render our Strapi Errors and Make our Submit Button cooler.

Handling Strapi Errors in Next.js

Now that we have implemented Next.js Strapi authentication, let's ensure that we handle some Strapi errors. Navigate to src/app/components/custom, create a new file named strapi-errors.tsx, and paste the following code.

interface StrapiErrorsProps {
  message: string | null;
  name: string;
  status: string | null;
}

export function StrapiErrors( { error }: { readonly error: StrapiErrorsProps }) {
  if (!error?.message) return null;
  return <div className="text-pink-500 text-md italic py-2">{error.message}</div>;
}

Now navigate back to our signup-form.tsx file, import our newly created component, and add it right after our' submit' button.

import { StrapiErrors } from "@/components/custom/strapi-errors";

<CardFooter className="flex flex-col">
  <button className="w-full">Sign Up</button>
  <StrapiErrors error={formState?.strapiErrors} />
</CardFooter>

Let's test and see if we can see our Strapi Errors. Try creating another user with an email you used to make your first user.

You should see the following message.

Let's improve our submit button by adding a pending state and making it prettier.

How To Handle Pending State In Next.js With useFormStatus

When we submit a form, it may be in a pending state, and we would like to show a spinner for a better user experience.

Let's look at how we can accomplish this by creating a SubmitButton component that will utilize the useFormStatus hook. The Next.js docs provide more details here.

The useFormStatus Hook gives you the status information of the last form submission. We will use that to get the status of our form and show our loading spinner.

Let's start by navigating to app/components/custom, creating the following file name submit-button.tsx, and adding the following code.

"use client";
import { useFormStatus } from "react-dom";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Loader2 } from "lucide-react";

function Loader({ text }: { readonly text: string }) {
  return (
    <div className="flex items-center space-x-2">
      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
      <p>{text}</p>
    </div>
  );
}

interface SubmitButtonProps {
  text: string;
  loadingText: string;
  className?: string;
  loading?: boolean;
}

export function SubmitButton({
  text,
  loadingText,
  loading,
  className,
}: Readonly<SubmitButtonProps>) {
  const status = useFormStatus();
  return (
    <Button
      type="submit"
      aria-disabled={status.pending || loading}
      disabled={status.pending || loading}
      className={cn(className)}
    >
      {status.pending || loading ? <Loader text={loadingText} /> : text}
    </Button>
  );
}

Now that we have our new SubmitButton component, let's use it inside our signup-form.tsx file.

Let's replace our boring button with the following, but first, ensure you import it.

import { SubmitButton } from "@/components/custom/submit-button";

Inside our CardFooter, let's update you with the following:

<CardFooter className="flex flex-col">
  <SubmitButton className="w-full" text="Sign Up" loadingText="Loading" />
  <StrapiErrors error={formState?.strapiErrors} />
</CardFooter>

Now let's test our new beautiful button.

It's beautiful.

The last two things we need to do are to look at how to set our JWT token as a httpOnly cookie, handle redirects, and set up protected routes with the middleware.ts file.

How To Set HTTP Only Cookie in Next.js

We will add this logic to our auth-actions.ts file and our registerUserAction function.

You can learn more about setting cookies in Next.js on their docs here

Let's make the following change inside of our registerUserAction file.

First import cookies from Next:

import { cookies } from "next/headers";

Next, create a variable to store our cookies config.

const config = {
  maxAge: 60 * 60 * 24 * 7, // 1 week
  path: "/",
  domain: process.env.HOST ?? "localhost",
  httpOnly: true,
  secure: process.env.NODE_ENV === "production",
};

Finally, use the following code to set the cookie.

  const cookieStore = await cookies();
  cookieStore.set("jwt", responseData.jwt, config);

Finally, let's add a redirect to our dashboard; first, we must create the page, so let's do that now.

The final code should look like the following. Notice we are using the redirect function from Next.js to redirect the user to the dashboard page; you can learn more here.

"use server";
import { z } from "zod";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

import { registerUserService } from "@/data/services/auth-service";

const config = {
  maxAge: 60 * 60 * 24 * 7, // 1 week
  path: "/",
  domain: process.env.HOST ?? "localhost",
  httpOnly: true,
  secure: process.env.NODE_ENV === "production",
};

const schemaRegister = z.object({
  username: z.string().min(3).max(20, {
    message: "Username must be between 3 and 20 characters",
  }),
  password: z.string().min(6).max(100, {
    message: "Password must be between 6 and 100 characters",
  }),
  email: z.string().email({
    message: "Please enter a valid email address",
  }),
});

export async function registerUserAction(prevState: any, formData: FormData) {
  const validatedFields = schemaRegister.safeParse({
    username: formData.get("username"),
    password: formData.get("password"),
    email: formData.get("email"),
  });

  if (!validatedFields.success) {
    return {
      ...prevState,
      zodErrors: validatedFields.error.flatten().fieldErrors,
      strapiErrors: null,
      message: "Missing Fields. Failed to Register.",
    };
  }

  const responseData = await registerUserService(validatedFields.data);

  if (!responseData) {
    return {
      ...prevState,
      strapiErrors: null,
      zodErrors: null,
      message: "Ops! Something went wrong. Please try again.",
    };
  }

  if (responseData.error) {
    return {
      ...prevState,
      strapiErrors: responseData.error,
      zodErrors: null,
      message: "Failed to Register.",
    };
  }

  const cookieStore = await cookies();
  cookieStore.set("jwt", responseData.jwt, config);

  redirect("/dashboard");
}

Inside the app folder, create the dashboard folder with a page.tsx file containing the following code.

export default function DashboardRoute() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
      <h1>Dashboard</h1>
    </div>
  );
}

Let's create another user and see our redirect in action and our cookies set.

You can see here that we are saving it as an httpOnly cookie.

Nice. We are almost done with the authentication flow, but we still have a small issue. If I remove the cookie, we are still able to navigate to the dashboard, but that should be a protected route.

How To Protect Your Routes in Next.js via Middleware

We will use Next.js middleware to protect our routes. You can learn more here.

In the src folder, create a file called middleware.ts and paste it into the following code.

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { getUserMeLoader } from "@/data/services/get-user-me-loader";

// Define an array of protected routes
const protectedRoutes = [
  "/dashboard",
  // Add more protected routes here
];

// Helper function to check if a path is protected
function isProtectedRoute(path: string): boolean {
  return protectedRoutes.some((route) => path.startsWith(route));
}

export async function middleware(request: NextRequest) {
  const user = await getUserMeLoader();
  const currentPath = request.nextUrl.pathname;

  if (isProtectedRoute(currentPath) && user.ok === false) {
    return NextResponse.redirect(new URL("/signin", request.url));
  }

  return NextResponse.next();
}

// Optionally, you can add a matcher to optimize performance
export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    "/((?!api|_next/static|_next/image|favicon.ico).*)",
  ],
};

In the code above, we are using the getUserMeLoader function, which we will create in just a minute, to call our Strapi API to see if the user is still logged in.

If so, we will have the user's information. If the user information does not exist, we will redirect the user to the signin page.

Now, navigate to our services folder and create the following files.

First, let's create a helpful function to get our JWT token.

Create a file inside the services folder called get-token.ts and add the following code.

import { cookies } from "next/headers";

export async function getAuthToken() {
  const cookieStore = await cookies();
  const authToken = cookieStore.get("jwt")?.value;
  return authToken;
}

Create another file called get-user-me-loader.ts and paste it into the following code.

import { getAuthToken } from "./get-token";
import { getStrapiURL } from "@/lib/utils";

export async function getUserMeLoader() {
  const baseUrl = getStrapiURL();

  const url = new URL("/api/users/me", baseUrl);

  const authToken = await getAuthToken();
  if (!authToken) return { ok: false, data: null, error: null };

  try {
    const response = await fetch(url.href, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${authToken}`,
      },
    });
    const data = await response.json();
    if (data.error) return { ok: false, data: null, error: data.error };
    return { ok: true, data: data, error: null };
  } catch (error) {
    console.log(error);
    return { ok: false, data: null, error: error };
  }
}

Now, restart your application, delete your previous cookie, and try to navigate to dashboard. We will be redirected back to the `sign-in page.

Nice. Now that we know our middleware is working, let's make the updates in our SigninForm instead of going step by step like we did. Since we will basically do the same thing we did in the SignupForm, we are just going to paste in the completed code.

Let's start in the auth-actions.ts file and replace it with the following code.

`ts
"use server";
import { z } from "zod";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

import {
registerUserService,
loginUserService,
} from "@/data/services/auth-service";

const config = {
maxAge: 60 * 60 * 24 * 7, // 1 week
path: "/",
domain: process.env.HOST ?? "localhost",
httpOnly: true,
secure: process.env.NODE_ENV === "production",
};

const schemaRegister = z.object({
username: z.string().min(3).max(20, {
message: "Username must be between 3 and 20 characters",
}),
password: z.string().min(6).max(100, {
message: "Password must be between 6 and 100 characters",
}),
email: z.string().email({
message: "Please enter a valid email address",
}),
});

export async function registerUserAction(prevState: any, formData: FormData) {
const validatedFields = schemaRegister.safeParse({
username: formData.get("username"),
password: formData.get("password"),
email: formData.get("email"),
});

if (!validatedFields.success) {
return {
...prevState,
zodErrors: validatedFields.error.flatten().fieldErrors,
strapiErrors: null,
message: "Missing Fields. Failed to Register.",
};
}

const responseData = await registerUserService(validatedFields.data);

if (!responseData) {
return {
...prevState,
strapiErrors: null,
zodErrors: null,
message: "Ops! Something went wrong. Please try again.",
};
}

if (responseData.error) {
return {
...prevState,
strapiErrors: responseData.error,
zodErrors: null,
message: "Failed to Register.",
};
}

const cookieStore = await cookies();
cookieStore.set("jwt", responseData.jwt, config);

redirect("/dashboard");
}

const schemaLogin = z.object({
identifier: z
.string()
.min(3, {
message: "Identifier must have at least 3 or more characters",
})
.max(20, {
message: "Please enter a valid username or email address",
}),
password: z
.string()
.min(6, {
message: "Password must have at least 6 or more characters",
})
.max(100, {
message: "Password must be between 6 and 100 characters",
}),
});

export async function loginUserAction(prevState: any, formData: FormData) {
const validatedFields = schemaLogin.safeParse({
identifier: formData.get("identifier"),
password: formData.get("password"),
});

if (!validatedFields.success) {
return {
...prevState,
zodErrors: validatedFields.error.flatten().fieldErrors,
message: "Missing Fields. Failed to Login.",
};
}

const responseData = await loginUserService(validatedFields.data);

if (!responseData) {
return {
...prevState,
strapiErrors: responseData.error,
zodErrors: null,
message: "Ops! Something went wrong. Please try again.",
};
}

if (responseData.error) {
return {
...prevState,
strapiErrors: responseData.error,
zodErrors: null,
message: "Failed to Login.",
};
}

console.log(responseData, "responseData");

const cookieStore = await cookies();
cookieStore.set("jwt", responseData.jwt, config);

redirect("/dashboard");
}

export async function logoutAction() {
const cookieStore = await cookies();
cookieStore.set("jwt", "", { ...config, maxAge: 0 });
redirect("/");
}
`

Next, navigate to our signin-form.tsx file and paste the following code.

`jsx
"use client";

import Link from "next/link";
import { useActionState } from "react";
import { loginUserAction } from "@/data/actions/auth-actions";

import {
CardTitle,
CardDescription,
CardHeader,
CardContent,
CardFooter,
Card,
} from "@/components/ui/card";

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { ZodErrors } from "@/components/custom/zod-errors";
import { StrapiErrors } from "@/components/custom/strapi-errors";
import { SubmitButton } from "@/components/custom/submit-button";

const INITIAL_STATE = {
zodErrors: null,
strapiErrors: null,
data: null,
message: null,
};

export function SigninForm() {
const [formState, formAction] = useActionState(loginUserAction, INITIAL_STATE);
return (

Sign In

Enter your details to sign in to your account

Email
id="identifier"
name="identifier"
type="text"
placeholder="username or email"
/>

Password
id="password"
name="password"
type="password"
placeholder="password"
/>

className="w-full"
text="Sign In"
loadingText="Loading"
/>

Don't have an account?

Sign Up

);
}
`

Finally, let's create a Logout Button. Navigate to app/components/custom, create a file called logout-button.tsx and add the following code.

`jsx
import { logoutAction } from "@/data/actions/auth-actions";
import { LogOut } from "lucide-react";

export function LogoutButton() {
return (

);
}
`

Finally, let's import this button into our app/dashboard/page.tsx file for now.

The code should look like the following.

`jsx
import { LogoutButton } from "@/components/custom/logout-button";

export default function DashboardRoute() {
return (

Dashboard

);
}
`

Only some things are in place, so let's test our Sign In page.

Nice. Great job.

Preventing Common Security Vulnerabilities

Protect your application from common threats by following these best practices:

Use HTTP-only Cookies: Store session tokens in HTTP-only cookies to prevent access from client-side scripts.
Implement CSRF Protection: Guard against Cross-Site Request Forgery attacks by using CSRF tokens for state-changing operations.
Regularly Update Dependencies: Keep your packages up-to-date to patch known vulnerabilities.
Secure Environment Variables: Store secrets like JWT keys in environment variables, not in your codebase.
Handle Errors Safely: Avoid exposing sensitive information in error messages. Log errors securely on the server.
Limit Login Attempts: Implement rate limiting on authentication endpoints to prevent brute-force attacks.

To ensure your application adheres to industry standards, consider reviewing the Strapi security best practices, which include essential measures such as using the latest stable versions, adding HTTPS and SSL certificates, using strong passwords, taking regular backups, securing web hosts, modifying default settings, and installing security plugins.

By implementing these security measures and following best practices, you'll improve the resilience of your Next.js application against potential threats.

Testing and Debugging Authentication

Implementing authentication requires thorough testing to ensure your application is secure and functions correctly.

Writing Unit Tests for Authentication

Writing unit tests for your authentication logic helps catch errors early. Using testing frameworks like Jest, you can create tests for your login and signup API routes. For example, you might test that:

Valid credentials allow successful login.
Invalid credentials return an error.
Tokens are properly generated and stored.

By simulating API calls and checking responses, you can verify that your authentication system handles different scenarios as expected.

Debugging Common Issues

When issues arise, common problems include misconfigured middleware, incorrect token handling, or server-side errors. To debug effectively:

Check Middleware: Ensure your authentication middleware correctly protects routes and redirects unauthenticated users.
Verify Tokens: Confirm that tokens are properly signed and verified with the correct secret keys.
Inspect API Responses: Use tools like Postman or browser developer tools to examine responses from your authentication endpoints.
Review Server Logs: Look for error messages that can indicate where the authentication process is failing.

By systematically checking each part of your authentication flow, you can identify and fix issues to maintain a secure application.

Deploying Your Application

Preparing your Next.js 14 application for deployment involves ensuring that your server settings are properly configured for security and performance.

Configuring Server Settings

To secure your application in production, configure your server appropriately:

Use HTTPS: Implement HTTPS to encrypt data in transit, protecting sensitive information from being intercepted.
Securely Store Secrets: Store your JWT secret and other sensitive credentials securely using environment variables. Avoid hardcoding secrets into your codebase to prevent potential security breaches.
Implement CSRF Protection: Protect your application from Cross-Site Request Forgery (CSRF) attacks by implementing CSRF protection measures, especially for authentication endpoints.
Regularly Update Dependencies: Keep your application's dependencies up to date to patch security vulnerabilities and benefit from the latest features and improvements.

By carefully configuring your server settings, you improve the security and reliability of your deployed application.

Improving Your Application with Strapi

By securing your Next.js 14 application with strong authentication, you've improved your web app's security and user experience. For more performance and flexibility, consider integrating with Strapi's headless CMS solutions.

Strapi offers headless CMS solutions that enhance performance and flexibility, catering to various business needs. These solutions integrate with any frontend framework and allow content to be published across multiple channels simultaneously, improving site performance, scalability, and providing a personalized experience.

Conclusion

In this Next.js tutorial, we successfully built the Sign In and Sign Up pages for a Next.js application.

We implemented custom Sign In and Sign Up forms with error handling and integrated them with a backend using server actions.

Using useActionState and Zod for form validation ensured data integrity and provided user feedback.

We also covered setting up httpOnly cookies for secure authentication and protecting routes through Next.js middleware, establishing a solid foundation for user authentication flows in Next.js applications.

Thank you for your time, and I hope you are enjoying these tutorials.

If you have any questions, you can ask them in the comments or stop by Strapi's open office on Discord from 12:30 pm CST to 1:30 pm CST Monday through Friday.

See you in the next post, where we will work on building our dashboard.

Note about this project

This project has been updated to use Next.js 15 and Strapi 5.

If you have any questions, feel free to stop by at our Discord Community for our daily "open office hours" from 12:30 PM CST to 1:30 PM CST.

If you have a suggestion or find a mistake in the post, please open an issue on the GitHub repository.

You can also find the blog post content in the Strapi Blog.

Feel free to make PRs to fix any issues you find in the project, or let me know if you have any questions.

Happy coding!

Paul

Epic Next.js 15 Tutorial Part 3: Building Out Our Home Page

Paul Bratslavsky — Thu, 04 Apr 2024 19:02:30 +0000

In part 3 of our series, let's finish building out our home page. We will finish up our Hero Section, then move to our Features Section, and finally add our Top Navigation and Footer.

Part 1: Learn Next.js by building a website
Part 2: Building Out The Hero Section of the homepage
Part 3: Finishup up the homepage Features Section, TopNavigation and Footer
Part 4: How to handle login and Authentification in Next.js
Part 5: Building out the Dashboard page and upload file using NextJS server actions
Part 6: Get Video Transcript with OpenAI Function
Part 7: Strapi CRUD permissions
Part 8: Search & pagination in Nextjs
Part 9: Backend deployment to Strapi Cloud
Part 10: Frontend deployment to Vercel

Let's refactor our Hero Section to use the Next Image component.

Instead of using it directly, we will create a new component called StrapiImage to add a few additional quality live improvements.

Inside src/app/components, create a new file called strapi-image.tsx and paste it into the following code.

import Image from "next/image";
import { getStrapiMedia } from "@/lib/utils";

interface StrapiImageProps {
  src: string;
  alt: string;
  height: number;
  width: number;
  className?: string;
}

export function StrapiImage({
  src,
  alt,
  height,
  width,
  className,
}: Readonly<StrapiImageProps>) {
  const imageUrl = getStrapiMedia(src);
  if (!imageUrl) return null;

  return (
    <Image
      src={imageUrl}
      alt={alt}
      height={height}
      width={width}
      className={className}
    />
  );
}

You will notice that we have a helper function called getStrapiMedia; first, let's add it to our src/lib/utils.ts file and then review what it does.

export function getStrapiURL() {
  return process.env.NEXT_PUBLIC_STRAPI_URL ?? "http://localhost:1337";
}

export function getStrapiMedia(url: string | null) {
  if (url == null) return null;
  if (url.startsWith("data:")) return url;
  if (url.startsWith("http") || url.startsWith("//")) return url;
  return `${getStrapiURL()}${url}`;
}

getStrapiURL():
This function returns the URL of the Strapi API. We are setting our environment name to NEXT_PUBLIC_, which will be available in both the server and client components.

Note: only set public for none private items when using NEXT_PUBLIC_, they will be seen by all. You can learn more in Next.js docs.

getStrapiMedia():
This function is designed to process media URLs from the Strapi CMS. It accepts a URL as a string or null.

If the input url is null, the function returns null, which could be used in cases where an image or media file is optional.

If the input URL starts with "data:", it is returned as-is. This condition checks for data URLs, which are URLs that contain actual data (e.g., base64-encoded images) instead of linking to an external resource.

This is often used to embed small images directly in HTML or CSS to reduce the number of HTTP requests.

If the input URL starts with "http" or "//", it is also returned as-is. This covers absolute URLs, meaning the media is hosted outside the Strapi backend (possibly on another domain or CDN).

If none of the above conditions are met, the function assumes the url is a relative path to a resource on the Strapi backend.

In essence, these functions help manage and resolve media URLs in a Next.js application that uses Strapi as a headless CMS, ensuring that the application can handle local and external media resources effectively.

Now that we have our StrapiImage component let's use it in our Hero Section.

Navigate to src/app/components/custom/hero-section.tsx and make the following changes.

First, import our newly created component.

import { StrapiImage } from "@/components/custom/strapi-image";

Second, replace the img tag with the following.

<StrapiImage
  alt={image.alternativeText ?? "no alternative text"}
  className="absolute inset-0 object-cover w-full h-full aspect/16:9"
  src={image.url}
  height={1080}
  width={1920}
/>

And remove the following reference we had before.

const imageURL = "http://localhost:1337" + image.url;

This is now handled inside of our StrapiImage component.

Restart the application, and... you will see the following error.

Clicking on the link in the error will take you here, which explains the steps to fix this.

Inside the root of your project, locate the next.config.mjs file and make the following change.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "localhost",
        port: "1337",
        pathname: "/uploads/**/*",
      },
    ],
  },
};

export default nextConfig;

Now, when you restart your application, you should see the following with your image.

Nice, now let's work on our Features Section

Building Out Our Features Section

Modeling Our Features Section Data In Strapi

Looking at our Features Section UI, we can break it down into the following parts.

We have a section that has repeatable components with the following items.

Icon
Heading
Subheading

So, let's jump into our Strapi Admin and create our Features Section Component.

Let's start by navigating to Content-Type Builder under COMPONENTS, clicking on Create new component, and let's call it Features Section and save it under the layout category.

We will create the following fields.

Text -> Short Text - title
Text -> Long Text - description

Finally, let's create a repeatable component called Feature and save it under components

Now, add the following fields.

Text -> Short Text - heading
Text -> Long Text - subHeading
Enum -> with the following options

CLOCK_ICON
CHECK_ICON
CLOUD_ICON

Let's add our newly created Feature Section component to our home page.

Now, let's add some features data and save.

Navigate to Content Manager, select the Home Page, add the new Features Section block, and fill in your features.

We are already getting our page data; let's navigate to src/app/page.tsx and update our query to populate our feature repeatable component.

Let's update the homePageQuery query with the following changes. Remember in Strapi 5 we have to user the on flag to populate our dynamic zone components.

const homePageQuery = qs.stringify({
  populate: {
    blocks: {
      on: {
        "layout.hero-section": {
          populate: {
            image: {
              fields: ["url", "alternativeText"],
            },
            link: {
              populate: true,
            },
          },
        },
        "layout.features-section": {
          populate: {
            feature: {
              populate: true,
            },
          },
        },
      },
    },
  },
});

Also, let's update our getStrapiData function to use our new helper method, getStrapiURL. So it will look like the following.

So don't forget to import it.

import { getStrapiURL } from "@/lib/utils";

async function getStrapiData(path: string) {
  const baseUrl = getStrapiURL();

  const url = new URL(path, baseUrl);
  url.search = homePageQuery;

  console.log(url.href);

  try {
    const response = await fetch(url.href);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

Now, let's console log our block and see what the response looks like.

console.dir(blocks, { depth: null });

We should see the following data.

[
  {
    __component: "layout.hero-section",
    id: 3,
    heading: "Epic Next.js Tutorial",
    subHeading: "It's awesome just like you.",
    image: {
      id: 1,
      documentId: "fzwtij74oqqf9yasu9mit953",
      url: "/uploads/computer_working_3aee40bab7.jpg",
      alternativeText: null,
    },
    link: { id: 3, url: "/login", text: "Login", isExternal: false },
  },
  {
    __component: "layout.features-section",
    id: 2,
    title: "Features",
    description: "Checkout our cool features.",
    feature: [
      {
        id: 4,
        heading: "Save Time",
        subHeading:
          "No need to watch the entire video. Get the summary and save time.",
        icon: "CLOCK_ICON",
      },
      {
        id: 5,
        heading: "Accurate Summaries",
        subHeading:
          "Our AI-powered tool provides accurate summaries of your videos.",
        icon: "CHECK_ICON",
      },
      {
        id: 6,
        heading: "Cloud Based",
        subHeading: "Access your video. summaries from anywhere at any time.",
        icon: "CLOUD_ICON",
      },
    ],
  },
];

Notice that we are getting both our Hero Section and Features Section

Now, let's create a component to display our feature data.

Building Our Features Section Data In Next.js

Let's navigate to src/app/components/custom, create a file called features-section.tsx, and paste it into the following code.

function getIcon(name: string) {
  switch (name) {
    case "CLOCK_ICON":
      return ClockIcon;
    case "CHECK_ICON":
      return CheckIcon;
    case "CLOUD_ICON":
      return CloudIcon;
    default:
      return null;
  }
}

export function FeatureSection() {
  return (
    <div className="">
      <div className="flex-1">
        <section className="container px-4 py-6 mx-auto md:px-6 lg:py-24">
          <div className="grid gap-8 md:grid-cols-3">
            <div className="flex flex-col items-center text-center">
              <ClockIcon className="w-12 h-12 mb-4 text-gray-900" />
              <h2 className="mb-4 text-2xl font-bold">Save Time</h2>
              <p className="text-gray-500">
                No need to watch the entire video. Get the summary and save
                time.
              </p>
            </div>
            <div className="flex flex-col items-center text-center">
              <CheckIcon className="w-12 h-12 mb-4 text-gray-900" />
              <h2 className="mb-4 text-2xl font-bold">Accurate Summaries</h2>
              <p className="text-gray-500">
                Our AI-powered tool provides accurate summaries of your videos.
              </p>
            </div>
            <div className="flex flex-col items-center text-center">
              <CloudIcon className="w-12 h-12 mb-4 text-gray-900" />
              <h2 className="mb-4 text-2xl font-bold">Cloud Based</h2>
              <p className="text-gray-500">
                Access your video summaries from anywhere at any time.
              </p>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

function CheckIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

function ClockIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  );
}

function CloudIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
    </svg>
  );
}

We are currently hard-coding our data, which we will update in a moment. But let's navigate to src/app/page.tsx, import our newly created component, and see what we get.

import { FeatureSection } from "@/components/custom/features-section";

And update the return statement with the following code.

return (
  <main>
    <HeroSection data={blocks[0]} />
    <FeatureSection />
  </main>
);

When we restart our application and refresh the page with command + r, we should see the following.

Now, let's pass our data to our component and refactor our Features Section component to consume our data from Strapi.

return (
  <main>
    <HeroSection data={blocks[0]} />
    <FeatureSection data={blocks[1]} />
  </main>
);

And update our Features Component code with the following.

function getIcon(name: string) {
  switch (name) {
    case "CLOCK_ICON":
      return <ClockIcon className="w-12 h-12 mb-4 text-gray-900" />;
    case "CHECK_ICON":
      return <CheckIcon className="w-12 h-12 mb-4 text-gray-900" />;
    case "CLOUD_ICON":
      return <CloudIcon className="w-12 h-12 mb-4 text-gray-900" />;
    default:
      return null;
  }
}

interface FeatureProps {
  id: number;
  heading: string;
  subHeading: string;
  icon: string;
}

interface FeatureSectionProps {
  id: number;
  __component: string;
  title: string;
  description: string;
  feature: FeatureProps[];
}

export function FeatureSection({
  data,
}: {
  readonly data: FeatureSectionProps;
}) {
  const { feature } = data;
  console.dir(feature, { depth: null });
  return (
    <div className="">
      <div className="flex-1">
        <section className="container px-4 py-6 mx-auto md:px-6 lg:py-24">
          <div className="grid gap-8 md:grid-cols-3">
            {feature.map((feature) => (
              <div
                key={feature.id}
                className="flex flex-col items-center text-center"
              >
                {getIcon(feature.icon)}
                <h2 className="mb-4 text-2xl font-bold">{feature.heading}</h2>
                <p className="text-gray-500">
                  {feature.subHeading}
                </p>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

function CheckIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

function ClockIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  );
}

function CloudIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
    </svg>
  );
}

Our features component should now be utilizing our Strapi data.

We do have to make one more change in the page.tsx file to make our code dynamically display our blocks based on what we get from our response.

To accomplish this, we will create a new function called blockRenderer and define it in the page.tsx file.

It will look like the following:

  const blockComponents = {
    "layout.hero-section": HeroSection,
    "layout.features-section": FeatureSection,
  };

  function blockRenderer(block: any) {
    const Component = blockComponents[block.__component as keyof typeof blockComponents];
    return Component ? <Component key={block.id} data={block} /> : null;
  }

We can refactor the code in our page.tsx component with the following code.

export default async function Home() {
  const strapiData = await getStrapiData("/api/home-page");

  console.dir(strapiData, { depth: null });

  const { blocks } = strapiData?.data || [];
  return <main>{blocks.map(blockRenderer)}</main>;
}

The completed code in the page.tsx file should look like the following.

import qs from "qs";
import { getStrapiURL } from "@/lib/utils";

import { HeroSection } from "@/components/custom/hero-section";
import { FeatureSection } from "@/components/custom/features-section";

const homePageQuery = qs.stringify({
  populate: {
    blocks: {
      on: {
        "layout.hero-section": {
          populate: {
            image: {
              fields: ["url", "alternativeText"],
            },
            link: {
              populate: true,
            },
          },
        },
        "layout.features-section": {
          populate: {
            feature: {
              populate: true,
            },
          },
        },
      },
    },
  },
});

async function getStrapiData(path: string) {
  const baseUrl = getStrapiURL();

  const url = new URL(path, baseUrl);
  url.search = homePageQuery;

  console.log(url.href);

  try {
    const response = await fetch(url.href);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

const blockComponents = {
  "layout.hero-section": HeroSection,
  "layout.features-section": FeatureSection,
};

function blockRenderer(block: any) {
  const Component = blockComponents[block.__component as keyof typeof blockComponents];
  return Component ? <Component key={block.id} data={block} /> : null;
}

export default async function Home() {
  const strapiData = await getStrapiData("/api/home-page");
  console.dir(strapiData, { depth: null });
  const { blocks } = strapiData?.data || [];

  return (
    <main>
      {blocks.map(blockRenderer)}
    </main>
  );
}

Let's do one more quick refactor. In src, create a new folder named data with a file called loaders.ts.

And add the following code.

import qs from "qs";
import { getStrapiURL } from "@/lib/utils";

const baseUrl = getStrapiURL();

async function fetchData(url: string) {
  const authToken = null; // we will implement this later getAuthToken() later
  const headers = {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${authToken}`,
    },
  };

  try {
    const response = await fetch(url, authToken ? headers : {});
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error; // or return null;
  }
}

This will be our reusable function that will help us construct additional methods to load data.

And finally, let's create a new function, getHomePageData, to load our home page data.

export async function getHomePageData() {
  const url = new URL("/api/home-page", baseUrl);

  url.search = qs.stringify({
    populate: {
      blocks: {
        on: {
          "layout.hero-section": {
            populate: {
              image: {
                fields: ["url", "alternativeText"],
              },
              link: {
                populate: true,
              },
            },
          },
          "layout.features-section": {
            populate: {
              feature: {
                populate: true,
              },
            },
          },
        },
      },
    },
  });

  return await fetchData(url.href);
}

And finally, in the pate.tsx file, let's import this new function and delete the previous one.

Our final code should look like the following.

import { getHomePageData } from "@/data/loaders";

import { HeroSection } from "@/components/custom/hero-section";
import { FeatureSection } from "@/components/custom/features-section";

export default async function Home() {
  const strapiData = await getHomePageData();
  const { blocks } = strapiData?.data || [];
  return <main>{blocks.map(blockRenderer)}</main>;
}

const blockComponents = {
  "layout.hero-section": HeroSection,
  "layout.features-section": FeatureSection,
};

function blockRenderer(block: any) {
  const Component = blockComponents[block.__component as keyof typeof blockComponents];
  return Component ? <Component key={block.id} data={block} /> : null;
}

Nice. Let's move on and start working on our Header and Footer

Building Our Header and Footer With Strapi and Next.js

Taking a quick look at our Header and Footer, we see that they are simple enough. In the header, we have two items, logo text and button.

In the footer, we have logo text, text, and social icons.

Let's first start by taking a look at how we have represented this data in Strapi.

Modeling Our Header and Footer Data in Strapi

We are going to store the data for our' Header' and' Footer' using a single type.'

Navigating to Content-Type Builder under SINGLE TYPE and clicking on Create new single type.

We are going to call it Global. Go ahead and add the following fields.

Text -> Short Text - title
Text -> Long Text - description

Now, let's create the Header component. To start with, it will have two links: logo text and a call to action button.

In Strapi, inside the global page, let's add the following component.

Click on add another field to this single type.
Select the Component field type
Display Name will be Header
Select Category will be Layout
Click on Configure the component button
In the Name field, we will enter header
Finally, click on the Add the first field to component button

Now let's create two additional components called logoText and ctaButton to store our logo text and call to action button data.

Since both will be links, we can reuse a previously created Link component.

Select the Component field type
Click on Use an existing component
Click on the Select component button
Inside the Select a component field, select Link component
In the Name field, we will enter logoText
Select Single component and click the Finish button
Select Add another field to this component
Select the Component field type
Click on Use an existing component
- Click on the Select a component button
In the Name field, we will enter ctaButton
Inside the Select a component field, select Link component
Select Single component and click the Finish button
Select Single component and click the Finish button

The final Header component should look like the following.

Now that we are getting the hang of modeling content think about how we can represent our footer.

logoText
text
socialLink

We can create the Footer the same way we made our Header.

Can you do it on your own?

Our Footer will have the following fields.

Our footer has the following three items.

If you get stuck at any point, you can always ask in the comments or join us at Strapi Open Office hours on Discord 12:30 pm CST Monday - Friday.

Let's add some data to our Global single type.

Now, let's give the proper permissions so we can access the data from our Strapi API.

Navigate to Setting -> USERS AND PERMISSION PLUGIN -> Roles -> Public -> Global and check the find checkbox. We now should be able to make a GET request to /api/global and see our data.

Since we have already learned about Strapi's Populate, we can jump straight into our frontend code and implement the function to fetch our Global data.

Fetching Our Global Header and Footer Data

Let's navigate to src/data/loaders.ts and create a new function called getGlobalData; it should look like the following.

export async function getGlobalData() {
  const url = new URL("/api/global", baseUrl);

  url.search = qs.stringify({
    populate: [
      "header.logoText",
      "header.ctaButton",
      "footer.logoText",
      "footer.socialLink",
    ],
  });

  return await fetchData(url.href);
}

One thing to notice here is that we are using array notation in populate, which is a great way to populate items that don't have many nested items.

If you need more help with Populate and Filtering in Strapi, check out this post.

Now that we have our getGlobalData function let's use it.

Since our Header and Footer will live int the layout.tsx file, let's call our function there.

Since we can load data within our React Server Component, we can call the function there directly.

First, let's import our function.

import { getGlobalData } from "@/data/loaders";

Then, update the RootLayout with the following code.

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode,
}>) {
  const globalData = await getGlobalData();
  console.dir(globalData, { depth: null });
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

The complete code should look like the following.

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";

import { getGlobalData } from "@/data/loaders";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode,
}>) {
  const globalData = await getGlobalData();
  console.dir(globalData, { depth: null });
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

Nice. Now restart your Next.js application, and we should see the following output in the terminal console.

{
  data: {
    id: 2,
    documentId: 'fyj7ijjnkxy75h1cbusrafj2',
    title: 'Global Page',
    description: 'Responsible for our header and footer.',
    createdAt: '2024-10-02T18:44:37.585Z',
    updatedAt: '2024-10-02T18:44:37.585Z',
    publishedAt: '2024-10-02T18:44:37.594Z',
    locale: null,
    header: {
      id: 2,
      ctaButton: { id: 11, url: '/', text: 'Login', isExternal: false },
      logoText: { id: 10, url: '/', text: 'Summarize AI', isExternal: false }
    },
    footer: {
      id: 2,
      text: 'Made with love by Paul',
      socialLink: [
        {
          id: 13,
          url: 'www.youtube.com',
          text: 'YouTube',
          isExternal: true
        },
        {
          id: 14,
          url: 'www.twitter.com',
          text: 'Twitter',
          isExternal: true
        },
        {
          id: 15,
          url: 'www.linkedin.com',
          text: 'LinkedIn',
          isExternal: true
        }
      ],
      logoText: { id: 12, url: '/', text: 'Summarize AI', isExternal: false }
    }
  },
  meta: {}
}

That is amazing.

Building Our Header In Next.js

Alright, let's build out our Header component for our top navigation.

Just as a reminder, our logo has two items. A logo and button , so let's first create our Logo component.

Navigate to src/app/components/custom, create a file called logo.tsx, and add the following code.

import Link from "next/link";

function MountainIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
    </svg>
  );
}

interface LogoProps {
  text?: string;
  dark?: boolean;
}

export function Logo({
  text = "Logo Text",
  dark = false,
}: Readonly<LogoProps>) {
  return (
    <Link className="flex items-center gap-2" href="/">
      <MountainIcon className={"h-6 w-6  text-pink-500"} />
      <span
        className={`text-lg font-semibold ${
          dark ? "text-white" : "text-slate-900"
        }`}
      >
        {text}
      </span>
    </Link>
  );
}

It is a simple component that expects text as a prop to display the name of our site and a dark prop to allow us to make the text white on dark backgrounds.

Next, let's create our actual Header component. Navigate to src/app/components/custom, create a file called header.tsx, and add the following code.

import Link from "next/link";
import { Logo } from "@/components/custom/logo";
import { Button } from "@/components/ui/button";

interface HeaderProps {
  data: {
    logoText: {
      id: number;
      text: string;
      url: string;
    }
    ctaButton: {
      id: number;
      text: string;
      url: string;
    };
  }
}

export async function Header({ data }: Readonly<HeaderProps>) {
  const { logoText, ctaButton } = data;
  return (
    <div className="flex items-center justify-between px-4 py-3 bg-white shadow-md dark:bg-gray-800">
      <Logo text={logoText.text}/>
      <div className="flex items-center gap-4">
        <Link href={ctaButton.url}><Button>{ctaButton.text}</Button></Link>
      </div>
    </div>
  );
}

The component expects our header props, which we already get from our getGlobalData function found in the layout.tsx file.

So let's navigate to src/app/layout.tsx file and make the following updates.

First, let's import our Header component.

import { Header } from "@/components/custom/header";

Next, make the following change in the return statement.

return (
  <html lang="en">
    <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
      <Header data={globalData.data.header} />
      <div>{children}</div>
    </body>
  </html>
);

Restart your project, and you should now see our awesome top navigation.

Building Our Footer In Next.js

Now, let's go ahead and build out our footer.

Our footer will display the following items.

Navigate to src/app/components/custom, create a file called footer.tsx, and add the following code.

import Link from "next/link";
import { Logo } from "@/components/custom/logo";

interface SocialLink {
  id: number;
  text: string;
  url: string;
}

interface FooterProps {
  data: {
    logoText: {
      id: number,
      text: string,
      url: string,
    },
    text: string,
    socialLink: SocialLink[],
  };
}

function selectSocialIcon(url: string) {
  if (url.includes("youtube")) return <YoutubeIcon className="h-6 w-6" />;
  if (url.includes("twitter")) return <TwitterIcon className="h-6 w-6" />;
  if (url.includes("github")) return <GithubIcon className="h-6 w-6" />;
  return null;
}

export function Footer({ data }: Readonly<FooterProps>) {
  const { logoText, socialLink, text } = data;
  return (
    <div className="dark bg-gray-900 text-white py-8">
      <div className="container mx-auto px-4 md:px-6 flex flex-col md:flex-row items-center justify-between">
        <Logo dark text={logoText.text} />
        <p className="mt-4 md:mt-0 text-sm text-gray-300">{text}</p>
        <div className="flex items-center space-x-4">
          {socialLink.map((link) => {
            return (
              <Link
                className="text-white hover:text-gray-300"
                href={link.url}
                key={link.id}
              >
                {selectSocialIcon(link.url)}
                <span className="sr-only">Visit us at {link.text}</span>
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function GithubIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
      <path d="M9 18c-4.51 2-5-2-7-2" />
    </svg>
  );
}

function TwitterIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
    </svg>
  );
}

function YoutubeIcon(props: any) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
      <path d="m10 15 5-3-5-3z" />
    </svg>
  );
}

The code is responsible for rendering our Footer data.

selectSocialIcon(url: string): A function that determines which social media icon to display based on the URL provided. It supports YouTube, Twitter, and GitHub, returning the corresponding icon component or null if the URL does not match these platforms.

note: When adding social links, I only included Twitter, Github, and YouTube. If you have additional links, you will need to add more icons to represent them.

Here is what my response looks like with my social links.

[
  {
    id: 25,
    url: "www.youtube.com",
    text: "YouTube",
    isExternal: true,
  },
  {
    id: 26,
    url: "www.twitter.com",
    text: "Twitter",
    isExternal: true,
  },
  {
    id: 27,
    url: "www.github.com",
    text: "GitHub",
    isExternal: true,
  },
];

Now that we have completed our footer, let's add it to the layout.tsx file in the root of our app folder.

First, let's import our Footer component.

import { Footer } from "@/components/custom/footer";

Next, make the following change in the return statement.

return (
  <html lang="en">
    <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
      <Header data={globalData.data.header} />
      {children}
      <Footer data={globalData.data.footer} />
    </body>
  </html>
);

Now, if you restart the Next.js application, you should see the following changes.

Yay, we are now getting our data from our Strapi API.

How To Populate Our Metadata Dynamically In Next.js

We have a title and description on our Global page in Strapi.

Let's use it as our metadata information in our app.

Let's look at the src/app/layout.tsx file. We will see the following.

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

This is one way to set metadata in Next.js, but as you notice, it is hardcoded. Let's look at how we can add metadata dynamically.

To dynamically populate our metadata, we must fetch it using our metadata function.

We already have our getGlobalData, but that function returns not just the title and description but also the rest of our data to populate our Header and Footer.

Let's create a new function called getGlobalPageMetadata, which only returns the title and description fields.

Let's navigate to src/data/loaders.ts and add the following code.

export async function getGlobalPageMetadata() {
  const url = new URL("/api/global", baseUrl);

  url.search = qs.stringify({
    fields: ["title", "description"],
  });

  return await fetchData(url.href);
}

In the function above, we ask Strapi to return only the title and description, which are the only data we need for our metadata.

The response will look like the following.

data: {
  id: 4,
  documentId: 'fyj7ijjnkxy75h1cbusrafj2',
  title: 'Global Page',
  description: 'Responsible for our header and footer.'
},

Let's implement dynamic metadata inside our layout.tsx file.

Let's update our current metadata function with the following.

First, let's import the following.

import { getGlobalData, getGlobalPageMetadata } from "@/data/loaders";

Now, replace the previous export const metadata: Metadata with the following code.

export async function generateMetadata(): Promise<Metadata> {
  const metadata = await getGlobalPageMetadata();

  return {
    title: metadata?.data?.title ?? "Epic Next Course",
    description: metadata?.data?.description ?? "Epic Next Course",
  };
}

Now, our metadata is dynamically set from our Strapi Api.

The completed code should look like the following:

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";

import { getGlobalData, getGlobalPageMetadata } from "@/data/loaders";

import { Header } from "@/components/custom/header";
import { Footer } from "@/components/custom/footer";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export async function generateMetadata(): Promise<Metadata> {
  const metadata = await getGlobalPageMetadata();

  return {
    title: metadata?.data?.title ?? "Epic Next Course",
    description: metadata?.data?.description ?? "Epic Next Course",
  };
}

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const globalData = await getGlobalData();
  console.dir(globalData, { depth: null });
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Header data={globalData.data.header} />
        {children}
        <Footer data={globalData.data.footer} />
      </body>
    </html>
  );
}

Nice job.

How To Create A Not Found Page In Next.js

Our landing page looks great, but we have a small problem. We have not yet implemented the login page, so when we click our link, we get the default not found page.

But why, if we wanted to make it prettier, how can we accomplish this?

Well, we can create the not-found.js page. You can learn more about it here in the Next.js docs.

Navigate to src/app, create a file called not-found.tsx, and add the following code.

import Link from "next/link";

export default function NotFoundRoot() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
      <div className="space-y-4">
        <BugIcon className="h-24 w-24 text-pink-500 dark:text-pink-400" />
        <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100">
          Oops!
        </h1>
        <p className="text-lg text-gray-700 dark:text-gray-300">
          This page has left the building.
        </p>
        <Link
          href="/"
          className="inline-flex h-10 items-center justify-center rounded-md bg-gray-900 px-8 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 dark:focus-visible:ring-gray-300"
        >
          Go back home
        </Link>
      </div>
    </div>
  );
}

function BugIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="m8 2 1.88 1.88" />
      <path d="M14.12 3.88 16 2" />
      <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
      <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" />
      <path d="M12 20v-9" />
      <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
      <path d="M6 13H2" />
      <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
      <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
      <path d="M22 13h-4" />
      <path d="M17.2 17c2.1.1 3.8 1.9 3.8 4" />
    </svg>
  );
}

Now restart your app and navigate to our login page. You will be treated to this nicer page. It can be better, but you get the point.

Wouldn't it be nice to show a loaded spinner when navigation pages are displayed? Yes, it would. Let's see how we can do that.

How To Create A Loading Page In Next.js

There are many ways to handle the loading state in Next.js; we will start with the simplest one.

This creates a file called loading.tsx. You can read about other ways here.

Navigate to src/app, create a file called loading.tsx, and add the following code.

export default function Loading() {
  return (
    <div className="fixed inset-0 flex items-center justify-center bg-gray-200 bg-opacity-50">
      <div className="animate-spin h-12 w-12 border-t-4 border-pink-600 rounded-full" />
    </div>
  );
}

That is all we need to do. Now, let's restart our application and see the amazing loader in action. If you find my loader too boring, feel free to add your own design flair to your application.

Finally, let's take a look at how we can handle errors in our application.

How To Handle Errors In Next.js

Now, let's examine how to handle errors in Next.js to prevent our app from crashing completely.

Right now, if I go to the src/data/loaders.ts and add the following, I can throw an error inside the getHomePageData function.

throw new Error("Test error");

The complete function will look like the following.

export async function getHomePageData() {
  throw new Error("Test error");

  const url = new URL("/api/home-page", baseUrl);

  url.search = qs.stringify({
    populate: {
      blocks: {
        populate: {
          image: {
            fields: ["url", "alternativeText"],
          },
          link: {
            populate: true,
          },
          feature: {
            populate: true,
          },
        },
      },
    },
  });

  return await fetchData(url.href);
}

Our app will break with an ugly error.

We can fix this by creating an error.ts file to break our app gracefully. You can read more about Next.js errors here

Let's create a file called error.tsx inside our app folder and paste it into the following code.

"use client";
import { useEffect } from "react";
import { cn } from "@/lib/utils";

export default function Error({
  error,
}: {
  error: Error & { digest?: string },
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
      <div className="space-y-4">
        <BugIcon className="h-24 w-24 text-pink-500 dark:text-pink-400" />
        <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100">
          Oops! Something went wrong.
        </h1>
        <p className="text-lg text-gray-700 dark:text-gray-300">
          This is an error page. Please try again later.
        </p>
        <p className="text-pink-800 italic">{error.message}</p>
      </div>
    </div>
  );
}

function BugIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={cn(className)}
    >
      <path d="m8 2 1.88 1.88" />
      <path d="M14.12 3.88 16 2" />
      <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
      <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" />
      <path d="M12 20v-9" />
      <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
      <path d="M6 13H2" />
      <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
      <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
      <path d="M22 13h-4" />
      <path d="M17.2 17c2.1.1 3.8 1.9 3.8 4" />
    </svg>
  );
}

Now, when our app crashes, it does not look as scary.

Let's see if we can fix this.

Excellent, we covered a lot in this post. Let's do a quick recap of what we covered.

Conclusion

In Part 3 of the Epic Next.js 14 Tutorial series, we focused on completing the home page design of a real-life project. The tutorial covered several key areas:

Refactoring the Hero Section: we refactored the Hero Section to use the Next.js Image component for optimized image handling. This included creating a custom StrapiImage component for additional quality-of-life improvements.

Building the Features Section: This Section involved modeling the Features Section data in Strapi, creating corresponding components in Next.js, and implementing functionality to display features dynamically from the Strapi CMS.

Displaying Dynamic Meta Data: We examined how to get our metadata from Strapi and display it on our layout.tsx page.

Top Header and Footer: We created our Header and Footer, leveraging Strapi to manage and fetch global data like logo texts and social links.

We finished by covering how to handle loading, not found, and errors pages.

I can't wait to see the next post, where we cover how to create our Sign In and Sign Up pages. This will include form validation with Zod, handling form submission with server actions, creating and storing http only cookies, and protecting our routes with Next.js middleware.

I am so excited. Thanks for checking out this post. I look forward to seeing you in the next one.

Note about this project

This project has been updated to use Next.js 15 and Strapi 5.

If you have any questions, feel free to stop by at our Discord Community for our daily "open office hours" from 12:30 PM CST to 1:30 PM CST.

If you have a suggestion or find a mistake in the post, please open an issue on the GitHub repository.

You can also find the blog post content in the Strapi Blog.

Feel free to make PRs to fix any issues you find in the project, or let me know if you have any questions.

Happy coding!

Paul