Build a Blog using NextJS & Prismic

Dec 1, 2020 15 min read

Learn and build a blog using NextJS Prismic Blog starter template as quickly as in 15-30 minutes.

NextJS Prismic Blog Starter

It took me just 2 days to learn NextJS and build a blog like this website. I created this blog so quickly because I already created a blog starter using Gatsby and Prismic in October 2020 and used almost similar design and React logic.

Because of the demand for the Gatsby starter, I thought of creating the same in NextJS. I created this starter and named it as NextJS Prismic Blog Starter. I published this starter as a NPM package and has been downloaded ~200 times.

Gatsby Prismic Blog Starter | Home

A blog starter template developed using Gatsby and Prismic.

https://gatsby-prismic-blog-starter.vercel.app

I kindly request you to give yourself 15-30 minutes following instructions and at the end you will have a working blog using NextJS Prismic Blog Starter template.

👀 Demo

Blog | Home | NextJS Prismic Blog Starter

A blog starter template using NextJS and Prismic CMS

https://nextjs-prismic-blog-starter.vercel.app/

🧐 Instructions

⚠️Note: This blog starter uses Prismic as the Content Management System. Hence, you need to have the required data first before using this starter.

Make your website editable for the whole team - Prismic

Choose your technology. Use the API to fetch content. Empower your content team.

https://prismic.io

For detailed instructions, check this documentation.

If you are done with the Prismic setup and created the necessary data model in your Prismic project, start running the app locally by following the quick start steps.

💻 Quick start

1. Create a NextJS site.

SHELL
npx create-next-app
# create a new NextJS site using this starter
git clone https://github.com/iamsainikhil/nextjs-prismic-blog-starter

2. Install the packages

Install the packages using the command npm install

3. Environment File

Go to API & Security section of your Prismic project, grab the Permanent Access Token with Access to Master.
The Repository Name is the name you have entered at the creation of the repository (you’ll also find it as the subdomain in the URL)
This project has the support for DISQUS comments section which need your DISQUS project name which can be found at https://<your-project-shortname>.disqus.com/admin/settings/general/
Create an .env file in the root directory of the project. Add the following properties in it:

JAVASCRIPT
NEXT_PUBLIC_GA_ID=<your Google Analytics tracking ID> (Optional)
NEXT_PUBLIC_SITE_URL=<URL of the deployed app>
PRISMIC_API_URL=<your prismic repository API URL> (Required)
PRISMIC_ACCESS_TOKEN=<your prismic permanent access token> (Required)
NEXT_PUBLIC_DISQUS_NAME=<your disqus project shortname> (Required)

4. Start developing.

Navigate into your new site’s directory and start it up.

SHELL
# Go to project directory
cd <name>
# start the application
npm run dev

5. Open the source code and start editing!

Your site is now running at http://localhost:3000!

Open the name directory in your code editor of choice and edit the contents. Save your changes and the browser will update in real time!

Apart from instructions, check out the tech stack behind the blog.

🔌 Technology

SASS - CSS preprocessor language
React - A JavaScript based UI library
NodeJS - Server-side JavaScript runtime environment

🧰 Tools

NextJS - React based framework for generating sites using SSR/SSG
Prismic - Headless CMS
Theme UI - Graph based design framework for designing UI
Vercel - A cloud platform for deploying static sites and Serverless Functions
Google Analytics - Analysis of website traffic and user behavior
Hotjar - User behavior analytics

Next.js by Vercel - The React Framework

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

https://nextjs.org/

That's it, you can now use this starter following the above instructions to build a blog similar to this website or customize as your wish to create a new blog website of your choice.

#skyisthelimit

Please don't forget to ask any questions or share your experience building a blog using the above starter in the comments section.

This article was last updated on Dec 1, 2020

Sai Nikhil

A passionate developer who brings creative ideas from areas, including networking & data storage, security, UI/UX design, and progressive web applications with a strong understanding of the entire web development process.