Develop Mini Blog with Directus - Part 4

directus | Directus, Headless CMS NextJS | 2024-10-23

Pre-requisite

Basic understanding about Directus and NextJS

Mini Blog Series

Setting up NextJS App

What's Next?

It’s pretty straight forward now.

We need to have a NextJS app, with directrus-sdk to communicate with Directus CMS and bootstrap for minor styling.

Installation

Run the spin up command

npx create-next-app@latest

√ What is your project named? ... frontend
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... No
√ Would you like to use Tailwind CSS? ... No
√ Would you like your code inside a `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for next dev? ... No
√ Would you like to customize the import alias (@/* by default)? ... Yes
√ What import alias would you like configured? ... @/*

Check the Installation

Run the command to start the NextJS App

npm run dev

You should see this or similar message on screen. It is the default NextJS screen.

Screenshot1

Clean the default setup

First thing we would like to do is removing the default code

fonts
globals.css
page.module.css

Clean up the tsx code

page.tsx
layout.tsx

Then add a .env file at root folder

.env

DIRECTUS_TOKEN=
DIRECTUS_PROTOCOL=http
DIRECTUS_HOSTNAME=0.0.0.0
DIRECTUS_PORT=8055

Put the token we got in previous steps at DIRECTUS_TOKEN