Approach to Create a Blog Webpage with NextJS
- Posts Handling (posts.ts): Fetches posts data from markdown files. Parses metadata using gray-matter. Converts markdown content to HTML using remark.
- Date Formatting (getFormattedDate.ts): Formats date strings using Intl.DateTimeFormat.
- List Item Component (ListItem.tsx): Displays individual post titles and dates. Links to respective post pages.
- Profile Picture Component (MyProfilePic.tsx): Displays a profile picture using Next.js Image component.
- Navbar Component (Navbar.tsx): Navigation bar with site title and links. Utilizes React icons for social media links.
- Layout Component (layout.tsx): Sets up the overall layout including navbar and profile picture. Allows for global styling and structure.
- Post Page (page.tsx): Fetches and displays individual post content. Provides links back to the homepage.
- Homepage (index.tsx): Displays a greeting message and lists posts using the Posts component.
Creating a Blog Webpage using Next.js
In this article, we will delve into the process of setting up a blog, with NextJS, a known React framework. The blog will come equipped with features that enable users to compose, view, edit, and remove blog entries. We’ll make use of NextJS capabilities to construct a speedy and search-engine-optimized site.
Output Preview: Let us have a look at how the final output will look like.
Final Output