Create Next App

Creating a blog with Next.js and a headless CMS like Hyvor Blogs can be a great way to build a fast, dynamic, and scalable website. In this guide, we’ll walk you through the steps to set up a Next.js blog that fetches content from Hyvor Blogs.

What You Need

Next.js: A React framework for building server-rendered applications.
Hyvor Blogs: A headless CMS for managing your blog content.
Node.js: Ensure you have Node.js installed on your machine.

Step 1: Set Up Your Hyvor Blogs Account

Go to Hyvor Blogs and sign up for an account.
Create a new blog from your dashboard.
Note down your Blog ID and Secret Key, as you will need these to fetch content via the API.

Step 2: Create a Next.js Application

Open your terminal and run the following command to create a new Next.js app:

1npx create-next-app my-nextjs-blog
2cd my-nextjs-blog
3

Step 3: Install Axios

We will use Axios to make API requests to Hyvor Blogs. Install Axios by running:

1npm install axios
2

Step 4: Fetch Content from Hyvor Blogs

Create a new file called api.js in the pages directory to handle the API requests:

 1// pages/api.js
 2import axios from 'axios';
 3
 4const API_URL = 'https://hyvor.com/api/v1/blog';
 5
 6export const fetchPosts = async () => {
 7  const response = await axios.get(`${API_URL}/posts`, {
 8    headers: {
 9      'X-Blog-ID': 'YOUR_BLOG_ID',
10      'X-Secret-Key': 'YOUR_SECRET_KEY',
11    },
12  });
13  return response.data.posts;
14};
15

Replace YOUR_BLOG_ID and YOUR_SECRET_KEY with the values you noted down earlier.

Step 5: Display Posts on Your Blog

Modify your pages/index.js file to fetch and display the blog posts:

 1// pages/index.js
 2import Head from 'next/head';
 3import { fetchPosts } from './api';
 4
 5export default function Home({ posts }) {
 6  return (
 7    <div>
 8      <Head>
 9        <title>My Next.js Blog</title>
10      </Head>
11      <h1>Blog Posts</h1>
12      <ul>
13        {posts.map(post => (
14          <li key={post.id}>
15            <h2>{post.title}</h2>
16            <p>{post.excerpt}</p>
17            <a href={`/posts/${post.slug}`}>Read more</a>
18          </li>
19        ))}
20      </ul>
21    </div>
22  );
23}
24
25export async function getStaticProps() {
26  const posts = await fetchPosts();
27  return { props: { posts } };
28}
29

Step 6: Create Dynamic Routes for Each Post

Create a new folder called posts inside the pages directory and a file called [slug].js:

 1// pages/posts/[slug].js
 2import { fetchPosts } from '../api';
 3import axios from 'axios';
 4import Head from 'next/head';
 5
 6const Post = ({ post }) => {
 7  return (
 8    <div>
 9      <Head>
10        <title>{post.title}</title>
11      </Head>
12      <h1>{post.title}</h1>
13      <div dangerouslySetInnerHTML={{ __html: post.content }} />
14    </div>
15  );
16};
17
18export async function getStaticPaths() {
19  const posts = await fetchPosts();
20  const paths = posts.map(post => ({ params: { slug: post.slug } }));
21
22  return { paths, fallback: false };
23}
24
25export async function getStaticProps({ params }) {
26  const response = await axios.get(`https://hyvor.com/api/v1/blog/posts/${params.slug}`, {
27    headers: {
28      'X-Blog-ID': 'YOUR_BLOG_ID',
29      'X-Secret-Key': 'YOUR_SECRET_KEY',
30    },
31  });
32  const post = response.data.post;
33
34  return { props: { post } };
35}
36
37export default Post;
38

Step 7: Styling Your Blog

You can add CSS to style your blog as per your preference. Create a styles.css file and import it into your _app.js:

1// pages/_app.js
2import '../styles.css';
3
4export default function MyApp({ Component, pageProps }) {
5  return <Component {...pageProps} />;
6}
7

Conclusion

You now have a basic Next.js blog integrated with Hyvor Blogs as a headless CMS. You can extend this setup by adding more features like categories, tags, and comments. Happy blogging!

For more information, check out the Next.js Documentation and Hyvor Blogs API Documentation.

headless-cms

NextJS Blog with Headless CMS by Hyvor Blogs