Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/washira/next-strapi-blog
Initial blog website using Next.js 14 and Strapi CMS.
https://github.com/washira/next-strapi-blog
daisyui nextjs14 strapi4 tailwindcss zustand
Last synced: 5 days ago
JSON representation
Initial blog website using Next.js 14 and Strapi CMS.
- Host: GitHub
- URL: https://github.com/washira/next-strapi-blog
- Owner: Washira
- License: mit
- Created: 2024-03-25T02:47:27.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-04-23T07:19:49.000Z (9 months ago)
- Last Synced: 2024-11-19T18:01:51.584Z (2 months ago)
- Topics: daisyui, nextjs14, strapi4, tailwindcss, zustand
- Language: TypeScript
- Homepage: https://next-strapi-blog-eight.vercel.app
- Size: 28.6 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Strapi Starter Next 14, Tailwind, Typescript and Strapi
note: Next.js is in version 14 and Strapi is in version 4.0.0-beta.3
reference: [Next-Stapi-Starter](https://github.com/strapi/nextjs-corporate-starter.git)
## Features
- **Content Types Builder**: Build the most flexible publishing experience for your content managers, by giving them the freedom to create any page on the go with [fields](https://docs.strapi.io/user-docs/content-manager/writing-content#filling-up-fields), components and [Dynamic Zones](https://docs.strapi.io/user-docs/content-manager/writing-content#dynamic-zones).
- **Media Library**: Upload your images, videos, audio or documents to the media library. Easily find the right asset, edit and reuse it.
- **Internationalization**: The Internationalization (i18n) plugin allows Strapi users to create, manage and distribute localized content in different languages, called "locales
- **Role Based Access Control**: Create an unlimited number of custom roles and permissions for admin and end users.
- **GraphQL or REST**: Consume the API using REST or GraphQL
You can unlock additional features such as SSO, Audit Logs, Review Workflows in [Strapi Cloud](https://cloud.strapi.io/login?source=github1) or [Strapi Enterprise](https://strapi.io/enterprise?source=github1).
## Getting Started
If you prefer videos that guide you through the setup process you can find them [here](https://github.com/strapi/nextjs-corporate-starter/issues/71)
1. Clone the repository locally:
```bash
git clone https://github.com/washira/next-strapi-blog.git
or
gh repo clone strapi/next-strapi-blog
```
2. Run `setup` command to setup frontend and backend dependencies:
```bash
yarn setup
```
3. Next, navigate to your `/backend` directory and set up your `.env` file. You can use the `.env.example` file as reference:
```bash
HOST=localhost
PORT=1337
APP_KEYS="toBeModified1,toBeModified2"
API_TOKEN_SALT=tobemodified
ADMIN_JWT_SECRET=tobemodified
JWT_SECRET=tobemodified
TRANSFER_TOKEN_SALT=tobemodified
DATABASE_CLIENT=mysql
DATABASE_HOST=localhost
DATABASE_PORT=3306
DATABASE_NAME=strapi
DATABASE_USERNAME=root
DATABASE_PASSWORD=root
```
4. Start your project by running the following command:
```bash
yarn build
yarn develop
```
You will be prompted to create your first admin user.
Great. You now have your project running. Let's add some data.
## Setting Up The Frontend
Next we need to switch to our `/frontend` directory and create our `.env` or `.env.local` file and paste in the following.
```bash
STRAPI_API_TOKEN=YOUR_STRAPI_API_TOKEN
STRAPI_API_URL=http://localhost:1337
```
Before starting our Next JS app we need to go inside our Strapi Admin and create two tokens that we will be using for **form submission** and displaying our **content**.
Inside your Strapi Admin Panel navigate to Settings -> API Tokens and click on the `Create new API Token`.
Once you have your token add it to your `NEXT_PUBLIC_STRAPI_API_TOKEN` variable name in the `.env` file.
**Alternatively:** you can create a READ only Token that will give READ permission to all your endpoints.
In this particular project this is not an issue. Although the above is the recommended way, just wanted to show you this option here as well.
When creating a Token, just select the `Read-only` option from token type drop down.
Once your environment variables are set you can start your frontend application by running `yarn dev`.
You should now see your Next JS frontend.
## Start Both Projects Concurrently
We can also start both projects with one command using the `concurrently` package.
You can find the setting inside the `package.json` file inside the root folder.
```json
{
"scripts": {
"frontend": "yarn dev --prefix ../frontend/",
"backend": "yarn dev --prefix ../backend/",
"clear": "cd frontend && rm -rf .next && rm -rf cache",
"setup:frontend": "cd frontend && yarn",
"setup:backend": "cd backend && yarn",
"setup": "yarn install && yarn setup:frontend && yarn setup:backend",
"dev": "yarn clear && concurrently \"cd frontend && yarn dev\" \"cd backend && yarn develop\""
},
"dependencies": {
"concurrently": "^7.6.0"
}
}
```
Go to the root folder and install the package, `yarn`
You can start both apps by running `yarn dev`.
## Conclusion
Hope you find this starter useful, it is a bare-bone example to help you get started quickly.
Would love to hear what you will build using it.
If you find bugs or have suggestions feel free to create issues.
Thank you and stay awesome.