How to install the NextBlog blog template

In this tutorial, you learn how to install the BlogFast Template. This template is for existing NextJs apps that want to launch a blog in less than two minutes. If you have an existing NextJs app router project, you can install the template in three easy steps.

You can also find this video of this installation on Youtube here.

Step One

Open up your project folder in the terminal and install the following packages using the following command.

sudo npm i @tailwindcss/typography github-slugger gray-matter next-mdx-remote rehype-slug remark-gfm

Step Two

Because this template is made for apps that already exist, the easiest way to install BlogFast in your existing project is to drop the folders from the official repo into your existing project.

First, open up your NextJS app router project in your finder or IDE/code editor.
Copy/download the BlogFast repo that you have access to once you purchase the BlogFast template.
Open the newly downloaded files in your finder.
Drag all of the files and folders into the proper location in your NextJS app router repo.

/lib & /blogdata folders as well as the robot.ts & Sitemap.ts files will be dragged into your main folder. [your-project/lib] for example.
The /blogs folder will be moved into the /app folder. /blogs serves the blog itself and the posts themselves as [id].
The /mdx folder should be put in your /components folder.

Step Three

Update the tailwind.config.js to include the following package.

plugins: [
    require("@tailwindcss/typography")
]

If you are getting more errors, you could be facing an issue with your next.config.js file. If you are, add this line to your next.config.js as seen here.

/** @type {import('next').NextConfig} */
const nextConfig = {
    transpilePackages: ['next-mdx-remote'],
    images: {
        domains: ['vgs.b2e.myftpupload.com', 'doswjlwktzusonctczhc.supabase.co'],
    },
}

module.exports = nextConfig

Finish

Run your project again, and visit http://localhost:3000/blogs to see your new blog!