How to Integrate Dev.to API in Next.js to Display Your Blog

If you’re a developer who uses Dev.to to write and share blog posts, it can be useful to display your blog feed directly on your website. In this tutorial, I’ll walk you through how to integrate the Dev.to API with a Next.js app to showcase your latest posts.

Step 1: Setting up a Next.js App

If you don’t have a Next.js app yet, you can create one quickly. Run the following command in your terminal to create a new app:

npx create-next-app@latest my-dev-blog
cd my-dev-blog
npm run dev

This will create a new Next.js project and start the development server on localhost:3000.

Step 2: Fetching Your Dev.to Posts

Dev.to offers a simple API that allows you to fetch your articles in JSON format. You can use this API to retrieve your latest blog posts. The endpoint looks like this:

https://dev.to/api/articles?username=yourusername

Replace yourusername with your actual Dev.to username.

Step 3: Fetching Data in Next.js

In Next.js, you can use getStaticProps or getServerSideProps to fetch your blog posts. For this example, we’ll use getStaticProps to fetch the data at build time.

Create a new component or page where you want to display your blog posts. For example, in the pages directory, create a new file called blog.js:

import React from 'react';

export default function Blog({ posts }) {
  return (
    <div>
      <h1>My Dev.to Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={post.url} target="_blank" rel="noopener noreferrer">
              {post.title}
            </a>
            <p>{post.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://dev.to/api/articles?username=yourusername');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    revalidate: 3600, // Re-fetch the data every hour
  };
}

Step 4: Customizing the Display

You can customize the way your blog posts are displayed by modifying the JSX in the Blog component. Here, each post is displayed as a link with a title and a description, but you can add more information like the date, tags, or cover image.

For example, to show the cover image of the article, you can modify the JSX like this:

<ul>
  {posts.map((post) => (
    <li key={post.id}>
      <a href={post.url} target="_blank" rel="noopener noreferrer">
        <img src={post.cover_image} alt={post.title} style={{ width: '100%', height: 'auto' }} />
        <h2>{post.title}</h2>
      </a>
      <p>{post.description}</p>
    </li>
  ))}
</ul>

Step 5: Styling Your Blog Section

Next.js supports CSS modules or global CSS for styling. To keep things simple, you can add some basic styles to make the blog list look nicer. In your styles/globals.css file, you can add:

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
}

h2 {
  font-size: 1.5rem;
  color: #0070f3;
}

p {
  color: #333;
}

Step 6: Deploying Your Next.js App

Once your app is ready, you can deploy it to platforms like Vercel or Netlify. These platforms work seamlessly with Next.js.

Conclusion

Integrating your Dev.to blog into your Next.js website is a great way to keep your content centralized and offer your visitors more value. With just a few lines of code, you can fetch and display your latest posts dynamically!

Feel free to tweak the styles and add more features, such as filtering posts by tags or showing a specific number of articles.

That’s a wrap! Now, your Next.js app is ready to show your Dev.to blog feed dynamically. Let me know if you try this out or have any questions!

DEV Community

How to Integrate Dev.to API in Next.js to Display Your Blog