Integrating Ngrok, Next.js, and Hashnode Webhooks

In this blog post, I'll summarize the key concepts and techniques I learned while working on my "Today I Learned" (TIL) episode. This includes dynamic content fetching with Next.js, handling webhooks, and utilizing Ngrok for local development.

Dynamic Blog Fetching with Next.js

Previously, I fetched blog posts manually, but I wanted to automate this process. To achieve dynamic content fetching, I used Next.js server-side fetching. Here’s a step-by-step breakdown:

Fetching Blog Data:

• I leveraged the Hashnode API with GraphQL to fetch blog details such as title, slug, and tags.

• The data is then displayed on the TIL and Posts pages. Currently, I’m working on reordering the content to improve the user experience.

Using Webhooks for Real-Time Updates

Webhooks are an excellent way to keep your data updated in real time. Here’s how I implemented them:

1. Webhook Implementation:

   • When an update occurs (like a new blog post), Hashnode triggers a webhook that hits an endpoint in my Next.js application.

   • This endpoint updates a data.json file, which is used to fetch and display posts on the TIL and Posts pages based on their tags.

2. Testing with Ngrok:

   • To test the webhook integration, I used Ngrok. Ngrok allows you to expose your local server to the internet, making it easy to test webhooks.

   • After setting up Ngrok, I used Postman to send requests to my local server and verify that the webhook updates were processed correctly.

Fetching Data in Next.js

In Next.js, there are different methods to fetch data based on your needs:

1. Using async/await:

   • This method is useful for data fetching in client-side code or when you need to handle asynchronous operations directly in your component.

2. Using getServerSideProps():

   • This method fetches data server-side on each request, making it ideal for dynamic content that changes frequently or depends on request data.

Next.js API Routes

In Next.js 13+, API routes are defined within the app/api/{folderName}/route.ts file. Unlike previous versions, you must explicitly define the request type (GET, POST, DELETE) within the export default function in the route.ts file.

Future Plans

I’m planning to integrate a database, likely PostgreSQL with Supabase, to manage and store blog data. I will also use webhooks to keep the database updated with new posts, modifications, or deletions.