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 AppWhat'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.
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