I have written articles on different platforms including LinkedIn, The Network Bits (Substack), and freeCodeCamp. So I wanted to bring all of these articles together in a single place where someone could go and see all my work. A blog sounded like a ...
May 31, 2025 - 03:30
0
I have written articles on different platforms including LinkedIn, The Network Bits (Substack), and freeCodeCamp. So I wanted to bring all of these articles together in a single place where someone could go and see all my work.
A blog sounded like a good solution for this, so I set out to build one. In this article, I will walk you through how I did it with Next.js.
The basic idea here was to build a website where I wouldn’t need to write code in the future. I just wanted to be able to add the URL of a new article to a JSON file, and the website would extract information like the title, date, cover image, and description and then update itself with it. No database.
To understand how I would go about it, I checked the metadata of the HTML text from each of the platforms I considered. I used my articles, of course, like the one in the project folder. I found out that most of them used Open Graph metadata. So, that was easy to scrape. But, I also found out that some information wasn’t in the meta tags – instead, it was in the JSON-LD. At the end of the day, I ended up using both in my functions.
Understanding this article requires some knowledge of programming and web development. You need to have basic knowledge of HTTP, HTML, CSS, JavaScript, and React to be able to follow along easily.
If you don't have those skills, you may still be able to understand the general structure and working principles.
How the Blog Site Works
The project consists of client components and server components. It is a website, so ideally, it's just a front-end. But it has to fetch data from URLs – and doing that from the client-side won’t work due to CORS blocking, as the requests will be emanating from a browser. So, it has to run on the server.
The fetchArticles() function runs on the server – then this happens:
The fetchArticles() function accesses the URLs, extracts and processes the HTML and JSON Linked Data objects from the response, and returns an array of Article objects to the Home page.
The HomePage component is a client side component that has another component in it, named HomeClient. This HomeClient is a client side component. It has to be because it has useState hooks.
But the HomePage component calls the fetchArticles() function and sets the articles constant (which is an array of Article objects, as defined by the interface in the ArticleCard.tsx file). The articles constant is then passed down to the HomeClient component as a prop.
Inside the HomeClient component, there are two components – the Hero component, and the MainBody component. The Hero component shows the welcome message, and also has the search bar. The MainBody component is where the tags and the article grid are. Logic for filtering articles are also in the MainBody component.
Inside the MainBody component, there is the ArticleCard component that takes the filtered array of Article objects from the MainBody as props, and renders an article card for each. These cards are rendered inside the grid in the MainBody component.
The interface, as shown above, specifies that the object will have eight properties, of which only the id and url are compulsory. Those compulsory properties are actually what’s needed in the JSON file from which the web server will read.
When the URL is visited by the server, the title, description, and other properties (except the tags) are obtained automatically and populated. Then the object is created.
The article cards consist of the article’s cover image, the name of the platform where it was published, the date published, the title, and a description. All of this is wrapped in an anchor linking to the URL. The tags are not visible on the cards, but are used in filtering operations.
How does the search feature work?
There's a reason why the Hero component and the MainBody component are in the same parent component. That wasn't my initial design, but after I saw that the search bar would look better in the Hero component, and that I needed to set the searchTerm state in the Hero component and use it in the MainBody component, that became the best option for me: to put both of them in the same parent, so I could pass down the useState hook as props into both of them.
The search feature works basically by filtering the articles array based on the tags selected, or the search term entered. Here is what the code looks like:
useEffect(() => {
const anyTagActive = isActive.some((val) => val);
const filtered = articles.filter((article) => {
console.log('Search term: ' + searchTerm || 'searchTerm');
const searchMatch =
article.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.tags?.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase())) ||
article.siteName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.publishedDate?.toLowerCase().includes(searchTerm.toLowerCase());
console.log('This is the searchMarch: ' + searchMatch || 'FALSE searchMatch');
console.log(article.title || 'article.title no wan show');
const tagMatch = article.tags?.some((tag) => {
const index = tags.indexOf(tag);
return index !== -1 && isActive[index];
}) || false;
if (anyTagActive) {
return tagMatch && searchMatch; // Only return articles if tag is active and search matches
}
return searchMatch; // If no tags active, return all that match the search term
});
setFilteredArticles(filtered);
}, [articles, searchTerm, isActive]);
Here, we use a useEffect() hook to monitor for changes in the articles, searchTerm, and isActive constants. isActive is a useState() hook that has an array of boolean values the length of the tags array.
Here, the filtered constant is equal to the filtered values of articles.
const filtered = articles.filter();
Inside the filter method is where the arrow function with the logic for filtering is written – (article) => {//logic}. We have two constants: tagMatch and searchMatch. The searchMatch constant is true when the title, description, tags, site name, or published date includes the search term. Else, it's false. The tagMatch constant is true when any tag from the article's array of tag is present in the tag list, and also has a corresponding isActive value of true.
If any tag at all is active, then the results for both tagMatch and searchMatch are returned, but if no tag at all is active, then only the searchMatch is returned as true.
The filtered article list is what is then passed into the ArticleCard component.
Project Structure
This is what the project file structure looks like:
At the root, we have the config files and node_modules which is not displayed here. The public folder holds all the images and icons. Then, in the src folder, we have app, component, and utils.
The components folder holds the files for the components – the nav bar, footer, hero, main body and article card. The utils folder has all the functions that run in the background and do not need to render anything. The fetchArticles function is there, along with other functions for extracting the date published, title, description, image URL, and others from HTTP responses gotten from the article URLs. The app folder has the favicon, the global CSS stylesheet, the page and layout files, articles.json which is the JSON file where I add new article URLs for rendering, a test HTML file (wsl.html), and the about/ and api/ directories.
Inside the about folder, we have the about page, and inside the API folder, we have tthe folder, metadata-local-test which is no longer relevant to the project. I used it initially to create an internal API to fetch from the URLs. But I later restructured the codebase.
Steps to Build the Blog
1. Install Next.js
To install Next.js, navigate to the folder where you want the project to reside and open that location in your terminal. Then type the following:
npx create-next-app@latest
You're going to be met with the following prompts:
2. Navigate to your newly created project folder and install dependencies
In the newly created project folder, run the project in development mode to preview your newly created Next project. You will be shown a message directing you to localhost on port 3000. Now, it's time for us to start creating what we want.
Now, one more thing you'll need to do. In the project, I used lucide-react to get one of the icons, and cheerio to extract data from the HTML. So, you’ll need to install those dependencies.
To install lucide-react, use this command in the project folder:
npm install lucide-react
Then install cheerio:
npm install cheerio
3. Change the title and description in the page metadata
The title is what shows up at the top of your browser tab when you open up the website. Right now, it should be showing 'Create Next App.' We don't want that.
Since this is not just HTML, there is no index.html to change the title in the header element. Rather, Next.js provides us a Metadata object we can use to change things like that. And it'll be in the layout.tsx file in the app or src folder. Head over there and change it to whatever you want the title to be. I’m using “Chidiadi Portfolio Blog”.
4. Create the necessary components
Navigate to the side panel, and under the src folder, create a components folder. This is where the components will live. Here, create the article card, footer, main body and nav bar.
"text-4xl text-white font-bold text-center z-10">My Portfolio Blog
"mt-4 mx-4 text-xlarge text-white md:text-xl text-justify md:text-center z-10" style={{ fontFamily: "Cormorant Garamond" }}>
My name is Chidiadi Anyanwu. I am a technical writer with a strong background in networking.
I write about Networking, Cloud, DevOps, and even sometimes web development like this one. I built this
website with Next.js, and there's also an article about that.
This website holds my technical articles in one place. It is a repository of my written works.
);
}
In this file, we created the HeroProps interface to accept the search props. Then we deconstructed both searchTerm and setSearchTerm from it as props to the Hero component. We’ll make it a client component 'use client' because of the buttonColor useState() hook that changes when the search bar is clicked and sets the search button background color.
The MainBody component looks like this:
"use client";
import { useEffect, useState } from'react';
import ArticleCard, { Article } from'./ArticleCard';
interface MainBodyProps {
searchTerm: string;
articles: Article[];
}
exportdefaultfunctionMainBody({ searchTerm, articles }: MainBodyProps) {
// Get articles from JSON file and create array of article objectsconst [filteredArticles, setFilteredArticles] = useState([]);
const tags = ["Networking", "Cloud", "DevOps", "Web Dev", "Cybersecurity"];
const [isActive, setIsActive] = useState(tags.map(() =>false));
// Filter articles based on search term and active tags
useEffect(() => {
const anyTagActive = isActive.some((val) => val);
const filtered = articles.filter((article) => {
console.log('Search term: ' + searchTerm || 'searchTerm');
const searchMatch =
article.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.tags?.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase())) ||
article.siteName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.publishedDate?.toLowerCase().includes(searchTerm.toLowerCase());
console.log('This is the searchMarch: ' + searchMatch || 'FALSE searchMatch');
console.log(article.title || 'article.title no wan show');
const tagMatch = article.tags?.some((tag) => {
const index = tags.indexOf(tag);
return index !== -1 && isActive[index];
}) || false;
if (anyTagActive) {
return tagMatch && searchMatch; // Only return articles if tag is active and search matches
}
return searchMatch; // If no tags active, return all that match the search term
});
setFilteredArticles(filtered);
}, [articles, searchTerm, isActive]);
console.log(filteredArticles);
return (
Here, we have props from the parent component too, but we only need the articles fetched and the search term. We don't need to set the fetch term from this component.
To render the tags, I first created the array of tags and an array of boolean values to record the states of the tags (whether they're active or inactive).
Then, inside the return statement, I mapped through the tag array to render them one by one. The onClick event handler also works here to make sure that the isActive state for that particular tag is toggled when it is clicked.
So how does this work? It creates a new array called newIsActive that is a copy of the isActive array. It then gets the particular tag by index number and inverts it. Then it sets the isActive array to this new array.
Here, we defined and exported the Article interface so that we can create Article objects in the MainBody. Then, we created an interface to pass down the props of an array of Article objects.
Next, there's this part to ensure it renders something even if for some reason no Article object was passed:
I could have made this part much better, but I was feeling a little lazy. I also used the Image from Next, instead of the regular img. This requires that you edit the next.config.ts file. I had to go add all the paths that the images could possibly be loaded from:
It takes a remotePatterns array that consists of remote pattern objects, which have a protocol, hostname, and pathname property. Make sure the protocol and hostname properties are not empty like in the second object in the code sample above. That would cause errors. It’s either the objects are populated properly or they’re deleted.
The Footer looks like this:
exportdefaultfunctionFooter() {
return (
);
}
This new Date().getFullYear() helps me get the current year all the time.
5. Place the components properly
The nav bar and footer components are things that will not change no matter the page you visit. So they should be placed in a more permanent and untouched location. We can put both of them in the root layout.tsx file like this:
{children} is where the contents from page.tsx will enter. So, we sandwiched all the other content in the Nav bar and footer. Apart from adding tags for fonts (because this is where the root HTML is), we really don't have business with this file again.
Now, in the same app/ folder where this layout file is, create the file. This is how it looks:
The server is set to fetch the articles at build time, and fetch again (revalidate) every hour (3600s). So, it doesn't fetch the articles from the URLs upon user request of the page.
Initially, it worked by fetching any time the component was mounted, but I noticed that this caused the page to load very slowly. The articles didn't pop-up on time, because there's a lot of fetching to be done.
In that same app/ directory, create an about/ folder, and create the page.tsx for that route:
"text-justify my-3">
My name is Chidiadi Anyanwu. I love breaking down complex concepts.
I write about Networking, Cloud, DevOps, and even sometimes web development.
You can connect with me by following anyof the links below.
Under the same app/ directory, create the utils/ folder. app/utils/. Then start with the fetchArticles() function. The fetchArticles() function is what accesses the API route in the project to obtain the array of Article objects from an array of URLs. The fetchArticles() function returns an array of those objects which are then stored in the articles variable. It looks like this:
import { getPublishedDate } from'./getPublishedDate';
import { getTitle } from'./getTitle';
import { getImageURL } from'./getImageURL';
import { getDescription } from'./getDescription';
import { getPlatform } from'./getPlatform';
import articleFile from'../app/articles.json';
import { Article } from'../components/ArticleCard';
import * as cheerio from'cheerio';
exportasyncfunctionfetchArticles(): Promise<Article[]> {
console.log('Fetching articles...');
const results = awaitPromise.all(
articleFile.articles.map(async (item) => {
//Validate URL firstif (!item.url || typeof item.url !== 'string' || item.url.trim() === '') {
console.warn(`Invalid URL: ${item.url}`);
returnnull; // Skip this item
}
console.log('The URL: ' + item.url);
let data;
try {
// Fetch metadata and HTML from the URLconst response = await fetch(item.url, {
headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36',
'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
'Accept-Language': 'en-US,en;q=0.5',
'Referer': 'https://www.google.com/',
},
});
console.log('Fetched: '+ item.url);
if (!response.ok) {
console.error(`HTTP error! Status: ${response.status} for URL: ${item.url}`);
thrownewError(`HTTP error! Status: ${response.status}`);
}
const html = await response.text();
const $ = cheerio.load(html);
const jsonScript = $('script[type="application/ld+json"]').html();
console.log('Gotten HTML response');
if (!jsonScript) {
thrownewError('No JSON-LD script found on page');
}
const metadata = JSON.parse(jsonScript);
console.log('Gotten metadata');
// Combine metadata and HTML into a single object
data = { metadata, html };
} catch (error) {
console.error(`Failed to fetch metadata for URL: ${item.url}`, error);
returnnull;
console.log('The default empty object has been returned here');
}
// Use the combined data (metadata and HTML) to construct the article objectif(getTitle(data) && getDescription(data) &&
getPublishedDate(data) && getImageURL(data) &&
getPlatform(data) || (item.title && item.description &&
item.image)) {
return {
...item,
id: item.id ?? 0,
tags: item.tags ?? [],
title: getTitle(data) || item.title || 'No title',
description: item.description || getDescription(data) || 'No description',
publishedDate: getPublishedDate(data) ?? 'No date',
imgUrl: getImageURL(data) || item.image || '/img-2.jpg',
siteName: getPlatform(data) || data.metadata?.publisher?.name || 'Unknown site',
url: item.url || '',
} as Article;
console.log('Proper item returned');
} else { returnnull; }
})
);
// Filter out null values and sort the articles by published date in descending orderconst filteredResults = results.filter((article): article is Article => article !== null);
const sortedResults = filteredResults.sort((a, b) => {
const dateA = newDate(a.publishedDate || '').getTime();
const dateB = newDate(b.publishedDate || '').getTime();
return dateB - dateA;
});
console.log(sortedResults);
return sortedResults;
}
It maps through the articles in the articleFile, which is the JSON file with an array of objects with article URLs. For each of them, it sends a request to the URL, and from the data gotten, returns an Article object. Then, the array of objects created, results, is first filtered to remove null objects, and sorted in descending order by their date properties. So, the latest article shows up first.
It’s then assigned in the HomeClient component:
const articles = await fetchArticles();
In the fetchArticles() code above, you can see that some other functions were used to extract the properties from the URLs, and assign them. Also, during deployment, I found that Substack couldn’t be accessed by the server, so I’m going to add code to allow creation of Article objects from an RSS feed. That will be in the project repository.
Now, let's talk about the other functions.
ThegetTitle()function:
import * as cheerio from'cheerio';
exportfunctiongetTitle(data:any): string{
if(!data) return'Title Loading . . .';
if (data?.html) {
const $ = cheerio.load(data?.html);
const ogTitle = $('meta[property="og:title"]').attr('content') || $('title').text();
return ogTitle;
}
return'The Title of The Article';
}
![[The AI Show Episode 150]: AI Answers: AI Roadmaps, Which Tools to Use, Making the Case for AI, Training, and Building GPTs](https://www.marketingaiinstitute.com/hubfs/ep%20150%20cover.png)
![[The AI Show Episode 149]: Google I/O, Claude 4, White Collar Jobs Automated in 5 Years, Jony Ive Joins OpenAI, and AI’s Impact on the Environment](https://www.marketingaiinstitute.com/hubfs/ep%20149%20cover.png)
![[FREE EBOOKS] Solutions Architect’s Handbook, The Embedded Linux Security Handbook & Four More Best Selling Titles](https://www.javacodegeeks.com/wp-content/uploads/2012/12/jcg-logo.jpg){kind=logo}
![How to Survive in Tech When Everything's Changing w/ 21-year Veteran Dev Joe Attardi [Podcast #174]](https://cdn.hashnode.com/res/hashnode/image/upload/v1748483423794/0848ad8d-1381-474f-94ea-a196ad4723a4.png?#)
_ArtemisDiana_Alamy.jpg?width=1280&auto=webp&quality=80&disable=upscale#)
![Sonos Father's Day Sale: Save Up to 26% on Arc Ultra, Ace, Move 2, and More [Deal]](https://www.iclarified.com/images/news/97469/97469/97469-640.jpg)
![Apple 15-inch M4 MacBook Air On Sale for $1023.86 [Lowest Price Ever]](https://www.iclarified.com/images/news/97468/97468/97468-640.jpg)
