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.

A blog starter template developed using Gatsby and Prismic.

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.

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

A blog starter template using NextJS and Prismic CMS

Blog | Home | NextJS Prismic Blog Starter

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

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

Make your website editable for the whole team - Prismic

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.

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

Install the packages using the command npm install

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:

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)

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

# 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.

NodeJS - Server-side JavaScript runtime environment


NextJS - React based framework for generating sites using SSR/SSG

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

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.

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. 

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

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

Webhooks are the events that are triggered whenever a change is published on your Prismic repository and the API is updated.

I use Vercel as the example and I guess it might be quite similar for Netlify or any other cloud service.

Create a Deploy Hook in Vercel here. For more info, check here

Create a Prismic webhook here. For more info, check here.

Copy the webhook URL you created in Vercel in the URL field of the Prismic webhook

The Secret field is optional in the Prismic webhook. If you set it, Prismic will send the content to your server, so that you can verify that the request is coming from prismic.io.

After successful creation of the webhook, you can manually trigger it and can also see the logs.

Prismic Webhook will be triggered automatically based on the triggers you selected when you created the webhook.

That's it! If you followed the above steps and successfully created a Prismic webhook, it should trigger the deploy hook which will start the build process in Vercel or any platform where you created the deploy hook.

If you have any questions, please post them in the comments section.

A Prismic Webhook allow you to automatically or manually trigger a deployment process in Netlify or Vercel if any post is published or unpublished OR for any other events in Prismic.

It took almost a month to learn Gatsby & Prismic CMS and build a blog like this website. After building it, I thought of making this process quick and easy for beginners. So, I created a starter and named it as Gatsby Prismic Blog Starter. I published this starter as a NPM package and has been downloaded ~300 times.

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

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

Use the Gatsby CLI to create a new site, specifying the default starter.

npm install -g gatsby-cli

# create a new Gatsby site using this starter
gatsby new <name> https://github.com/iamsainikhil/gatsby-prismic-blog-starter

GA_ID=<your Google Analytics tracking ID> (Optional)

PRISMIC_REPOSITORY_NAME=<your prismic repository name> (Required)

PRISMIC_ACCESS_TOKEN=<your prismic permanent access token> (Required)

GATSBY_DISQUS_NAME=<your disqus project shortname> (Required)

GATSBY_TELEMETRY_DISABLED=1 (Optional to disable GATSBY analytics)

# Go to project directory
cd <name>

# start the application
npm run start

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

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

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Gatsby - React based framework for generating static sites

GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Gatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster with Gatsby Cloud.

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

Blog

Build a Blog using NextJS & Prismic

Prismic Webhooks

Build a Blog using Gatsby & Prismic

.css-1ns9571{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1ns9571:hover,.css-1ns9571:focus{color:var(--theme-ui-colors-secondary,#5b5b5b);-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;}Build a Blog using NextJS & Prismic

Prismic Webhooks

Build a Blog using Gatsby & Prismic

Build a Blog using NextJS & Prismic