Installing and Configuring NextBlog Template

In this part of the documentation we are going to show you how to Install and Configure Nextjs Blog templates.

Follow the steps to successfully install and configure NextBlog Template

Steps

The Blog Templates installation process is a bit different from the other templates. Follow these steps one by one to run the project without getting into unwanted error massages.

1. Installation
2. Database Setup - PostgreSQL (opens in a new tab)
3. Authentication (opens in a new tab)
4. Sanity Integration (opens in a new tab)
5. Markdown Integration (opens in a new tab)
6. Stripe Integration
7. Algolia Integration (opens in a new tab)
8. MailChimp Integration (opens in a new tab)
9. Resend Integration (opens in a new tab)

Follow the Sanity Integration guide to setup the project. After that take the Sanity ProjectID and title, and save them in the .env file under these variable names:

NEXT_PUBLIC_SANITY_PROJECT_ID=YOUR_PROJECT_ID
NEXT_PUBLIC_SANITY_PROJECT_TITLE=YOUR_PROJECT_TITLE

Stripe Integration

Getting the stripe Secret Key and Publishable Key

To integrate Stripe into your blog first, you have to get the Stripe Secret key and Publishable key.

Follow the instructions below to get the keys:

1. Go to the Developers tab. Then go to API keys. In that tab, you’ll see the keys.

2. Then go to the API Keys tab, after that scroll down to the Standard Keys and copy the Publishable and Secret Keys.

Now add it to the .env file.

STRIPE_PUBLISHABLE_KEY="YOUR_STRIPE_PUBLISHABLE_KEY"
STRIPE_SECRET_KEY="YOUR_STRIPE_SECRET_KEY"

Creating the subscription plan

Now that we got the keys, let’s create a subscription plan.

1. Login to your stripe account.
2. Go to products

3. Then click on the Add a Product button

Fill out all the information. And make sure to choose Recurring payment.

Getting the subscription plan data

Now that we created the subscription successfully, we have to get the subscription plan data to use it on our app.

To update the data open up the stripe/SubsPlanData.ts file.

Now go to your stripe dashboard go to products and open up your product.

After that get the Name and Description from here.

And get the price_id from here:

Note: For the price make sure to multiply it by 100, it’s just a convention stripe use. For example, $5 becomes 500

Webhook integration for local development

We got the subscription setup. One last thing we have to do now is integrate the Stripe webhook.

Follow the below instructions to integrate the stripe webhook for local development.

1. Go to the Webhooks tab under the Developers page

2. Now click on the Add endpoint button.

3. Select Test in a local environment

4. Install Stripe CLI (opens in a new tab) and login to stripe

stripe login

5. Run this command to forward the event to the webhook. I’ve added this script to package.json file

npm run stripe:listen

6. Add the webhook secret to the env file.

Copy it from the terminal and add it to this variable.

STRIPE_WEBHOOK_SECRET=YOUR_WEBHOOK_SECRET

Now go ahead and test the subscription, it should work in your local environment.

Webhook integration for the live site

In the last part, we saw how to integrate Webhook for testing locally. Now we are going to see how to integrate Stripe Webhook for a live site.

Follow these instructions to enable the webhook for your live site:

1. Go to the Webhooks tab under the Developers tab.

2. Now add your site URL here:

Note: your live site URL is not just the root URL. It must follow this pattern: yoursite.com/api/webhooks/stripe

3. Select the Latest API version from this drop-down menu.

4. Now click on the Select Events button.

Once you click on the button, you’ll see something like this. Now check the Select all events box. Click the Add Events button.

5. Now click on the Add endpoint button.

We are almost done. One last thing we have to do is get the Webhook secret for the live site and add that to the .env file.

After you’ve added the endpoint you’ll see something like this. Click on the URL.

Click Reveal, you’ll see the secret key there. Copy the key and add that to your live site's .env file.

When all these are done, Then you can start the project on the local server

npm run dev

It’ll start the template on localhost:3000 (opens in a new tab).

The documentation includes all the guides you need for the integrations.

Deploying on PaaS

If you are using a GitHub repo then you can go with free-of-cost and easy-to-use options like Vercel (opens in a new tab), or Netlify (opens in a new tab) they offer decent-free tiers for Next.js hosting.

If you are using Prisma ORM (Comes with All Starter Templates)

Make sure to edit build command like this while you use Prisma as ORM while deploying to Vercel.