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
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.
Here are the steps you need to follow to install the dependencies.
1.Download and extract the template from Next.js Templates.
2.cd into the template directory then run this command to install all the dependencies
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:
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:
Now add it to the .env file.
Now that we got the keys, let’s create a subscription plan.
Fill out all the information. And make sure to choose Recurring payment.
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
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.
npm run stripe:listen
Copy it from the terminal and add it to this variable.
Now go ahead and test the subscription, it should work in your local environment.
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:
Note: your live site URL is not just the root URL. It must follow this pattern: yoursite.com/api/webhooks/stripe
Once you click on the button, you’ll see something like this. Now check the Select all events box. Click the Add Events 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.
The documentation includes all the guides you need for the integrations.
Make sure to edit build command like this while you use Prisma as ORM while deploying to Vercel.