Running the Next JS blog

On this page

We'll be creating a minimalist blog using Next.js 14 and Wisp CMS in this video tutorial.

If you prefer read, you can find accompanying notes to the video tutorial below.

Prerequisites

  • Node.js installed on your computer
  • Git installed on your computer

Step 1: Accessing the Starter Kit

  1. Go to wisp.blog
  2. Click on "Starter Kit"

Step 2: Cloning the Repository

  1. Open your terminal
  2. Run the following command:
git clone https://github.com/Wisp-CMS/nextjs-blog-cms-wisp.git demo-blog
cd demo-blog

Step 3: Opening the Project

If using VS Code, run:

code .

For other IDEs, open the project folder in your preferred way

Step 4: Installing Dependencies

In your terminal, ensure you're in the project directory

npm i

Wait for the installation to complete

Step 5: Setting Up Wisp Account

  1. Go back to wisp.blog
  2. Click "Get Started"
  3. Choose to sign up with Google, GitHub, or email/password
  4. If using email, check your inbox for a magic link
  5. Click the link to log in

Step 6: Obtaining Your Blog ID

  1. Once logged in, go to the "Setup" section in your Wisp dashboard
  2. Locate your Blog ID

Step 7: Configuring Environment Variables

  1. In your project folder, create a new file named .env
  2. Add the following line to the .env file:
NEXT_PUBLIC_WISP_BLOG_ID=your_blog_id_here

Step 8: Running the Blog Locally

In your terminal, ensure you're in the project root directory Run the following command:

npm run dev

Wait for the compilation to complete Open your browser and navigate to http://localhost:3000

Step 9: Viewing Your Blog

You should now see your blog running locally

Explore the different pages:

  • Home page with list of posts
  • Individual blog post pages (which is empty until posts are added)
  • About page

Step 10: Testing Light/Dark Mode

Look for the light/dark mode toggle in the navigation Click to switch between modes Observe how the blog's appearance changes

Step 11: Adding Your First Blog Post

  1. Go back to your Wisp dashboard (wisp.blog)
  2. Click on "New Post"
  3. Write your blog post content
  4. Publish the post
  5. Refresh your local blog to see the new post appear

Step 12: Examining AI-Suggested Posts

  1. Open a blog post
  2. Scroll to the bottom to find related posts
  3. Note how these are AI-suggested based on content

Conclusion

You now have a functioning Next.js 14 blog using Wisp CMS Experiment with adding more posts and exploring the basic features

Coming Up Next

In the next part of this series, we'll dive deeper into:

  • Understanding the folder structure
  • Customizing your blog's appearance
  • Exploring advanced features and configurations