The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Engineering

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

Tutorials

How tos

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

Ecosystem

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

## Introduction
Have you ever wondered how to automate the deployment of your frontend projects, such as [Next.js](https://nextjs.org/) or [Astro](https://astro.build/), whenever changes are made based on an external event, such as content changes in your backend or Headless CMS, without directly touching your code?

In this tutorial, you will learn how to trigger your frontend deployments based on when content changes in your [Strapi CMS](https://strapi.io/) using Strapi webhooks alongside [Vercel](https://vercel.com/) deploy hooks. 


## Triggering Frontend Deployments
### What is Frontend Deployment?
Frontend deployment refers to publishing the latest version of a frontend code to a production environment.

![Automated Frontend Deployment using Vercel Deploy Hook and Strapi Web Hook.png.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Automated_Frontend_Deployment_using_Vercel_Deploy_Hook_and_Strapi_Web_Hook_png_a2fa026c14.png)
*Automatic deployment process*

### Reasons for Deployment

You would want an automatic redeployment of your frontend applications for several reasons. Here are a few reasons.

1. Content updates.
2. Performance Enhancement.
3. Template or Design Updates.
4. Plugin or Dependency Update.
5. Security patches, etc.

### Methods of Triggering Deployments
Triggering frontend deployments is not limited to webhooks alone, although this method is popular and efficient. 

* **Automatic Deployments:** These are Used to automate deployments by listening to events such as content changes or pushes to the repository and triggering actions in response. A good example is using webhooks.
* **Continuous Integration/Continuous Deployment (CI/CD) Pipelines:** CI/CD tools like Jenkins, GitLab CI, and GitHub Actions can automate the deployment process.
* **Scheduled Deployments:** Some systems allow deployments to be scheduled at specific times. A good example is the use of **Cron jobs**.
* **API Calls:** Custom backend scripts or codes can trigger deployment through API Calls.
* **Manual or Forced Deployment:** Through command-line interfaces or deployment tools provided by hosting platforms.


## What is a Strapi Webhook?
[Strapi CMS](https://strapi.io/) is the leading open-source headless CMS. It is 100% JavaScript / TypeScript and fully customizable. Strapi comes with an easily customizable admin panel and API. You can consume the Strapi API from any client (React, Vue, Angular), mobile apps, or even IoT devices using REST or GraphQL. You can also extend your content management with custom plugins in seconds. Among other features is the Strapi webhook.


A Webhook is a construct used by an application to notify other applications that an event has occurred. Developers can configure webhooks to trigger upon content creation, updates, or deletions. 

The real power of Strapi webhooks lies in their ability to integrate seamlessly with external systems, enabling real-time updates and processes. For an in-depth understanding, Strapi's official documentation provides a comprehensive overview [here](https://docs.strapi.io/dev-docs/backend-customization/webhooks#entrycreate).

You can learn more about Webhooks in this blog post: [Webhooks explained and how to use them in Strapi](https://strapi.io/blog/webhooks).

## What is a Vercel Deploy Hook?
Vercel is a cloud platform that provides developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web. Among these services is frontend hosting. 

[Vercel's](https://vercel.com/) Deploy Hooks allows you to create URLs that accept HTTP POST requests to trigger deployments and re-run the build step of your frontend application. 

These URLs link uniquely to your project, repository, and branch, so there is no need to use an authentication mechanism or provide a payload to the POST request.

According to the Vercel official documentation, here are various ways you may want to use a deploy hook:
* Automatic deployments on content changes from a Headless CMS
* Scheduled deployments by configuring third-party cron job services to trigger the Deploy Hook
* Forced deployments from the command line

You can learn more about Vercel deploy hooks [here](https://vercel.com/docs/deployments/deploy-hooks).

## Strapi Cloud Setup
As you know, we will demonstrate how to trigger deploy hooks in Vercel using Strapi webhooks.

We will start by setting up our Strapi backend locally and deploying to production using **[Strapi Cloud](https://strapi.io/cloud)**. While at this, we will create a webhook that will trigger our Vercel deploy hook. This will be a continuation of the Strapi backend project that we built in the final part of the Astro/Strapi tutorial series: [Astro & Strapi Website Tutorial: Part 3 - Project Build](https://strapi.io/blog/astro-and-strapi-website-tutorial-part-3-project-build).

For the frontend, we will deploy our Astro frontend application to Vercel and create a deploy hook. This will also continue the Astro frontend project that was built in the final part of the Astro/Strapi tutorial series.

### 1. Clone or Fork Strapi and Astro Projects
As shown below, we already have our Strapi backend application in this [Github repository](https://github.com/Theodore-Kelechukwu-Onyejiaku/astro-strapi-tutorial). The name of the repository is `astro-strapi-tutorial`.

![deployment branch.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/deployment_branch_01bd8d7de4.png)


Make sure to clone or fork the `deployment` branch by running the command below:

```bash
git clone --single-branch --branch deployment https://github.com/Theodore-Kelechukwu-Onyejiaku/astro-strapi-tutorial.git
```

The command above will clone a single branch, which is the `deployment` branch.

#### Project Folder Structure
If the cloning was successful, you should have the following file tree:

```
astro-strapi-tutorial/
┣ astro101/
┣ blog/
┣ images/
┣ ui/
┗ .gitignore
```

Inside the `astro-strapi-tutorial` repo you cloned above, you have the following directories:
* `astro101`: This is the source code for the part 1 of the [Astro & Strapi Website Tutorial: Part 1 - Intro to Astro tutorial](https://strapi.io/blog/astro-and-strapi-website-tutorial-part-1-intro-to-astro).
* `blog`: This is the Strapi backend. It houses the backend of your website for the Harry Potter universe.
* `images`: These are the images you used in the tutorial series.
* `ui`: This represents the complete Astro frontend UI.

### 2.  Strapi Cloud Setup: Deploy Strapi Backend Project
#### Step 1: Log in to Strapi Cloud
Head over to Strapi Cloud and create a new project. If you are new to Strapi cloud, you can signup [here](https://cloud.strapi.io/login).

![login to strapi cloud.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/login_to_strapi_cloud_c8a2ccd7ae.png)

You can choose to continue with any of the options above. For this tutorial, you will continue with GitHub since your code is already on Github.

#### Step 2: Create a new project
The next step will be to create your project. So click on any of the "Create project" buttons as shown below.

![create a new project.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_a_new_project_27ad574831.png)

#### Step 3: Select a Plan
Make sure to select the plan that best fits your use case.

![select a plan.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/select_a_plan_614a27c4e7.png)

#### Step 4: Import a Github Repository
After selecting a plan, the next step would be to import the Github repository. Select your Github account in the `Account` input. And select the repo, which is `astro-strapi-tutorial` as the `Repository` of your project.

![import repository.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/import_repository_6b8dc492ce.png)

#### Step 5: Setup General Information
The next step would be to enter the `Display name` and the `Git branch`. The former could be any name, here it is called `astro-strapi-backend`. The latter is the Github branch that you want to deploy. And as highlighted earlier, it should be the `deployment` branch.

After filling it, make sure to click on "show advanced settings" as shown below.

![setup general information.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/setup_general_information_a05c33aecf.png)

#### Step 6: Advanced Settings and Create Project
Recall that your code contains some directories and that the `blog` directory represents your Strapi backend. For that reason, you have to set the `Base directory` for this project as `/blog`. You will leave the rest such as `Region` and `Node version` as default and click the "Create project" button to start the project creation

![advanced settings.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/advanced_settings_53124e835e.png)

When the project is successfuly created, you should see the following:

![successful strapi cloud deployment.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/successful_strapi_cloud_deployment_4efc0e386c.png)

Make sure to click on "Visit app" to view the deployed app. After that, fill in your credentials so as to access your Strapi backend.

### 3. Data Migration: Transfer Data from Local Strapi Instance to Strapi Cloud 
> **NOTE:** You can skip this section of Strapi data transfer if you have already populated your Strapi cloud instance with data.

When you access the backend in Strapi cloud, you notice that it is empty, even though you already have contents in your local Strapi instance, recall part 3 of the Astro/Strapi tutorial. 

![empty strapi cloud instance.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/empty_strapi_cloud_instance_a83ec4c382.png)


For this reason, you want to automatically run a data migration to transfer all your data including image assets, links, configurations, entity types and so on to the instance on your Strapi cloud.

#### Step 1: CD Into Local Strapi Instance
To do this, first you must CD into the directory where yur local Strapi backend instance resides. Recall that this is called `blog`.

```bash
cd blog
```
#### Step 2: Run the data transfer command
To transfer the data from your local Strapi instance to Strapi cloud run the command below:

```bash
npm run strapi transfer -- --to destinationURL
```
Replace the `destinationURL` with the full URL to the admin panel. Here is an example: https://generous-growth-3f7f68bbac.strapiapp.com/admin.

After running the command above, you will prompted to enter a transfer token which you will create in the next section.

![data transfer command.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/data_transfer_command_7f6a8e8ca4.png)


#### Step 3: Generate Transfer Token
Click on ***Settings > Transfer Tokens > Add new Transfer Token*** to create a new transfer token.

![generate transfer token.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/generate_transfer_token_cd22f34e05.png)

Fill in the details. Make sure to set the the `Token duration` to `Unlimited` and the `Token type` to `Full Access`. 

![strapi token creation fill in the details.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/strapi_token_creation_fill_in_the_details_4ef9d77570.png)

Finally, hit the "Save" button to create a transfer token. Make sure to copy the transfer token because you won't be able to see it again after you left that page.

Bravo! Now, magically transfer all your local data to Strapi cloud!

#### Step 4: Paste Transfer Token to Transfer Data
Now, paste in the transfer token to start the data transfer.

> **NOTE:** Since you used PostgreSQL for this project, ensure that the PostgreSQL container is running. This will throw the error `error: database "blog" does not exist` if this condition is not met.

If this process was successful, you should see the following message displayed on our terminal:

![data transfer to strapi cloud successful.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/data_transfer_to_strapi_cloud_successful_c99f56598c.png)

When you go back to your Strapi cloud admin, you should now see your backed populated with local data!

![strapi cloud with data transfered.gif](https://delicate-dawn-ac25646e6d.media.strapiapp.com/strapi_cloud_with_data_transfered_23f9cb03f8.gif)

## Setting up Astro Frontend on Vercel
Now that we are done with the Strapi data transfer and Strapi cloud setup, we have to setup our Astro frontend which depends on our Strapi cloud instance for data. Here are the steps to take to set up an Astro application on Vercel.
### Step 1: Add New Project
Proceed to log into your Vercel account. After successful login, make sure to ***click the Overview > Add New Project***. 

![new project on vercel.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/new_project_on_vercel_4b067eeeae.png)

### Step 2: Import Git Repository
By clicking the "Project" tab as shown above, you will be asked to import a project. Recall that your project is the in the repository called `astro-strapi-tutorial`.

![import project to vercel.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/import_project_to_vercel_1d41ba1adc.png)

### Step 3: Configure Project
Next, you will have to configure your project.

Make sure to select the following:

* `Project Name`: This should be `astro-strapi-tutorial`
* `Framework Preset`: This should be set to `Astro`. Automatically, it should be detected when you select the `Root Directory`. Or you can manually select it.
* `Root Directory`: In the beginning, recall that the Astro frontend is in the `ui` directory. So you have to select `ui` as the root directory.
* Environment Variable: Your Astro frontend depends on the Strapi backend for data, like in the tutorial series. For this reason, you should create an environment variable `Strapi_URL` to hold the URL of our local Strapi instance. Since you have deployed it to Strapi cloud, you need to add the URL of our deployed Strapi Instance.

![configure astro on vercel.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/configure_astro_on_vercel_5471d3a261.png)

Once you are done with the configuration, you can hit the "Deploy" button.

One more thing! You forgot to tell Vercel that you want the `deployment` branch and not the `main` branch!

### Step 4: Change Deployment Branch
You need to change your deployment branch. So click on ***Settings > Git*** and change the branch name from `main` to `deployment`.

![change deployment branch.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/change_deployment_branch_bd5b93f71e.png)

### Step 5: Redeploy Frontend
In order to update our Deployment branch, which is the `deployment` branch, Vercel requires that you push to it.

Update the code of your frontend by changing the `index.astro`, which is present in the `src` folder, to the following:

```
// .src/index.astro
---
export const prerender = true;
import Layout from "../layouts/Layout.astro";
import Hero from "../components/Hero.astro";
import About from "../components/About.astro";
import fetchApi from "../lib/strapi";

const pageData = await fetchApi({
  endpoint: "pages",
  page: "LandingPage",
  wrappedByKey: "data",
});

const heroData = pageData.find((pd) => pd.__component === "hero.hero");
const { heroText, heroDescription } = heroData;

const aboutData = pageData.find((pd) => pd.__component === "about.about");
const { aboutText } = aboutData;
console.log(aboutData.aboutPhoto.data.attributes.url);
const {
  aboutPhoto: {
    data: {
      attributes: { url: aboutPhotoURL },
    },
  },
} = aboutData;
---

<Layout>
  <h1>Hello World!</h1>
  <Hero {heroText} {heroDescription} />
  <About {aboutText} {aboutPhotoURL} />
</Layout>
```

In the code above, you only added `<h1>Hello World!</h1>` to the code. After that, make sure to commit your changes and push to the `deployment` branch.

Once that is done, your app will redeploy and be live as shown below!

![frontend deployment to vercel success.gif](https://delicate-dawn-ac25646e6d.media.strapiapp.com/frontend_deployment_to_vercel_success_a132181a8c.gif)

## Creating Deploy Hook on Vercel
The next step is to create a Deploy hook on Vercel. Click on ***Settings > Git***. Here, you will name it "astro strapi deploy hook"

![create deploy hook.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_deploy_hook_1047ef50b8.png)

After creating the deploy hook, ensure to copy the URL of the hook. You will make use of the URL in the next section where  a Strapi webhook will be created to trigger the deploy hook.

![copy deploy hooks.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/copy_deploy_hooks_35c4849661.png)

## Creating a Webhook on Strapi
You have set up your Vercel deploy hook. The next step is to create a Strapi webhook that will trigger the deploy hook whenever data changes in the Strapi backend.

Proceed by clicking ***Settings > Webhooks > Create new webhook***. Ensure to give it a name, and enter the URL of the Vercel deploy hook you created above.

![strapi webhook.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/strapi_webhook_56108fe40e.png)

Notice that you checked all the boxes for `Entry` and `Media` events. These means that you want this webhook to trigger whenever you create, update, delete, publish and unpublish an entry or media.

Now, test your Strapi webhook!

## Making Changes to Strapi Backend
Navigate to your Strapi dashboard and make changes to the `LandingPage` that was created using Strapi Dynamic Zones. Learn more about Strapi Dynamic zones: [How to Create Pages on the fly with Dynamic Zone](https://strapi.io/blog/how-to-create-pages-on-the-fly-with-dynamic-zone).

Modify the `heroText` component of the `LandingPage` Dynamic zone. You will add "Theodore" to the text to make it "Welcome to Theodore Wizarding World".

Feel free to change this to any text you prefer.

![modify strapi backend.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/modify_strapi_backend_73de547c88.png)

When you hit the "Save" button, you should see the deployment process starting up in our Vercel. This means the content change has executed the Strapi webhook, triggering the deploy hook.

Also note that this was not an automated deployment by code change, CLI, or manual deployment. It was done using the Deploy Hook, as seen below!

![invoke deploy hook.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/invoke_deploy_hook_bcba553318.png)

## Congratulations!
After creating and triggering the Vercel deploy hook using the Strapi webhook and refreshing our Astro frontend page, you should see that "Theodore" is now displayed in the frontend hero text! Congratulations!

![Deployment Result.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Deployment_Result_ec4365781c.png)

## Conclusion
In this tutorial, we have delved into the crucial topic of automated frontend deployments and why they are indispensable. We have also explored the various methods to trigger deployments of a frontend application, underscoring their importance in the development process. 

Furthermore, we demonstrated this process using a project deployed to the Strapi cloud and a live Astro frontend app on Vercel, a cloud platform that also provides frontend hosting.

To wrap it up, we created a webhook on Strapi that triggers automated deployment of our Astro frontend application on Vercel when events like creating, updating, deleting, publishing, and unpublishing an entry occur.

Remember to share this article if you find it very helpful or you could explore related contents down below.


Trigger Deployments Using Vercel Deploy Hook and Strapi Webhook

large_Trigger Deployments Using Vercel Deploy Hook and Strapi Webhook.jpg

medium_Trigger Deployments Using Vercel Deploy Hook and Strapi Webhook.jpg

small_Trigger Deployments Using Vercel Deploy Hook and Strapi Webhook.jpg

thumbnail_Trigger Deployments Using Vercel Deploy Hook and Strapi Webhook.jpg

Trigger Deployments Using Vercel Deploy Hook and Strapi Webhook.jpg

Astro & Strapi Website Tutorial: Part 3 - Project Build

Astro Actions With Vanilla JavaScript and Strapi 5

The recent Vercel Ship event has created quite a buzz. Here's a rundown of the highlights. Also, Check out this great video from Theo.

<iframe width="560" height="315" src="https://www.youtube.com/embed/Txf2pbR2Cyk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

You can also watch the full event [here](https://youtube.com/playlist?list=PLBnKlKpPeagnLaepqAW11qPxJOymt0lXJ&si=of0mSdEttwIWQeOt)

But to save you some time, here is the rundown. Let's look at all the highlights; at the end, we will migrate a Next.js 14 project to Next.js 15 using the Strapi Starter Template as an example.

## What is New?
![Screenshot 2024-06-05 at 11.30.02 AM.png](https://api-prod.strapi.io/uploads/Screenshot_2024_06_05_at_11_30_02_AM_b02d334c8a.png)

### Vercel's New Firewall: A Long-Awaited Addition
Vercel has finally introduced a firewall, an essential feature many developers have anticipated. Historically, many have relied on Cloudflare to handle DDoS attacks and other security threats.  

With Vercel's new firewall, the process of setting up rules to protect your websites is now a breeze. This not only enhances security, but also empowers you to manage costs more effectively, making it a valuable addition to your web development toolkit.

### Rethinking Feature Flags: Security and Efficiency
Another significant update involves Vercel's approach to feature flags. They highlighted Jane Wong's contributions to the tech community, noting how she often discovers unannounced features through exposed flags. 

Vercel is now integrating feature flags more securely on the server side to prevent such leaks. 

This move enhances security by keeping potential features hidden from prying eyes and ensuring a smoother, more controlled rollout process.

The event's primary focus was the Next.js 15 Release Candidate (RC). Despite being labeled an RC due to its dependency on the yet-to-be-released React 19, it's packed with exciting new features. 

## Next.js 15: Overview of the New Features
The release of Next.js 15 has brought many new features and improvements, all designed to optimize application performance. These enhancements are a testament to our commitment to delivering high-quality products that meet the needs of our users. 

### 1. Support for React 19 RC
Next.js 15 now supports React 19 RC, bringing new client and server component features. 

This integration allows developers to utilize the latest advancements in React, such as Actions and the experimental React Compiler. 

The React Compiler is designed to reduce the need for manual memoization, simplify code maintenance, and reduce errors.

### 2. React Compiler (Experimental)

The React Compiler is a new experimental feature that aims to optimize your code automatically. 

By understanding plain JavaScript semantics and the rules of React, the compiler can add optimizations without requiring extensive manual intervention.

### 3. Improved Hydration Error Messages

Many developers have experienced hydration errors. Next.js 15 introduces enhanced error messages that provide more detailed information and suggestions for resolving issues. 

These improvements simplify debugging, helping you quickly identify and fix discrepancies between server and client-rendered content.

### 4. Caching Updates

Caching has undergone significant changes in Next.js 15:

* **Fetch Requests**
 By default, fetch requests are no longer cached. Previously, fetch requests used the `force-cache` option by default, leading to potential issues with outdated data. Now, fetch requests use the `no-store` option unless explicitly configured otherwise.

* **GET Route Handlers**
 **GET** route handlers are no longer cached by default. You can opt into caching using the static route config option.

* **Client Router Cache**
Page components are no longer cached by default, ensuring that navigation always reflects the latest data.

  These changes address community feedback and aim to make caching behavior more predictable and manageable.

* **Partial Prerendering (Experimental)**
Partial Prerendering (PPR) allows you to combine static and dynamic rendering on the same page. 

  This feature can significantly improve load times by immediately serving a static HTML shell and rendering dynamic parts asynchronously. 

### 5. Next/after API (Experimental)

The `next/after` API allows you to execute code after a response has finished streaming. 

This feature is ideal for logging, analytics, and external system synchronization tasks, which should not block the primary response. 

### 6. Create-Next-App Updates

The `create-next-app` command has received a significant overhaul. The new design provides a cleaner starting point, and the introduction of the `--turbo` flag simplifies enabling Turbopack for local development. 

Additionally, the `--empty` flag creates a minimal "hello world" page, removing extraneous files and styles.

### 7. Optimizing Bundling of External Packages

Next.js 15 introduces new configuration options to optimize the bundling of external packages. 

External packages are bundled by default in the App Router. Using the `transpilePackages` option, you can specify which packages to bundle in the Pages Router. This optimization can improve your application's cold start performance by reducing the number of network requests needed to load dependencies.

Next.js 15 brings a wealth of new features and improvements designed to streamline development workflows and enhance application performance.

As these features move from experimental to stable, they will undoubtedly make Next.js an even more powerful tool for building modern web applications.

## How to Migrate Your Next.js 14 Project To Next.js 15
### Step 1: Clone Starter Project
In this example, we will be using our Next.js & Strapi project. You can find it [here](https://github.com/strapi/nextjs-corporate-starter). Now, follow along.

![Screenshot 2024-06-05 at 11.34.19 AM.png](https://api-prod.strapi.io/uploads/Screenshot_2024_06_05_at_11_34_19_AM_c1c8abb381.png)

You can follow the [this](https://github.com/strapi/nextjs-corporate-starter/blob/main/README.md) `README.md` file to set up the project locally. 

Once you have the project set up, we can move to the next step. Which is the upgrade.  You can get the outline for the steps [here](https://rc.nextjs.org/docs/app/building-your-application/upgrading/version-15).

### Step 2: Create a New Branch
Since Next.js 15 is still in GA, we will make this change in a new branch.

We will create and switch to the new branch with the following command.

```bash
git checkout -b next-15-update
```

 Before making the changes, make sure that the project works as expected.  

### Step 3: Start Migration
 To start the migration, we will run the following command using `yarn`.

 ```bash
yarn add next@rc react@rc react-dom@rc eslint-config-next@rc
 ```

 This will install all the necessary dependencies. 

### Step 4: Update TypeScript Types
 Next, since we are using TypeScript in this project, we will update the types with the following.

 ``` bash
yarn add @types/react @types/react-dom 
 ```

### Step 5: Restart Project
Now, after we restart our project, we should see the following.

``` bash
▲ Next.js 15.0.0-rc.0
- Local:        http://localhost:3000
- Environments: .env

✓ Starting...
```

Nice! We are now running **Next.js 15**. The main change is that now we need to "opt in" in to caching. You can learn more about it [here](https://rc.nextjs.org/docs/app/building-your-application/upgrading/version-15#fetch-requests). We will push the changes to the repo, you should be able to find it [here](https://github.com/strapi/nextjs-corporate-starter/tree/next-15-update).

Thanks for your time, and we will see you in the next post.

Vercel Ship & Next.js 15: Features & Migration Guide

Check out the following related blog posts.

Writer

Tamas is a Google Developer Expert in Web Technologies and a seasoned Developer Evangelist. He is a passionate advocate for modern web technologies, helping people understand and unlock the latest & greatest features of web development.

Astro & Strapi Website tutorial: Part 3 - Project Build

large_Astro & Strapi Website tutorial_ Part 3 - Project Build.jpg

medium_Astro & Strapi Website tutorial_ Part 3 - Project Build.jpg

small_Astro & Strapi Website tutorial_ Part 3 - Project Build.jpg

thumbnail_Astro & Strapi Website tutorial_ Part 3 - Project Build.jpg

Astro & Strapi Website tutorial_ Part 3 - Project Build.jpg

Hello, you wonderful people; in this post of many, I would like to introduce you to what we will be building.

This post is the first of many in our Epic Strapi Next.js 14 tutorial Series.  You can find the outline for upcoming post here.

- **Part 1: Learn Next.js by building a website**
- [Part 2: Building Out The Hero Section of the homepage](https://strapi.io/blog/epic-next-js-14-tutorial-part-2-building-out-the-home-page)
- [Part 3: Finishup up the homepage Features Section, TopNavigation and Footer](https://strapi.io/blog/epic-next-js-14-tutorial-learn-next-js-by-building-a-real-life-project-part-3)
- [Part 4: How to handle login and Authentification in Next.js](https://strapi.io/blog/epic-next-js-14-tutorial-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](https://strapi.io/blog/epic-next-js-14-tutorial-part-5-file-upload-using-server-actions)
- [Part 6: Get Video Transcript with OpenAI Function](https://strapi.io/blog/epic-next-js-14-tutorial-part-6-create-video-summary-with-next-js-and-open-ai)
- [Part 7: Strapi CRUD permissions](https://strapi.io/blog/epic-next-js-14-tutorial-part-7-next-js-and-strapi-crud-permissions) 
- [Part 8: Search & pagination in Nextjs](https://strapi.io/blog/epic-next-js-14-tutorial-part-8-search-and-pagination-in-next-js)
- [Part 9: Backend deployment to Strapi Cloud](https://strapi.io/blog/epic-next-js-14-tutorial-part-9-backend-deployment-to-strapi-cloud)
- [Part 10: Frontend deployment to Vercel](https://strapi.io/blog/epic-next-js-14-tutorial-part-10-frontend-deployment-to-vercel)

With the popularity of Next.js 14 and Strapi headless CMS and how they can empower you to build cool things, we are going to work on building a project together to cover all the awesome aspects of Next.js 14, the app folder, and all the new features including server components and server actions.

In this post, we will quickly look at what we will build and the topics we will cover, set up the basic structure of our project, and make our first commitment.

So, what will we be building?

## I had a problem

So, I had a problem; I spent a lot of time on YouTube and found myself watching videos. Halfway through, I realized I could have avoided videos I was not entirely interested in if I had seen the summary first.

Wouldn't it be awesome if I could get the summary first and see if it deserves my full attention instead of watching the video?

I also use videos as learning resources. On top of video summarization, I wanted to create notes around the videos I watched that I could reference later.

And that is precisely what we will build, a video summarization app to summarize our YouTube videos with the power of AI.

No more wasted time committing to videos. We can just read the summaries.

## Summarize AI Project Overview

![summary-demo.gif](https://api-prod.strapi.io/uploads/summary_demo_e3c4b06472.gif)

## The Tech We Are Going To Use

### Next.js

Next.js is a front-end framework built on the React JavaScript library, which is known for creating engaging user interfaces.

It simplifies web development so you can focus on the most important parts, building the project for your clients.

And now, you can access all the new features of React, like React Server Components and Server Actions.

A major feature of Next.js is server-side rendering. This improves how fast web applications load and how well they rank on search engines, which is great for performance and SEO.

Next.js also has a static generation feature. This means it creates files before they're needed so they can load quickly without waiting for data to be fetched.

Additionally, Next.js provides incremental static regeneration. This feature updates static content with dynamic changes for pages that have not been pre-generated or updated since their initial creation.

To style our app, we will be using Tailwind and ShadcnUI.

### Strapi

To make building our application even easier, we will leverage the power of Strapi [ Headless CMS ] to manage our data and authentication.

Strapi is an open-source headless content management system (CMS). Unlike traditional CMSs, which are tightly coupled with the front-end presentation of your content, a headless CMS like Strapi provides backend management for your content and serves it via a RESTful or GraphQL API.

This means you can use Strapi to manage your content and then deliver it to any front-end framework or platform you choose, such as websites, mobile apps, or other server-side applications.

The main benefits of using Strapi include its flexibility, as it allows developers to customize the admin panel, APIs, and database queries to suit their specific needs.

It also supports many databases and can be easily integrated with popular front-end frameworks like React, Vue, and Angular.

In our case, we will be using Next.js 14.

Strapi is designed to streamline the content management process, making it easier for developers and content creators to work efficiently.

Get more done in less time.

In this tutorial, the goal is to cover the following Next.js and Strapi features.

## Features

**Next.js 14**

- New `/app` dir,
- Routing, Layouts, Nested Layouts, and Layout Groups
- Data Fetching, Caching and Mutation
- Loading UI
- Route handlers
- Metadata files
- Server and Client Components
- Protective Routes Middleware

- UI Components built using **Shadcn UI**
- Styled using **Tailwind CSS**
- Validations using **Zod**
- Written in **TypeScript**

**Strapi**

- Content Modeling
- API Routes, Middlewares, and Policies **Strapi**
- Authentication using **Strapi**
- ORM using **Strapi**
- Database on **Strapi**

## Project Overview

### Home Page

We will have a basic landing page with a top nav, hero sections, a benefits section, and a footer.

All the top nav, hero section, and footer content will be stored inside our Strapi instance.

![home-page.gif](https://api-prod.strapi.io/uploads/home_page_9929dbf0fc.gif)

### Login and Register Page

We will handle auth using Strapi and protect our routes via the Next middleware file to check if an authorized user exists and redirect accordingly.

![login-demo.gif](https://api-prod.strapi.io/uploads/login_demo_09518314f0.gif)

### Dashboard

We will have a simple dashboard with a primary view showing available credits, notes, and summaries. As well as generate a summary form in the top navigation.

**Generate Summary**

Here, you will enter your YouTube video url, and it will make a call to Open AI to generate our summary based on the YouTube video transcript.

For this Next.js 14 tutorial, we will use the LangChain library to make a call to open AI since it gives us some additional features that we can use to extend our app in the future.

![summary-demo.gif](https://api-prod.strapi.io/uploads/summary_demo_e3c4b06472.gif)

**Summaries and Notes Page**

Here, you can access your list of summaries and summaries details page, where you can update the text or delete the summary altogether.

We will have a similar section for our notes as well.

![summary-page.gif](https://api-prod.strapi.io/uploads/summary_page_dd708e612b.gif)

**Account Page**

Finally, we will have our account page, where we can update our users's first and last names and bio. As well as change our photo.

Most of the form submissions in our app will use Next Server Actions, which is pretty cool.

![account-page.gif](https://api-prod.strapi.io/uploads/account_page_9b8a1fb1f9.gif)

I hope you are excited to embark on this journey with me.

## The Process and Why It Is Awesome

My goal is to build this tutorial in public and release new post/video per week.

All the progress will be saved in a public repo where you can follow along.

The goal is to build out our application that you can use later to add or extend in any way you desire.

We will cover all the important parts of Next.js and some features related to Strapi, such as middlewares, policies, routes, controllers, and services.

I hope you are just as excited as I am.

So let's get started.

## Setting Up Our Initial Project

Let's start by setting up our front end first. For this, we will be using [Next.js 14](https://nextjs.org)

### Setting Up Our Frontend

Let's start by creating a new folder called `epic-next-course,` I am going to do this in my terminal by running the following command:

```bash
  mkdir epic-next-course
```

Once we created our folder, let's navigate inside of it by typing `cd epic-next-course` and run the following command:

```
  npx create-next-app@latest
```

Select the following options:

```bash
~/epic-next-course
▶ npx create-next-app@latest
✔ What is your project named? … frontend
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
```

Once your project has been created, let's navigate to our frontend folder with `cd frontend` and run `yarn dev` to start our frontend project.

Your project will start at [http://localhost:3000](http://localhost:3000).

![next-js-web.png](https://api-prod.strapi.io/uploads/next_js_web_ac9d2144a3.png)

### Setting Up Shadcn UI for styling

We will use Tailwind with Shadcn UI components to make our app pretty. Shadcn UI is excellent because it allows you to install your UI components directly into your codebase and modify/extend them accordingly.

You can learn more [here](https://ui.shadcn.com).

![shadcn-ui.png](https://api-prod.strapi.io/uploads/shadcn_ui_0f155fbb09.png)

Let's now go through the setup steps. You can also reference [this] guide (https://ui.shadcn.com/docs/installation/next).

**Run the CLI**
Run the shadcn-ui init command:

```bash
  npx shadcn-ui@latest init
```

**Select the following options**

```bash
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Would you like to use CSS variables for colors? … no / yes

✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...

Success! Project initialization completed. You may now add components.
```

That's it. We now have Shadcn UI installed and ready to go.

You will notice that we now have a components folder, which is currently empty.

![empty-component-folder.png](https://api-prod.strapi.io/uploads/empty_component_folder_efb9156579.png)

Let's add our first component by running the following command in your `frontend` folder, which will install our button component.

```bash
  npx shadcn-ui@latest add button
```

We now have a button inside our components folder.

![we-have-a-button.png](https://api-prod.strapi.io/uploads/we_have_a_button_773bb330f5.png)

Let's use it inside the `page.tsx` file by replacing all the code with the following.

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

export default function Home() {
  return (
    <main className="container mx-auto py-6">
      <Button>Our Cool Button</Button>
    </main>
  );
}
```

Look at that amazing button.

![our-new-button.png](https://api-prod.strapi.io/uploads/our_new_button_d6e34ed415.png)

Now that we know that our Shadcn UI component is working as expected. Let's finish up this first tutorial by setting up our Strapi instance.

### Setting Up Our Backend

For our backend, we are going to use Strapi headless CMS. Strapi allows you to build your backend in minutes instead of weeks.

It is highly customizable and easy to get started with.

You can learn more in the [docs](https://docs.strapi.io/dev-docs/quick-start), but we will start by running the following command inside the project folder.

```bash
  npx create-strapi-app@latest backend
```

We will call our project `backend` and select `quickstart` as our option.

```bash
▶ npx create-strapi-app@latest
? What would you like to name your project? backend
? Choose your installation type Quickstart (recommended)
Creating a quickstart project.
Creating a new Strapi application.
Creating files.
⠼ Installing dependencies:
```

Once everything gets installed, you will be greeted by Strapi's register page.

![register-user.png](https://api-prod.strapi.io/uploads/register_user_d6d80f13ec.png)

Go ahead and create your first **admin user**. Once done, you will be greeted by the dashboard.

![strapi-dashboard.png](https://api-prod.strapi.io/uploads/strapi_dashboard_63644bbe24.png)

Congratulations. We now have our Strapi app set up.

In future posts, we will explore the Strapi dashboard in more detail. But for now, let's create our first **collection type**.

## Creating Our First Collection Type

Our app will have a home page with our top navigation, hero section, features, and footer section.

![home-page-layout.png](https://api-prod.strapi.io/uploads/home_page_layout_ce7c66f130.png)

Let's create our first collection type to store this data.

We will get it started in this post and continue it in the next post.

I want to show how easily we can add content to the Strapi application and get that data from our API.

Let's start by navigating to `Content-Type Builder` under `SINGLE TYPES` and clicking on `create-new-single-type.`

We are going to name it `Home Page`.

![single-type.gif](https://api-prod.strapi.io/uploads/single_type_321f181e08.gif)

We will add to text fields.

Text -> Short Text -> Title
Text -> Long Text -> Description

Once done, click save.

Now, let's add some basic data.

![adding-data.gif](https://api-prod.strapi.io/uploads/adding_data_f8b5a28318.gif)

After adding the title text and description, make sure to click publish.

Not let's take a look at how we can get our data from our API using **Insomnia**, but you can also use **Postman**

In future posts, of course, we will be getting out data from our Next.js frontend.

## Getting Our Data via The Strapi API

Now that we have our first data type let's see how we can query it using **Insomnia**.

But first, we must give Strapi permission to serve those endpoints to our client.

Since this is public data, we can accomplish this with the following permissions.

![giving-public-access.gif](https://api-prod.strapi.io/uploads/giving_public_access_2aec11c74f.gif)

Navigate to Settings -> USERS & PERMISSION PLUGIN -> Roles -> Public

Select **Home Page** and check the find checkbox.

We should now be able to access our data by making a `GET` request to `http://localhost:1337/api/home-page`.

Let's give it a try.

![home-page-data.gif](https://api-prod.strapi.io/uploads/home_page_data_a219268fb8.gif)

Awesome. We must get our initial **Home Page** data from our endpoint.

```json
{
  "data": {
    "id": 1,
    "attributes": {
      "title": "Home Page",
      "description": "this is our first single collection type",
      "createdAt": "2024-03-03T20:05:20.941Z",
      "updatedAt": "2024-03-03T20:05:22.546Z",
      "publishedAt": "2024-03-03T20:05:22.543Z"
    }
  },
  "meta": {}
}
```

Before we go, let's call from our front end and see if we can render our initial data.

## Making Our First Fetch Request

Let's see our Next.js and Strapi integration by creating create a basic function to fetch our data inside our Next.js application.

Since we are using Next.js 14, we can use RSC [React Server Components].  

Inside our **frontend project**, let's navigate to the `src/app/page.tsx` file.

This is where we added our essential button component to test our CSS.

![home-page-next.png](https://api-prod.strapi.io/uploads/home_page_next_0fd7778971.png)

Let's make the following refactoring to fetch our data.

``` tsx

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.attributes;

  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>
  );
}

```

Once you make the following changes, ensure your project is running, and navigate to `http://localhost:3000`, you should see the next.

![our-first-data.png](https://api-prod.strapi.io/uploads/our_first_data_63fd644587.png)

Excellent job; we now know we can get data from our **backend** to our **frontend**.

We will continue building the home page, navigation, and footer in the next post.

## Conclusion

Amazing job, everyone. We did it, we now have our Next.js and Strapi integration. We have jump-started our Next.js 14 and Strapi journey. 

We set up both our frontend and backend of our video summarization app. We are now ready to continue building the rest of the project.

Here is the repo for the project with the current progress. 

I want to build this out in public, so feel free to add comments and questions in the GitHub issues. 

I hope you had as much fun as I did, and I will see you in the next post. 

You can find the project repo [here](https://strp.cc/49HdLeD)
You can find the video [here](https://strp.cc/3uXEkgy)

You can check out the first video here if you prefer that format.

Epic Next.js 14 Tutorial Part 1: Learn Next.js by building a real-life project



Notion is a popular note-taking tool loved by many for its responsiveness and dynamic features. Its collaborative setting allows teams around the world to document, share, and communicate easily. On top of that, the component-like nature of Notion content not only supports many types of formats (images, links, tables, etc.), but it makes writing and editing a breeze.

[Strapi is the leading open-source content management system (CMS)](https://strapi.io), and it will act as our content hub for this project. Not only is it fast, Strapi is also very developer-friendly. You can consume the Strapi API from any client using REST or GraphQL. [Strapi offers many integrations](https://strapi.io/integrations), along with ample documentation on how to integrate it with all the major frontend libraries such as Next.js, React, Vue, Gatsby, and others.

This two-part tutorial series will walk you through the creation of a Notion clone with Strapi and Next.js. In this article, you will get familiar with Strapi and its admin interface. You will also learn about the GraphQL playground and how to create queries and mutations.


# Prerequisites

Before you can jump into this content, you need to have:

1. Basic knowledge of JavaScript
2. Basic knowledge of ReactJS
3. Basic knowledge of Next.js
4. Basic understanding of Strapi - [get started here](https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html)
5. [Node.js](https://nodejs.org/en/) version 14 downloaded and installed

## The Initial Planning

**In order to create your Notion clone, you will need two important components: a Next.js client and a Strapi server.**

To start with, you will need a Strapi backend. As mentioned above, Strapi will act as your content hub. This will not only allow you to create data structures, but will also store your data. For this project, you will have two kinds of data:


- Pages
- Content blocks

By using blocks, you can replicate the way Notion creates content. Every block will have raw HTML stored in it that, when fetched, will be rendered on the client. As for the pages, they will have a title and a list of blocks that belong to them.

You will be interacting with this data thanks to GraphQL, which you will install with your Strapi backend. Once done, you will design queries and mutations that will allow you to create, update, and delete content through your new API.

Finally, there is the Next.js client which will reproduce some of the functionalities of Notion. Just like the popular note-taking application, this frontend will have a few features such as creating pages, but also the ability to create blocks of content on your page. You will be using an HTML editor to recreate a rich but easy-to-use editing experience.

The project will also take advantage of Next.js static and server-side rendering by setting a static route for your list of pages but dynamic routes for your single page. Of course, you will also be setting up the routing between them. Finally, we will use the library `graphql-hooks` to create a GraphQL client, which will allow you to connect to your Strapi backend and retrieve, save, or update your data.

## Building the Backend

This section will walk you through a step-by-step guide in building the clone.

To begin, you need to setup your Strapi backend.

#### Step 1: Create a Strapi Project

To create a Strapi backend, run one of the commands below:

```bash
    npx create-strapi-app@latest notion-clone-strapi-backend --quickstart
    #or using yarn
    yarn create strapi-app notion-clone-strapi-backend --quickstart
```

#### Step 2: Create Your Administrator Account

In this step, you are going to create your Strapi admin account.

Once your terminal finishes constructing the backend, by default, Strapi will automatically start a localhost development server. In addition to starting the server, a new tab will launch, requesting you to register your first administrator account:

![Register new Strapi admin account](https://paper-attachments.dropbox.com/s_54F202492DF26003D1584D20A26B16F5CE7D261538774C4438D341C8FD0D5E7E_1652456309915_1.png)


By chance, if a Strapi server fails to start, use your terminal or command prompt to browse to the newly formed backend folder, `/notion-clone-strapi-backend`. Execute the command, `yarn run develop`. The aforementioned "new tab" will then open, requiring your credentials for admin registration.

After providing your credentials and hitting **“Let’s start”**, you will be redirected to a super short survey:

![Strapi survey](https://paper-attachments.dropbox.com/s_54F202492DF26003D1584D20A26B16F5CE7D261538774C4438D341C8FD0D5E7E_1652456666107_2.png)


From the dropdown menu similar to that above, choose a title that best describes you. Once you are done, finally you will be redirected to a Strapi admin panel:

![Strapi admin page](https://paper-attachments.dropbox.com/s_54F202492DF26003D1584D20A26B16F5CE7D261538774C4438D341C8FD0D5E7E_1652456881139_3.png)


#### Step 3: Create Your Collections

You currently have an empty project. In the admin panel, you can create your data structure for your future data entries. Strapi calls those data structures `collections`. For this project, you will need two kinds of collections:


- Content Block
- Page

##### **Create `Content Block` Collection**


1. On the left-hand side, head over to *Content-Type Builder* and click *Create new collection type*.
2. Add *Content Block* for the display name and click *Continue*.
3. Under *select a field for your collection type*, choose *Text*.
4. In the *Add new text field* modal, enter **“content”** for the Name and choose *Long text*.
5. Click **Finish** and then **Save.**


> Note: The reason you will choose **Text** here is in order to take advantage of the vast choices in terms of HTML editors for React. As a result, you will be storing raw HTML for your content. It is, however, interesting to note that Strapi does have a **Rich Text** field which supports Markdown. This can be very helpful for some developers used to writing this way.

##### **Create `Page` Collection**


1. Click on **Create new collection type**.
2. Fill out **“Page”** for the display name and click continue.
3. Select **Text** and name the field “title”.
4. Add a second field, and this time, select **Relation**.


> Note: Strapi offers many different kinds of relationships depending on your needs. Whether it’s one-to-one, one-to-many, many-to-one or many-to-many, you will find what you need.


![Relationship dialog screen in Strapi dashboard](https://paper-attachments.dropbox.com/s_54F202492DF26003D1584D20A26B16F5CE7D261538774C4438D341C8FD0D5E7E_1652534839932_Screenshot+2022-05-13+at+20.22.32.png)

1. Select the third option (“Page belongs to many Content Blocks”).
2. Click **Finish**.


> Note: This will create a `content_blocks` field on pages with an array of content blocks IDs, but it will also create a page field on the content block to save the page ID.

#### Step 4: Turn on Permissions

Now that your collections are set up, you are almost ready to set up GraphQL. But before you do so, you need to make your data accessible. This means that you need to allow your data to be accessed and retrieved through your GraphQL API. The steps to do so are:


1. Head to **General** > **Settings**.
2. Under *Users & Permissions Plugin*, select *Roles*.
3. Click on *Public*.
4. Click on the *Select all* for pages and content-block.
5. Click *Save*.


![Permissions screen in Strapi dashboard](https://paper-attachments.dropbox.com/s_54F202492DF26003D1584D20A26B16F5CE7D261538774C4438D341C8FD0D5E7E_1652535322307_Screenshot+2022-05-13+at+20.32.36.png)


Now that your data is accessible through an endpoint, it’s time to set up GraphQL.

## Implementing GraphQL

If your Strapi server is still running, stop it with `Ctrl+C`. In the terminal, run the command:

```bash
    npm run strapi install graphql
    # or
    yarn strapi install graphql
```

Then you can start up your server again with `yarn develop` or `npm develop`.

## Implementing CRUD

Now that your Strapi backend is set up with GraphQL, it’s time to play with your data a bit. You can access the GraphQL playground and try to create and retrieve some data.


![Strapi GraphQL playground](https://paper-attachments.dropbox.com/s_54F202492DF26003D1584D20A26B16F5CE7D261538774C4438D341C8FD0D5E7E_1652568831131_Screenshot+2022-05-15+at+00.22.58.png)


If you are unfamiliar with this technology, GraphQL uses queries and mutations to interact with data. `Queries` allow you to retrieve data by asking specifically for what you want. `Mutations`, on the other hand, let you modify data whether by creating, updating, or deleting it. Do not hesitate to [check out the GraphQL documentation for more explanation](https://graphql.org/).

Next, create your first query in the GraphQL playground. In a new tab, input the type (query or mutation). Because you’ll want to start by retrieving all the pages, you should choose a query and then enter `getAllPages` to name your function.

Once that is done, specify the collection you want to retrieve (i.e `pages`) and the fields from that collection you want (`id`, `title`).

```
    query getAllPages {
      pages {
        data {
          id
          attributes {
            title
          }
        }
      }
    }
```
Run it and see the response displayed in the right hand-side of the playground.
If you want to retrieve the related content—say, all the content blocks—add `content_blocks` and specify which fields in this collection you want to retrieve.

```
    query getAllPages {
      pages {
        data {
          id
          attributes {
            title
            content_blocks {
              data {
                id
                attributes {
                  content
                }
              }
            }
          }
        }
      }
    }
```
#### Here are some more queries and mutations for you to try out:

##### **Create a Page:**


```
    mutation createPage {
      createPage(data: { title: "New Page" }) {
        data {
          id
          attributes {
            title
          }
        }
      }
    }
```
##### **Retrieve One Page:**

```
    query getOnePage {
      page(id: 2) {
        data {
          id
          attributes {
            title
          }
        }
      }
    }
```

##### **Update a Page:**

```
    mutation updatePage {
      updatePage (id: 3, data: { title: "Third Page"}) {
        data {
          id
          attributes {
            title
          }
        }
      }
    }
```

##### **Delete a Page:**

```
    mutation deletePage {
      deletePage (id: 1) {
        data {
          id
          attributes {
            title
          }
        }
      }
    }
```

Try to create some data and see it appear in your Strapi admin panel.

## Conclusion

In this article, you learned how to set up a Strapi backend. You did so by first creating a Strapi project, setting up your administrator, and installing GraphQL.

When that was done, you discovered how to create collections in the Strapi admin dashboard. You created two collections, for pages and content blocks, and added the required fields for each. You also set up a relationship between pages and content blocks so that pages would have a list of blocks that belong to them, and blocks would have a record of which page they belong to.

You also learned how permissions worked and edited them so that your data could be accessible through the GraphQL API.

To finish, you interacted with the GraphQL playground and learned how to create queries and mutations.

In part 2, we will continue this tutorial and you will create a Next.js client to consume your GraphQL API.

**For more information,[ the frontend of the codebase can be found in this repo](https://github.com/hubertnare/notion-clone-strapi-backend).**



How to Build a Notion Clone with Strapi v4 and Next.js (Part 1 of 2)

_Updated April 2023_
This tutorial will walk you through how to use [Next.js](https://strapi.io/integrations/nextjs-cms) to power your UI, complete using **GraphQL, Stripe, Strapi, and Next** to developing a full-stack application complete with the powerful Strapi (Headless CMS) powering the backend.

Get ready to develop an **online food ordering app, more info on the tech stack here:** [**Next.js**](https://strapi.io/integrations/nextjs-cms)**,** [**GraphQL**](https://graphql.org/)**,** [**Stripe**](http://stripe.com/) **and** [**Strapi**](https://strapi.io/)!

From sign up to order, you are going to let users discover restaurants, dishes and order meals.

Your app will be complete with user login, registration, authentication, image upload, restaurant creation, dish creation, cart functionality, and stripe order integration.

The **demo of the final result** should make you hungry:

![Final Walk-Through 3](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/full-app-preview.gif)

> Note: the source code is available on GitHub [here](https://github.com/divofred/food-ordering-app)

Screenshots of final product:

![First Screenshot](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/project-screen-1.png)

![First Screenshot](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/project-screen-1.png)

![First Screenshot](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/project-screen-3.png)

### Strapi:

[**Strapi**](https://strapi.io) [](https://github.com/strapi/strapi)is the most advanced open-source **Node.js Headless Content Management System** used to build scalable, secure, production-ready APIs quickly and efficiently saving developers countless hours of development.

With its extensible plugin system, it provides an enormous set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator, etc. **Strapi is 100% open-source,** which means:

- Strapi is **completely free**.
- You can **host it on your servers**, so you own the data.
- It is entirely **customizable and extensible**, thanks to the plugin system.

### Next.js:

[**Next**](https://nextjs.org/) [](https://strapi.io/integrations/nextjs-cms)is a lightweight **React** framework to create server-rendered applications. Next.js will take care of the heavy lifting of the application build such as _code splitting, HMR (hot module replacement) SSR (server-side rendering)_ and allow us to focus on writing the code, not our build config.

### GraphQL:

[**GraphQL**](https://github.com/graphql) is a query language also developed by Facebook to allow the front end of an application to easily query an application's API. Each query requests only the data needed to be rendered by the current view. This allows the developer to craft a great user experience across _multiple devices and screen sizes_.

### Stripe:
[**Stripe**](https://github.com/stripe) is one payment processor for applications today. Stripe has developed the tools and SDKs to allow developers to craft and integrate _secure, compliant payment processing_ into any app with ease.

## Table of contents

- 🏗️ [Setup](https://strapi.io/blog/nextjs-react-hooks-strapi-food-app-1) (part 1) - **Current**
- 🏠 [Restaurants](https://strapi.io/blog/nextjs-react-hooks-strapi-restaurants-2) (part 2)
- 🍔 [Dishes](https://strapi.io/blog/nextjs-react-hooks-strapi-dishes-3) (part 3)
- 🔐 [Authentication](https://strapi.io/blog/nextjs-react-hooks-strapi-auth-4) (part 4)
- 🛒 [Shopping Card](https://strapi.io/blog/nextjs-react-hooks-strapi-shopping-cart-5) (part 5)
- 💵 [Order and Checkout](https://strapi.io/blog/nextjs-react-hooks-strapi-checkout-6) (part 6)
- 🚀 [Bonus: Deploy](https://strapi.io/blog/nextjs-react-hooks-strapi-deploy) (part 7)

## 🏗️ Setup

### Next.js

To set up [Next.js](https://strapi.io/integrations/nextjs-cms) you will need an empty directory to install the dependencies and host our project root.

This project will be split into two parts, one for the front end (Next.js code) and one for the backend (Strapi code).

1. Run the code below in your terminal to create this project’s source folder.

```bash
  mkdir next-food-delivery
```

2. Next, Open the `next-food-delivery` folder in your favourite code editor, VS Code preferably and run the following code in the integrated terminal.

```bash
  npx create-next-app@latest frontend
```

You should see the following output.

```bash
  ➜ npx create-next-app@latest frontend
  Need to install the following packages:
  create-next-app@13.3.4
  Ok to proceed? (y) y
```

Here are the options I selected for this tutorial, make sure you chose the same ones to follow along:

```bash
➜ next-food-delivery npx create-frontend frontend
  Need to install the following packages:
  create-next-app@13.3.4
  Ok to proceed? (y) y
✔ Would you like to use TypeScript with this project? … No
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use `src/` directory with this project? … No
✔ Would you like to use experimental `app/` directory with this project? … No
✔ What import alias would you like configured? … @/*
Creating a new Next.js app
```

The following code will create a folder named `frontend` and set up NextJS.

First things first, let's set up our environment variables to avoid hard coding the API URL and having to update it on every deployment.
Create a new file in the project’s directory and add the following code.

```bash
  cd frontend
  touch .env.development
```

Inside `/.env.development` development file add the following code:

```bash
    NEXT_PUBLIC_API_URL='http://localhost:1337'
```

### Adding Tailwind

This tutorial makes use of [Next And Tailwind](https://tailwindcss.com/docs/guides/nextjs) to implement Tailwind into the application.

**Tailwind** is a front-end library to easily style your application. This will take care of the heavy lifting on the front end.
Open your terminal in the `frontend` directory and run the following command:

> Note: if you selected to use tailwind in the previous option you can omit this step.

```bash
  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p
```

**Configure your template paths**
Add the following code inside the `tailwind.config.js` file.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

**Add the Tailwind directives to your CSS**
Add the @tailwind directives by replacing your css inside the `styles/globals.css` file with the following.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

If the above was created for you automatically, you can remove all of the other css after the @tailwind directives.

We are importing our CSS in the `_app.js` file inside the **pages directory** . This will allow us to share our CSS and and Layout component across all pages.

> You can read more about the `_app.js` handling [here](https://nextjs.org/docs/advanced-features/custom-app)

1. Open the **pages** folder, select the `_app.js` to see where we are importing our CSS.

Path: `/frontend/pages/_app.js`

```javascript
import "@/styles/globals.css";

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

1. Now replace the code inside the **index.js** file with the following to test out **tailwind** CSS.

Path: `frontend/pages/index.js`

```jsx
import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="mx-auto container">
        <button className="inline-block py-3 px-7 w-full md:w-auto text-lg leading-7 text-green-50 bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm">
          Primary button
        </button>
      </main>
    </>
  );
}
```

2. Next, open your terminal in the frontend directory and start the next application by running the command below.

```bash
   npm run dev
```

Open this URL, [localhost:3000](http://localhost:3000), in your favourite browser to view the next app. You should get an output similar to the one below.

![Homepage](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/testing-tailwind.png)

**Designing the page**
Now that we have Tailwind running inside of our Next project, we can style the shared frontend components like the nav bar.

3. Create a folder in the **frontend** directory named **components** to store all the components for the next application and create a file named **Layout.jsx.**

Add the following code bellow:

Path: `/frontend/components/Layout.js`

```jsx
import Head from "next/head";
import Link from "next/link";

function Navigation() {
  return (
    <nav className="container mx-auto flex justify-between p-6 px-4">
      <div className="flex justify-between items-center w-full">
        <div className="xl:w-1/3">
          <Link
            className="block text-lg max-w-max ext-coolGray-500 hover:text-coolGray-900 font-medium"
            href="/"
          >
            Food Order App
          </Link>
        </div>

        <div className="xl:block xl:w-1/3">
          <div className="flex items-center justify-end">
            <Link
              className="text-coolGray-500 hover:text-coolGray-900 font-medium"
              href="/"
            >
              Home
            </Link>
            <Link
              className="inline-block py-2 px-4 mr-2 leading-5 text-coolGray-500 hover:text-coolGray-900 bg-transparent font-medium rounded-md"
              href="/login"
            >
              Log In
            </Link>
            <Link
              className="inline-block py-2 px-4 text-sm leading-5 text-green-50 bg-green-500 hover:bg-green-600 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md"
              href="/register"
            >
              Sign Up
            </Link>
          </div>
        </div>
      </div>
    </nav>
  );
}

export default function Layout(props) {
  const title = "Welcome to Nextjs";

  return (
    <div>
      <Head>
        <title>{title}</title>
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <Navigation />
      <div className="container mx-auto px-4">{props.children}</div>
    </div>
  );
}
```

4. Edit the `_app.js` file to use the new Layout component across the application:

Path: `/frontend/frontend/pages/_app.js`

```jsx
import "@/styles/globals.css";
import Layout from "@/components/Layout";

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

You should now have a shared header bar across all your pages, as shown in the output below:

![Homepage with the nav bar](https://github.com/PaulBratslavsky/food-app-article-update/raw/main/images-project/nav-component.png)

### Creating the Login and Sign up page

1. Create two additional pages in the **pages** folder to allow users to sign in and sign up named **login.js** and **register.js,** respectively.
2. Populate the files with the following code.

Path: `/frontend/pages/register.js`

```jsx
/* pages/register.js */
export default function RegisterRoute() {
  return <h1>Sign Up</h1>;
}
```

Path: `/frontend/pages/login.js`

```jsx
/* pages/login.js */

export default function LoginRoute() {
  return <h1>Log In</h1>;
}
```

You should now see the routes at [http://localhost:3000/login](http://localhost:3000/login) and [http://localhost:3000/register](http://localhost:3000/register)

**Setting up the database**
This tutorial uses [PostgreSQL](https://www.postgresql.org/) as the database for this application.

1. Head on to the [download page](https://www.postgresql.org/download) for PostgreSQL and follow the prompts to install PostgreSQL on your local machine.
   > This tutorial uses Windows 10 as its operating system.
2. Search and open up _PgAdmin_ in the start menu of your computer. _PgAdmin_ will help create and manage your _Strapi database._
   > PgAdmin is installed when you install [PostgreSQL](https://www.postgresql.org/download/).
3. When PgAdmin opens, you will be prompted to put in the password entered during the installation as shown below.
   ![PyAdmin Screenshot](https://paper-attachments.dropbox.com/s_2AB6CD6238DB99E473ED13F1FBA90C2266A685066D162C9FB97895FCD9D8F400_1648245416520_PgAdmin+Password.jpg)

4. On the left navigation bar, click on **Servers** and click on **PostgreSQL** **14**.
   ![A Sample Screenshot](https://paper-attachments.dropbox.com/s_2AB6CD6238DB99E473ED13F1FBA90C2266A685066D162C9FB97895FCD9D8F400_1648257844042_PgAdmin+clicks.jpg)

5. Right-click on **Databases,** hover over **Create** and click on **Database**.
   ![A Sample Screenshot](https://paper-attachments.dropbox.com/s_2AB6CD6238DB99E473ED13F1FBA90C2266A685066D162C9FB97895FCD9D8F400_1648259457129_PgAdmin+Rightclick.jpg)

6. You can name the database anything you desire, but, in this tutorial, the name of the database is **nextapp**. Once you're done naming the database, hit save.
   ![nextapp database](https://paper-attachments.dropbox.com/s_6C0ECA10829B93D62998B06C40062587254EF184B701BBBA0364E3885E4704C3_1660842285718_save+database.jpg)

The name of the database, **nextapp**, will be shown on the left navigation bar. Clicking on it will prompt a drop-down as shown below:

![](https://paper-attachments.dropbox.com/s_6C0ECA10829B93D62998B06C40062587254EF184B701BBBA0364E3885E4704C3_1660842130259_nexapp+showing.jpg)

### Install Strapi

Having a frontend is good, but your app needs a backend to manage users, restaurants, dishes and orders. To make the magic happen, let's create a Strapi API.

> Please use version >=[Node 9](https://nodejs.org/en/download) and have PostgreSQL installed and running on your machine.

**Create Strapi server**

1. Open your terminal in the `next-food-delivery`'s directory and run the following code to create a **Strapi** application.

```bash
  npx create-strapi-app@latest backend
```

2. Running the above command for the first time will prompt you with steps to install **Strapi** Choose **custom** settings and follow the installation steps. Make sure to provide your credential for the postgres database that we created earlier.

Here are my options:

```bash
➜  next-food-delivery npx create-strapi-app@latest backend
? Choose your installation type Custom (manual settings)
? Choose your preferred language JavaScript
? Choose your default database client postgres
? Database name: nextapp
? Host: 127.0.0.1
? Port: 5432
? Username: postgres
? Password: ***********
? Enable SSL connection: No

Creating a project with custom database options.
```

3. Once the installation is complete, you should see the following output.

```bash
Available commands in your project:

  yarn develop
  Start Strapi in watch mode. (Changes in Strapi project files will trigger a server restart)

  yarn start
  Start Strapi without watch mode.

  yarn build
  Build Strapi admin panel.

  yarn strapi
  Display all available commands.

You can start by doing:

```

You can start your project by running the following command:

```bash
  cd backend
  npm run develop
```

4. Once the application starts you should see the following.

![Admin sign up](https://paper-attachments.dropbox.com/s_6C0ECA10829B93D62998B06C40062587254EF184B701BBBA0364E3885E4704C3_1661125603160_Strapi+Admin+-+Google+Chrome+2022-08-21+23-18-24.gif)

5. As shown in the output below, Strapi wants to know a bit about you. You can choose to answer or decide to skip this question.

![](https://paper-attachments.dropbox.com/s_6C0ECA10829B93D62998B06C40062587254EF184B701BBBA0364E3885E4704C3_1661120392747_image.png)

6. Open the **Backend** folder, click on **backend**, and select **database.js** from the **config** folder to see your configuration file.

You should see the following code that was automatically setup for you when we created your Strapi project with your postgres credentials.

```javascript
//
 postgres: {
      connection: {
        connectionString: env('DATABASE_URL'),
        host: env('DATABASE_HOST', 'localhost'),
        port: env.int('DATABASE_PORT', 5432),
        database: env('DATABASE_NAME', 'strapi'),
        user: env('DATABASE_USERNAME', 'strapi'),
        password: env('DATABASE_PASSWORD', 'strapi'),
        ssl: env.bool('DATABASE_SSL', false) && {
          key: env('DATABASE_SSL_KEY', undefined),
          cert: env('DATABASE_SSL_CERT', undefined),
          ca: env('DATABASE_SSL_CA', undefined),
          capath: env('DATABASE_SSL_CAPATH', undefined),
          cipher: env('DATABASE_SSL_CIPHER', undefined),
          rejectUnauthorized: env.bool(
            'DATABASE_SSL_REJECT_UNAUTHORIZED',
            true
          ),
        },
        schema: env('DATABASE_SCHEMA', 'public'),
      },
      pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
    },
//

```

You can find your database variables within your .env file.

Good job, you successfully set up both Next.js and Strapi projects! 🎉

🏠 In the next section, you will learn how to display the **list of restaurants**: [https://strapi.io/blog/nextjs-react-hooks-strapi-restaurants-2](https://strapi.io/blog/nextjs-react-hooks-strapi-restaurants-2).

Learn how to create a food ordering app with Strapi and Next.js using React Hooks. 

Create a Food Ordering App with Strapi and Next.js 1/7

Check out the following related tutorials.

large_Astro & Strapi Website tutorial_ Part 2 - Intro to Strapi.jpg

medium_Astro & Strapi Website tutorial_ Part 2 - Intro to Strapi.jpg

small_Astro & Strapi Website tutorial_ Part 2 - Intro to Strapi.jpg

thumbnail_Astro & Strapi Website tutorial_ Part 2 - Intro to Strapi.jpg

Astro & Strapi Website tutorial_ Part 2 - Intro to Strapi.jpg

Astro & Strapi Website Tutorial: Part 2 - Intro to Strapi

Complete Astro and Strapi Tutorial Part 1

large_Astro & Strapi Website tutorial_ Part 1 - Intro to Astro.jpg

medium_Astro & Strapi Website tutorial_ Part 1 - Intro to Astro.jpg

small_Astro & Strapi Website tutorial_ Part 1 - Intro to Astro.jpg

thumbnail_Astro & Strapi Website tutorial_ Part 1 - Intro to Astro.jpg

Astro & Strapi Website tutorial_ Part 1 - Intro to Astro.jpg

Astro & Strapi Website Tutorial: Part 1 - Intro to Astro

In web security, authentication stands as a cornerstone for safeguarding sensitive data. Two prevalent methods, API tokens and JSON Web Tokens (JWTs), play pivotal roles in this landscape.

This guide provides the exploration of these mechanisms, offering insights into their generation, management, and implementation in Strapi CMS and in building fortified web applications.

## Prerequisites

The following are required to follow along with this tutorial:

- [NodeJs](https://nodejs.org/en/download/) installation on our local machine.
- [Postman](https://www.postman.com/downloads/) installation on our local machine.
- A Good understanding of Strapi - [get](https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html) [started](https://docs.strapi.io/dev-docs/quick-start) with this quick guide.
- Basic knowledge of authentication concepts.
## What is Authentication?

Authentication checks if an entity is who they say they are before letting them access resources.

### Authentication Types

There are several authentication methods. These include:

- **Username and password authentication:** This is the most common form, where users provide a username and password to access server resources.
- **Two-factor/Multi-factor authentication (2FA/MFA):** Users must provide more than one verification method before being granted access.
- **Biometric authentication:** This utilizes users' physical uniqueness, such as fingerprints, facial recognition, or voice recognition.
- **Single Sign-On (SSO):** Users authenticate once with a central service and access multiple applications without separate logins (e.g., Google authentication).
- **Token-based authentication:** This uses unique tokens (e.g., API keys, JWTs) for verification instead of usernames and passwords.
## What is a REST API?

A REST API is an application programming interface that conforms to the design principles of the *representational state transfer* (REST) architectural style.

REST APIs communicate through HTTP requests to perform standard database functions like creating, reading, updating and deleting records (also known as **CRUD**) within a resource.

## Authentication Strategies in Strapi

In this article, we will only explore the authentication strategies in Strapi or Strapi authentication methods. They are [**API Tokens**](https://docs.strapi.io/dev-docs/configurations/api-tokens) and [**JWT Tokens**](https://docs.strapi.io/dev-docs/plugins/users-permissions#jwt-configuration).

API tokens are built into Strapi CMS and found in the admin panel. Whereas the Users and Permission Plugin provides authentication using JWT tokens.

Without managing user accounts or making changes in the Users & Permissions plugin, users or applications can access resources using API tokens. With this, any unmanaged user or application can access resources if they make authenticated requests using an API token.

Unlike API tokens, the Users & Permissions plugin creates an access layer. With the access layer, users are matched and determine whether they can access a resource. This plugin uses JWT to authenticate users. 

There must be an `Authorization` header with the JWT token to make authenticated requests. It should be in the bearer-token scheme, `Bearer your-api-token`.

## Understanding API Tokens
### What are API tokens and their role in authenticating and authorizing API requests?

![001-api-token-cycle.png](https://api-prod.strapi.io/uploads/001_api_token_cycle_c15da0c9a5.png)


API tokens are unique identifiers or codes that grant users or applications access to an API. These tokens are uniquely created for each client and validated by the API before access to a resource gets granted.

They allow users or clients to make requests as authenticated users.

## The Basics of JSON Web Tokens (JWTs)
![002-jwt-token-cycle.png](https://api-prod.strapi.io/uploads/002_jwt_token_cycle_76ffbc03bd.png)


JWT or JSON Web Tokens is a standard for providing a secure and efficient way to transmit information representing claims between two parties.

They are used for authentication and authorization mechanisms and information exchange.

### Structure

The JWT comprises three structures: the **header**, **payload**, and **signature**.

- **Header**: This comprises of 2 parts. "Type", which is JWT and the "signature". The signature can be HS256, RSA, etc. The signature defines the signing or hashing algorithm used. See example below:
- 
```
{
  "alg": "HS384",
  "typ": "JWT"
}

```

- **Payload**: The payload contains the claims of the user. See example below:
```
{
  "id": "1",
  "name": "Strapi User",
  "admin": false
}

```

- Signature: By signing the encoded header, the encoded payload, a secret and the algorithm specified in the header, we get the signature. It ensures that the information sent remains unchanged along the way.
## Differences and Similarities
![003-difference-between-api-token-and-jwt-token.png](https://api-prod.strapi.io/uploads/003_difference_between_api_token_and_jwt_token_66017b0a90.png)

## Pros and Cons
- API tokens do not necessarily require authentication to generate one. There must be authentication to generate a JWT token,
- Unlike API tokens, JWT tokens are stateless and eliminate the need for server-side management.
- API tokens have a payload size smaller compared to JWT tokens. JWT tokens payload size can become bloated with excessive payload data.
- JWT tokens can be issued and validated by different parties. API tokens are dependent on the issuer’s availability and reliability.
- JWT tokens are flexible in adding additional user information to the payload. API tokens are limited in the authentication context.
## Create a Collection Type

To carry out the implementation of API tokens and JWT tokens, we need to create a collection type. 

Using the [Content-Type Builder](https://docs.strapi.io/user-docs/content-type-builder), create a collection type called `Product` and create a single field for it called `name`. The `name` field should be of type `text` (short text), required, and unique. 

![004-create-product-collection-type.png](https://api-prod.strapi.io/uploads/004_create_product_collection_type_4fa1d31e5d.png)


The collection type represents products that we can buy, and the `name` is the product name. 

Using the [Content Manager](https://docs-next.strapi.io/user-docs/content-manager), proceed to create entries in the collection type:


![005-field-types.png](https://api-prod.strapi.io/uploads/005_field_types_68249cd0e9.png)


Our collection type is ready to be accessed. Let us proceed to make some requests using Postman.

> NOTE: Remember to click **“publish”** when creating an entry in our collection.

## Implementing API tokens in Strapi CMS
### API Tokens in Strapi
In Strapi, API tokens can be managed in the admin panel. Administrators can manage API tokens from ***Settings*** *>* ***Global settings*** *>* ***API Tokens***.

![006-create-api-token-panel.png](https://api-prod.strapi.io/uploads/006_create_api_token_panel_73da797dc6.png)

### Creating an API Token
Creating an API token requires that we give it a name, as shown below. The description is optional. The token duration is required and set to 7 days, 30 days, 90 days or unlimited. The token type can be **full access**, **custom** or **read-only.**

![007-create-api-token.png](https://api-prod.strapi.io/uploads/007_create_api_token_53c943bbfd.png)

### API Token Types
**Full Access API Token**
With the full-access tokens, users get granted permission. They can make requests to any route of the Product collection. As can be seen, all actions on the product route are allowed by default and can’t be modified.

![008-full-access.png](https://api-prod.strapi.io/uploads/008_full_access_490f1328c7.png)

**Custom API Token**
By using custom API tokens, one can customize access to the product route and modify actions. As depicted in the image below, we can restrict access to the create action on the Product collection route.

![009-custom-access.png](https://api-prod.strapi.io/uploads/009_custom_access_89fe961403.png)

**Read-only API Token**
The read-only API token type only grants access to the read-only actions, the `find` and `findOne`. Requests to update, create or delete a resource in the Product collection will be forbidden. See the image below.

![010-read-only.png](https://api-prod.strapi.io/uploads/010_read_only_a7a9a7f803.png)

We will use the full access token type and set the token expiration to 7 days. See the image below.

![011-create-an-api-token.png](https://api-prod.strapi.io/uploads/011_create_an_api_token_67fd023e36.png)

> **NOTE**: Ensure to copy the token before leaving the page.

### Make Requests Using Postman
Products are available on our Strapi server. We need to be able to send HTTP requests that will allow clients or users to perform **CRUD** operations on these product resources. [Postman](https://www.postman.com/) will be our tool for making requests to the Strapi REST API.

### Fetch all Products (Unauthenticated Request)
We will start by fetching all the products in our Strapi backend. As shown in the image below, this route gets protected by default, and the request is forbidden. So, to fetch all products, we must make an authenticated request. 

![012-fetch-all-products.png](https://api-prod.strapi.io/uploads/012_fetch_all_products_ab1cacb955.png)

### Fetch all Products (Authenticated Request)
In the request header, using the bearer-token scheme, add the **“Authorization”** header with the generated API token.

![013-fetch-all-products-authenticated.png](https://api-prod.strapi.io/uploads/013_fetch_all_products_authenticated_6dfdb9d871.png)

Also, we can add the API token by clicking the Authorization tab in Postman. Select `Bearer Token` from the dropdown and enter the API token.

![014-add-authorization-header-2.png](https://api-prod.strapi.io/uploads/014_add_authorization_header_2_268265f7f4.png)


Now, when we make a request to get all products, it will be granted.

![015-successful-fetch-products.png](https://api-prod.strapi.io/uploads/015_successful_fetch_products_27b2e40fc9.png)

### Update a Product

With the API token, we can make an update to a product. Let us change the name of the first product item. 
Start by adding the token to the `Authorization` header, as shown in the image below:

![016-api-token-to-put-request.png](https://api-prod.strapi.io/uploads/016_api_token_to_put_request_d6d967da8c.png)

Proceed by adding the request body and making the request. As can be seen in the image below, the `PUT` request was successful.

```
{
  "data": {
    "name": "MacBook Pro 2024"
  }
}

```

![017-successful-api-token-with-put.png](https://api-prod.strapi.io/uploads/017_successful_api_token_with_put_d5c3473d55.png)


Continue by making `CREATE` and `DELETE` requests.

## **Sending JWTs with Postman**
### JWT Tokens in Strapi

In Strapi, the Users and Permissions Plugin provides us with authentication through JSON Web tokens. 

When we click the **Settings** link, under the **USERS & PERMISSIONS PLUGIN** section, we will find sections for managing **Roles**, **Providers**, **Email Templates**, and **Advanced Settings**.

The **Role** permissions come in 2 kinds: **Authenticated** and **Public****:**

- Authenticated is for permissions given to authenticated users.
- Public is for permissions granted to unauthenticated users.

**Set Public Endpoints**
Now, click the **Public >** **Product**, and select only `find` and `findOne` endpoints. Users will access these endpoints without authentication or authorization. With this in place, unauthenticated users can see all products and any product by their ID.

![018-set-public-endpoints.png](https://api-prod.strapi.io/uploads/018_set_public_endpoints_25d96a89d8.png)

**Set Authenticated Endpoints**
Click on **Authenticated** > **Product**, and click on `Select All`.
With this in place, authenticated users can access all endpoints related to the `Product` collection.

![019-set-authenticated-endpoints.png](https://api-prod.strapi.io/uploads/019_set_authenticated_endpoints_2843b0d9bd.png)

### Generating JWT Tokens

To generate a JWT token, a user must first make an authentication request. An authentication request body must include the `password` and `identifier` of the user. The `identifier` could be their username or email.

There are 2 ways to create a user. We can create the user in the admin panel or make a POST request to the `/api/auth/local/register` endpoint. Let us do the latter:

![020-post-request-create-user.png](https://api-prod.strapi.io/uploads/020_post_request_create_user_1bec3479e7.png)

In the image above, the request body includes the `username`, `email` and `password` of the new user. Upon successful request, the JWT token, along with other data, gets returned as shown below:

![021-successful-create-user-with-jwt.png](https://api-prod.strapi.io/uploads/021_successful_create_user_with_jwt_a29619486a.png)


From the image above, the JWT in the response body represents the JWT token the new user can use to make authenticated requests.

Once the JWT token expires, we can make a `**POST**` request to the `/api/auth/local` endpoint to get a new one. In the body request, we will only supply the user’s username or email as an `identifier` and their `password`.
```
{
  "identifier": "user@strapi.io",
  "password": "strapiPassword"
}

```

![022-login-request.png](https://api-prod.strapi.io/uploads/022_login_request_c76451e49d.png)


Upon success, the following gets returned.

![023-create-jwt-through-login.png](https://api-prod.strapi.io/uploads/023_create_jwt_through_login_d5c14a93cb.png)

### Create a Product

With the JWT token, we can perform all the actions related to the `Product` collection endpoint. For this reason, let us create a product. Using the bearer-token schema, add the JWT token to the `Authorization` header.

![024-add-jwt-to-authorization-header.png](https://api-prod.strapi.io/uploads/024_add_jwt_to_authorization_header_195219d09e.png)


Add the following as the request body in Postman.
```
{
  "data": {
    "name": "PlayStation 5 (PS5)"
  }
}

```

![025-post-request-to-create-product.png](https://api-prod.strapi.io/uploads/025_post_request_to_create_product_c095677249.png)

Upon successful request, the following gets returned.

![026-successful-create-product.png](https://api-prod.strapi.io/uploads/026_successful_create_product_dc30d3f690.png)

### Delete a Product

Next, let us delete a product. To delete a product, we will make a `DELETE` request to the `/api/products/[id]` endpoint. The `[id]` here represents the ID of the product we want to delete.

Start by adding the JWT token to the `Authorization` header. 

![027-delete-request-with-jwt.png](https://api-prod.strapi.io/uploads/027_delete_request_with_jwt_7457232c81.png)

In the image above, we want to delete the product with an `id` of `1`. When we make the request, we get the following:

![028-successful-delete-request.png](https://api-prod.strapi.io/uploads/028_successful_delete_request_2fc7bae0a4.png)

## **Best Practices for API Token and JWT Management**

Because API tokens and JWT tokens are required to make authenticated requests, they should be managed and prevented from unwanted and malicious use.

- Ensure that HTTPS and SSL are used for all API communications to protect API tokens and JWT tokens.
- Ensure that there is secure Storage to store API tokens and JWT both on the client and server side.
- Implement Rate Limiting on endpoints to prevent brute-force attacks and limit the number of requests per unit of time.
- Monitor and audit API usage.
- Stay up to date with best security practices.
- Implement token expiry to reduce the risks of unauthorized access.
## **Conclusion**

In this article, we looked into the application of authentication and the REST API. We have discovered that in Strapi, there are two strategies for making authenticated requests: API token, JWT, and others.

When choosing an authentication strategy or any Strapi authentication method, we have to think in such a way that it will be efficient, applicable and not just problematic after. Such as, in comparison to the API tokens, JWT tokens are stateless, and they eliminate the need for server-side management, like storing tokens in the database. Also, in terms of their payload size, API tokens are more compact than JWT tokens, which are prone to get bloated due to more payload information.

It is important to apply security practices such as HTTPS and SSL, secure storage of the tokens, rate limiting, API monitoring, etc. so that authentification requests do not come from malicious access.

## **Additional Resources**
- ⁠https://docs.strapi.io/dev-docs/configurations/api-tokens
- ⁠⁠[https://docs.strapi.io/user-docs/settings/API-tokens](https://docs.strapi.io/user-docs/settings/API-tokens)
- [⁠⁠https://docs.strapi.io/dev-docs/backend-customization/examples/authentication](⁠⁠https://docs.strapi.io/dev-docs/backend-customization/examples/authentication)
- [⁠⁠https://strapi.io/blog/how-to-create-a-refresh-token-feature-in-your-strapi-application](⁠⁠https://strapi.io/blog/how-to-create-a-refresh-token-feature-in-your-strapi-application)
- [https://strapi.io/blog/a-beginners-guide-to-authentication-and-authorization-in-strapi](⁠⁠https://strapi.io/blog/how-to-create-a-refresh-token-feature-in-your-strapi-application)
- https://www.ibm.com/topics/rest-apis
- https://jwt.io/introduction



In web security, authentication stands as a cornerstone for safeguarding sensitive data. Two prevalent methods, API tokens and JSON Web Tokens (JWTs), play pivotal roles in this landscape.