NextJS Blog Starter With Suncel CMS

If you are looking for a blog template to use with your Nextjs application, Suncel offers a free and open source template that is very easy to set up.

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

• Access the DEMO.

• Acces the Github

🎉 Starter features

The starter includes all the configuration required by Suncel(admin, preview, page render, etc...). You just need to update your API keys in the .env

it will includes Tailwind CSS.

On top of that, you have a Block example and a wrapper of the rich text with some style that you are free to modify.

🎬 Videos

A simple video on how to set up your blog with the Suncel starter. The video is very accessible from a technical point of view and the blog is immediately usable to publish content.

🏗️How was the template built ?

A more technical and longer video (over 2 hours), which explains how this template was built. If you want to further customize your blog, this video will be very useful.

🛠️ About the Setup

Account

• Create your Suncel account here (you can create a free plan with no time limit)

• Create a project

API Keys

• After creating an account, head over to the project settings you created earlier.

• Go to the API section, grab your Keys.

• At the root of the project, rename the .env.example file by .env

• Insert your API Keys in the .env of your project (NEXT_PUBLIC_SUNCEL_KEY=... and SUNCEL_REVALIDATE_SECRET=...). You can find these keys on app.suncel.io (Project → )

Ready to go

• npm run dev, then access the admin via /admin and login with the same id/pwd you have on app.suncel.io

• In the left menu, go to Globals and create a global of type Header. Add a logo and a link (link+label).

• Copy the id of the Header created in Globals (button "Copy Id") and replace in the code REPLACE_BY_HEADER_GLOBAL_ID by your header ID

• Do the same for the footer with a Global type 'Footer', and in the code, replace REPLACE_BY_FOOTER_GLOBAL_ID by your footer ID

Create your first page and add Blocks

• Create a page and you can now add your blocks, save and publish your page

• Create your blocks in react.

• Check our Youtube Channel to see some examples of how to create Blocks

Last Articles

• In your admin panel, in the pages section, create a blog folder that will contain all your articles, click on it, copy the ID of the folder from the url and replace in your code all the occurrences of REPLACE_BY_BLOG_FOLDER_ID by your ID

📧 Contact

Whether you'd like to discuss about this starter template or simply say "hello", I'd love to hear from you.

Email: dev@suncel.io