Fetching Blog Posts in Next.js Using the google blogger.to API

- November 09, 2024

Introduction : The blogging applications with the JavaScript framework, and their integration into the current context of web development, has grown by leaps and bounds. Integration of Google Blogger with Next.js to develop applications can further ease the handling processes of content management since integration of Google Blogger entirely eliminates the generation of any kind of back end logics. This book has explained associating Google Blogger to your Next.js application and lets you know how blog posts can be fetched in dynamically into your applications. Setup the Blogger API

Google's Blogger has an API that developers can use to fetch information about their posts, comments, among other details. The exploration to start linking Blogger with your Next.js project will require configurations of the Blogger API and setting up access credentials.

API Keys: Go to Google Cloud Console. From here, you can either create a new project or use one that is currently running. Then, enable the Blogger API for that project and then create an API key to authenticate you to access the Blogger's data. Then, find your blog ID:

To connect your blog, you'll need its ID that can be requested from the Blogger API; it would list all the blogs associated with your account or otherwise you can find your blog's ID directly from your settings in Blogger .

Fetching blog posts in Next.js

Now that you have set up your API, you can fetch and render your blog posts using Next.js. You can use getStaticProps to preload data during the build for your site to be able to be fast and yet fully scored by search engines.

Install Axios: The whole API calling will prove to be much easier to do if we also have Axios installed in the Next.js application.


     npm install axios

Fetch data using getStaticProps. getStaticProps is used in fetching the data while fetching blog posts in this case, from the Blogger API. This function will fetch the posts and pass them as props to the corresponding components in your application.


    import axios from 'axios';

    export async function getStaticProps() {

        const BLOGGER_API_KEY = process.env.BLOGGER_API_KEY;

        const BLOGGER_BLOG_ID = process.env.BLOGGER_BLOG_ID;

        const response = await axios.get(
            https://www.googleapis.com/blogger/v3/blogs/${BLOGGER_BLOG_ID}/posts?key=${BLOGGER_API_KEY}
        );
    
        return {
            props: {
                posts: response.data.items || [],
            },
            revalidate: 60, // Re-generate the page every 60 seconds
        };
    }

Displaying Blog Posts in Next.js

With the blog data now available, we can render it on the page. Here’s how to structure your component to display titles, content snippets, and links to full posts.



export default function Blog({ posts }) {

    return (

        <div>

        <h1>My Blog Posts</h1>

            {posts.length > 0 ? (

                posts.map((post) => (

                    <div key={post.id}>

                        <h2>{post.title}</h2>

                        <p dangerouslySetInnerHTML={{ __html: post.content }} />

                        <hr />

                    </div>

                ))
            ) : (

                <p>No posts available.</p>
            )}
        </div>
    );
}

Benefits of Using Blogger with Next.js

Connecting Blogger with Next.js has several benefits:

Ease of Use: You don’t need to build a CMS from scratch. Blogger handles content management, while Next.js handles display.

SEO Advantages: With getStaticProps, you can pre-render pages, improving both load times and SEO.

Dynamic Content: You can easily update your blog on Blogger and have it reflected on your site without redeploying.

Conclusion : Integrating Blogger with Next.js brings together the simplicity of Google’s blogging platform with the power and flexibility of a React-based framework. By following these steps, you can seamlessly fetch and display blog posts, giving you an easy way to manage content without the need for a custom backend.

Useful Links: