strapi

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

Create a Strapi Project From the Terminal

Now that we've created our project, we need to set up our project to hold data. We will create a post collection type with all of the fields we want to have on our posts. With that created, we'll create a couple of mock posts for testing. 

Creating a Collection Type for Posts in Strapi

With our mock data setup, let's make some API calls to our Strapi project. We will need to set up our permissions so that only people we want to make requests can. 

To make my API calls, I use the [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) in VSCode. We can currently make calls to our API without any authentication. 

In our Strapi project, we can create API Tokens to make REST API calls for our data. 

Configuring API End User Permissions in Strapi

GraphQL has an amazing plugin for Strapi to allow us to query our data easily. In the Strapi marketplace, we can search and copy the install command to use in our terminal. In our localhost, after restarting the server, navigate to the `/graphiql` endpoint to view and use the GraphQL playground.

graphql

Querying the Strapi GraphQL API

For our front end, we will be using Next.js. To create a new application, simply type `npx create-next-app client` in your terminal. We can `cd` into our project and run the dev server with `yarn dev`. 

I'll also add some styling in the Home.module.css file that you can copy from the github link below. 

Creating a Next.js project

Now we are wanting to query that mock data in our application. We'll start off by installing `npm i @apollo/client cross-fetch graphql` in our Next.js application. 

We will create a new function called [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) which will do all of our fetching using Apollo and GraphQL. 

Query an entry from Strapi in Next.js using Apollo, cross-fetch, and GraphQL

We'll start by creating a new folder and file `components/BlogList.js`. This component will be what we use to get data from Strapi as well as the current date to display on our home page. 

We will have it display the slug, title, author, and published date with a link to each of the posts. We will also do some styling which will be quickly glossed over as the focus of the lesson is more on the data and not the styling but you can access the styles in the github link below. 

Lastly, we'll import our component `BlogList` to our main `index.js` file and render it on the page. 

Create a BlogList component in Next.js

One of the main benefits of using Next.js is the smooth way to setup dynamic pages. 

In our `pages` folder, create a new folder and file called `blog/[slug].js`. The brackets are what tell Next that the file is going to be a dynamic page. 

Here we are going to use an almost duplicate `getStaticProps` function that we created in the previous lesson. The difference is we are going to be bringing in our page context to fill out the right page data. 

Lastly, we will loop over all of our posts using a for loop. 


Create Next.js dynamic pages

Now that we can query for the data and have it set up dynamically, we need to create a template page that will have our post data. 

In the `[slug].js` file, we will add in our imports and create a function called `Blog`. In this function, we will render out a header that will have the title, author, and a link back to the home page. And lastly, we will render out the body of our post. 

The last think we will want to do is add in some styling which you can get from the github link below. 

Build a Template for Dynamic Pages

For writing out the blog posts, it was done 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`. 

In our `[slug].js` file, we import `ReactMarkdown` and replace the `p` tag for our body, where we are rendering the markdown, with `<ReactMarkdown>`. 

The last thing we want to do is have it render pictures. Unfortunately, React Markdown doesn't automatically render images so we are going to setup Cloudinary in the next lesson. 

Install and Use React Markdown in a Next.js Application

To be able to render images in our markdown files, we are going to use Cloudinarly's provider on Strapi. In the Marketplace in our app on Strapi, we can copy the install command and use it in our app. `npm install @strapi/provider-upload-cloudinary`. 

In our `config` folder, we will create a new `plugins.js` file and past in some code. (You'll be able to snag that from the github link below). We'll also setup our `env` folder for our cloudinary variables. 

cloudinary

Installing and Configuring the Strapi Cloudinary Provider

Now we have everything how we want it! Let's get our application deployed to production using Heroku. 

First, we need to initialize our app and create a repo on github for it. We will be using Heroku in the command line. We will create our Heroku app, add our addons, and configure Heroku how we want. 

Lastly, once everything is setup and configured, we push our changes and launch Heroku. `git push heroku HEAD:main`. 

Deploy a Strapi Application to Heroku

With our Strapi app deployed to Heroku, we need to deploy our front end. In this lesson, we are going to be deploying to Vercel. 

Before we start on that, we are going to make some finishing touches, styling-wise, to our front end which will all be available in github. 

Now we will create a repo to push our Next.js app to. On [vercel's](https://vercel.com/) site, we will create a new project and configure it to be a Next.js application as well as add in our environmental variables. Once that is done, our app will be live! 

Thank you for watching my course on how to Build a Modern CMS Driven Web Application using Strapi and Next.js. 

Deploy a Next.js Application to Vercel

After the course, you’ll be ready to communicate with a GraphQL API regardless of server-side implementation using the GraphQL query language.

GraphQL Query Language

Lazar takes you beyond just getting started, and will teach you everything you need to know about the fundamentals of Next.js. 

Fundamental Next.js API and Patterns

In this course, Michael Chan will teach you how to integrate Storybook 6.3 with Next.js 11 so that you can flawlessly build UIs. 

Build a Modern CMS Driven Web Applications using Strapi and Next.js

Daniel Phiri

You might also like these resources:

GraphQL Query Language

Fundamental Next.js API and Patterns

Integrate Storybook in a Next.js Application

Course Content

You might also like these resources:

GraphQL Query Language

Fundamental Next.js API and Patterns

Integrate Storybook in a Next.js Application