 Resources from Daniel Phiri in 2024

**Developers aren’t the only ones working on sites.** 

Marketers, copywriters, designers, and other non-coding roles all need to be able to make content changes. If you don't want to be bothered to open a PR every time a typo needs fixed, you *need* a CMS. 

And Strapi is an *amazing* CMS option.  

Strapi helps you quickly build a robust content API. You can host it yourself, it supports both RESTful and GraphQL, handles your authentication, lets you bring team members and it's highly customizable with plugins and extensions. 

You can take those gains even further by adding **Next.js 13 to the stack.** 

Next.js is fast, supports both server and client-side rendering, and features dynamic routes. Once you are generating dynamic pages from your CMS you’ll see just how powerful the combination of Strapi and Next.js is!

**In this course you will do the following:** 

- Building Content Models with Strapi
- Fetching Data from your Headless CMS
- Using React Server Components
- Using the Next.js App directory
- Setting up pagination in Strapi and Next.js
- Parsing and rendering content in your Next.js application
- Connecting external services to your Headless CMS (like Cloudinary for Media Management)
- Deploying your Next.js and Strapi Applications to a production environment
- Setting up and using Strapi Plugins
Transferring data between your Strapi environments

By the end of this course you’ll be building pages and managing your content like a pro!

strapi

Modern CMS Driven Web Applications with Strapi and Next 13

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

In this lesson, you will learn how to conditionally render images in Vue.js using the `v-if` directive. We will look at defining data properties that will control whether an image is rendered or not and how to use the `v-if` directive

Conditionally Render Images in Vue.js using the v-if Directive

Next.js is a minimalistic framework for server-rendered React applications.

We'll learn how to connect a Next.js 13 application to Strapi's API by setting environment variables and defining an async function that uses fetch to get data from your Strapi backend.

You'll notice that on our home page, we are accessing sensitive environment variables within the `getPosts` function that will make the query for our posts that live in Stapi. This would normally be ill-advised as you don't want to leak sensitive information to the client side. However, since we are using Next.js 13 app directory components default to being Server Components which means we can safely access this sensitive information without worrying about it being exposed to the client.

Once we get data from Strapi we can map over it and display the titles as a list on our home page.

Query an Entry from Strapi with Next.js 13 Server Components

There is a lot of extra functionality that you can import into your Strapi application through Strapi plugins. 

To demonstrate how easy this is, we'll install the `strapi-todo-plugin` and add a To-Do feature to our Strapi application that will help manage our content.

Install and Use a Strapi Plugin

Inviting users to your Strapi application is simple. First, we'll create a role for editors so they can't publish or delete content then we'll add the user and fill out name and email. This gives us a URL that we can send to the new collaborator and they can set their password and log in to the Strapi dashboard.

Invite a New User to Your Strapi App

When a new Strapi version is available, you'll see a notification in your admin panel. You can also check the [Strapi GitHub releases page](https://github.com/strapi/strapi/releases) that is linked in the notification to see what's new in the latest version and take note of the latest version number. 

Once we upgrade the Strapi dependencies and install again, you'll notice the notification is gone and when you check settings the version number has been updated. To update production, you push your changes to GitHub and run `git push heroku HEAD:main`.

Upgrade a Strapi App in Development and Production

The next step is to deploy our front end to vercel. First we push our next app to GitHub then we create a new project on vercel, we set our environment variables and deploy our app. Once deployed we can see our app live on the web.

Deploy a Next.js 13 Application to Vercel

There are times that when deploying your Strapi application you'll want the data and settings you developed with to be transferred to your production environment. To do this we can use Strapi's data transfer feature. 

To start the data transfer we will need to log into the production environment and create a transfer token. When the token is created we will just need to run `yarn strapi transfer --to :heroku-url` and paste the transfer token when prompted. You'll notice that all the data is present in your production enviroment as well as the roles you set up in development.

Transfer Data Between Environments with Strapi Data Transfer

Now that we've got a functioning application it's time to deploy. For Strapi, we'll use Heroku to deploy for production. To do so we will need to create a production environment file for `database.js` and `server.js`, then we log into Heroku and created a new app. Once logged in we will set all the environment variables in Heroku. Finally, we pushed our code to Heroku and saw our application running live on the web.

Deploy a Strapi Application to Heroku

cloudinary

We'll learn how to integrate Cloudinary into our Strapi application so that we can upload image assets in our Strapi dashboard and the resulting image will be stored in Cloudinary and ready for use in our application.

We'll create a `config/plugins.js` file and paste in some config code that sets Cloudinary as the provider with `cloud_name`, `api_key`, and `api_secret`.

Then we'll install the Cloudinary provider plugin with `npm install @strapi/provider-upload-cloudinary`, add the middleware security that lets us use Cloudinary, and finally add Cloudinary credentials to our `.env` file.

Install and Add the Cloudinary Provider to a Strapi Application

We want to add pagination to our blog page so that we can display a limited number of posts per page & allow users to navigate between posts. We'll do this by using Strapi's built-in pagination service to fetch a limited number of posts per page & display them on the page.

Strapi has a meta object that is returned with data that we can use to manipulate the page size & which page we are on. On the home page, we will update our `getPosts` function to set take a `page` parameter so that we can fetch the posts for the page that we are on. We'll also play with the `pageSize` that is set to see different numbers of posts being returned. In our API call we'll add `?pagination[page]=${page}&pagination[pageSize]=3` to set the page & the number of posts per page.

When this is up & running, we'll import a pre-built `Pagination` component that handles navigating between next & previous pages. Check out the [component logic here](https://github.com/malgamves/next-13-website-template/blob/main/components/Pagination.js).

Add Pagination with the Meta Object Returned from Strapi in Next.js 13

We wrote out our posts in markdown. Next.js doesn't automatically render markdown how we want it, so we are going to install and use the package `react-markdown`.

Using React Markdown in Next.js

We need to set up error handling so that if something goes wrong our in our app our users aren't left with a broken page and not know what to do. Next.js 13 has error handling that we can access at the route level. To handle errors on our dynamic pages we'll create an `error.js` file within our `[...slug]` folder. 

Any errors that occur within these routes will display the component that we define here. It should be noted that errors are handled on the client so you have to set the `"use client"` directive at the top of your error pages.

On our error page we will maintain the style of our application and direct the user back to the home page informing them that something went wrong. You can even use the `reset` prop to refresh the page and try again if that's the behavior that you want.

Handle Runtime Errors in Next.js 13 Nested Routes

Now that we have single post data loading on our dynamic page, let's build a template for the page to make it look better. We'll utilize more of the pre-built components that came with the template to the layout.

We'll also use Next.js `Link` Component to link back to the home page.

You can check out the [components folder](https://github.com/malgamves/next-13-website-template/tree/main/components) to gain a better understanding of the styles that are being applied to the page.

Build a Page Template for a Dynamic Page in Next.js 13

We want to navigate to a post page using the dynamic pages feature of Next.js. We'll do this by creating a dynamic page that will use the slug of the post to fetch the post from Strapi and display it on the page.

To do this we'll start by creating a new page called `[...slug]/page.js`. This will create a dynamic page that catches all routes that are not statically defined. On this page, we can access the slug from the `params` prop and use it to fetch the post from Strapi.

We can pass the slug to a function called `getPage` that will set the slug as a filter on our query to Strapi to only get the posts that match the slug (it's unique so this will always return one post).

Set up Dynamic Pages in Next.js 13 App Directory and Query with Page Slug

Now that we have data displayed on our home page, let's display that data in a more user-friendly format. 

We have a `List` component from our template that maps over the data and displays titles that match the design of the site but we can modify this to give a preview of the post. 

We'll truncate the summaries, reformat dates, and style the component to achieve a more cohesive look.

Create and Edit a List Component to Match Design Guidelines in Next.js 13

We'll cover the basics of building a new page in Next.js, specifically an "About Us" page. If you've used Next before, this will feel very similar to creating a new page in the `pages` directory. 

While doing this we will also be introduced to some of the components that come with the template, such as the `PageContainer`, `Main`, `Title`, and `Description` components which you can check out [in more detail here](https://github.com/malgamves/next-13-website-template/tree/main/components).


Create an About Us Page inside the Next.js 13 App Directory

We will start our website development by creating a [new modern CMS client app with a Next.js 13 template](https://github.com/malgamves/next-13-website-template) that comes with pre-made components and uses Tailwind CSS to style it.

You'll notice as you dig through the files in this template that `next.config.js` has an experimental `appDir` flag set to true. This will allow us to use the new features that ship with Next 13.

Scaffold a Web App with a Next.js 13 Template

GraphQL is a powerful technology that lets you query the exact data that you need when you need it on your front end. Strapi allows for GraphQL integration through a plugin.

You can install GraphQL with the following command:

```bash
yarn strapi install graphql
```
You'll notice this adds GraphQL in your plugins tab within Strapi. 

When that is installed you can navigate to `/graphql` in your Strapi project and query the data you have. 

Install and Query GraphQL API in Strapi

We have a problem right now in that if you were to try and fetch these posts from the API, you would get a 403 error. And that's because we haven't set up the end user permissions for the API to be able to access this content. So let's go ahead and do that now.

We'll modify the User permissions for the `Post` role and give public access to `find` and `findOne`.

Set up API End User Permissions to Make REST Queries in Strapi

The first thing we want to do is model the content that will be presented on our website. To do this we'll create a Post content type that will have several fields with types including text, rich text, date, and UID. 

After we create the content type you'll see how to manually create posts through the Strapi dashboard.

Topics

Instructors

Content Type

Daniel Phiri