Blog using Next.js and Strapi

TUTORIAL LINK

NOTE:

This project is based on the Strapi Starter Next 13, Tailwind, Typescript, and Strapi made by Trecia, Daniel and Paul from the Strapi Team.

Introduction

This project is a code repo for the Strapi blog article Build a blog with Next.js and Strapi.

Getting Started

1. Clone the repo locally:

git clone https://github.com/Marktawa/blog-strapi

2. Set up backend dependencies:

cd blog-strapi
cd backend
yarn

3. Set up environment variables:

cp .env.example .env

4. Start your project by running the following command:

  yarn build
  yarn develop

Create your first admin user.

Seeding the Data

At the root of our project, we have our seed-schema.tar file. We will use it to update the schema for our Strapi app.

1. Go back to your terminal and stop your Strapi backend server by pressing CTRL plus C on your keyboard.

2. Run the following command in the root of your project folder blog-strapi to update the schema:

tar xvf seed-schema.tar -C backend

3. Import data into your backend's database:

cd backend
yarn strapi import -f ../seed-data.tar.gz

Answer y to The import will delete all assets and data in your database. Are you sure you want to proceed? (y/N)

4. After a successful import, rerun your Strapi backend server.

yarn develop

In your browser, log in to your admin panel. You should see the newly imported content and collection types.

Frontend Setup

1. Open up a new terminal session and navigate into your frontend folder. Set up frontend dependencies:

cd frontend
yarn

2. Create .env file:

touch .env

3. Paste in the following.

NEXT_PUBLIC_STRAPI_API_TOKEN=your-api-token
NEXT_PUBLIC_PAGE_LIMIT=6
NEXT_PUBLIC_STRAPI_API_URL=http://127.0.0.1:1337

4. Before starting our Next JS app we need to go inside our Strapi Admin and create a token that we will be using for displaying our content.

Inside your Strapi Admin Panel navigate to Settings -> API Tokens and click on the Create new API Token.

Here are our Token Settings

Name: Public API Token Content Description: Access to public content. Token duration: Unlimited Token type: Custom

In Permissions let's give the following access.

Once you have your token add it to your NEXT_PUBLIC_STRAPI_API_TOKEN variable name in the .env file.

5. Start your frontend

yarn dev