ialtafshaikh / contentstack-cms-backend-blog-rendering

Implementing a blog rendering page using Contentstack as a CMS backend

CMS Backend for Blog Rendering

Using contentstack as a backend for creating a content model for a blog website and designing the frontend using NextJS.

Features

• content-modelling is done using Contentstack CMS
• content-types are grouped using Labels in stack.
• app is fetching data from Contentstack Backend
• Data for Navigation, Footer and Main Section are fetched from backend and rendered on frontend.
• bootsrap is used to layout and design the pages and components
• app make use of sass and css
• nextjs serverless function implemented
• implemented blog url using slugs
• hosted on Vercel

This is a Next.js project bootstrapped with create-next-app.

Getting Started

To Download this project and run locally

First, clone the repository into your local machine:

git clone https://github.com/ialtafshaikh/contentstack-cms-backend-blog-rendering.git

Secondly, install all the dependencies

npm i

create a ..env.local file inside root of your directory and add contentstack credentials as follows:

CS_API_KEY=<your stack api key>
CS_DELIVERY_TOKEN=<your delivery token>
CS_ENVIRONMENT=<your environment name>

NOTE

• For development all the data are published in altaf_development environment
• And For hosted application the environment for publishing the data is set to 'altaf_production` so to see any update in live hosted website kindly publish entry in respective environment.
• My stack name Team3 and all the content-types are inside single label Altaf Blog Rendering so kindly choose the Label in VIEW BY filter to see the content-type in Label view.

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Resources

• React keys and list
• NextJs router
• NextJs Image
• NextJs Getting Started
• Contentstack Node SDK
• Contentstack Labels For Content-Type grouping

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Live Demo of this Project

Live link

Check out our Next.js deployment documentation for more details.

Author

• Altaf Shaikh - work by - ialtafshaikh

License

This project is licensed under the MIT License - see the LICENSE.md file for details