Build a Next.js Interactive Web-Based Simple Blog

Written by

javascriptdebugged

in

In the dynamic world of web development, creating a blog is often a developer’s rite of passage. It’s a fantastic opportunity to showcase your skills, share your thoughts, and experiment with different technologies. This tutorial will guide you through building a simple, yet functional, blog using Next.js, a powerful React framework known for its server-side rendering and static site generation capabilities. We’ll focus on the core components: fetching blog posts, displaying them, and enabling basic navigation. By the end of this tutorial, you’ll have a solid foundation for building more complex blog features and understanding the power of Next.js.

Why Build a Blog with Next.js?

Next.js offers several advantages for building a blog:

  • Performance: Next.js can generate static sites or render content on the server, leading to faster loading times and improved SEO.
  • SEO Optimization: Server-side rendering helps search engines crawl and index your content effectively.
  • Developer Experience: Next.js simplifies many aspects of React development, providing features like routing, image optimization, and API routes out of the box.
  • Scalability: Next.js applications can easily scale to handle increasing traffic.

This tutorial is designed for beginners to intermediate developers. We will break down each step, explaining the concepts and providing code examples. Even if you’re new to Next.js, you’ll be able to follow along and learn.

Setting Up Your Next.js Project

Before diving into the code, let’s set up our Next.js project. Open your terminal and run the following command:

npx create-next-app my-simple-blog
cd my-simple-blog

This command creates a new Next.js project named “my-simple-blog”. The `cd` command navigates into the project directory. Now, let’s install some dependencies we will use for styling and markdown parsing.

npm install --save styled-components remark remark-html

We’ll use `styled-components` for styling, `remark` for parsing markdown, and `remark-html` to convert markdown to HTML.

Project Structure and Basic Components

Next.js projects typically have a specific structure. Here’s a basic overview:

  • pages/: This directory contains your pages. Each file in this directory represents a route in your application. For example, `pages/index.js` corresponds to the `/` route, and `pages/about.js` corresponds to the `/about` route.
  • components/: This directory is where you’ll store reusable React components.
  • styles/: This directory is for your CSS or styling files.
  • public/: This directory contains static assets like images, fonts, and other files that are served directly.

Let’s create a basic folder structure. Inside the `components` directory, create a `Layout.js` file. This component will provide a consistent layout for all your pages. Inside the `styles` directory, create a `globalStyles.js` file. This will hold global styles for your application.

components/Layout.js:

import styled from 'styled-components';

const Container = styled.div`
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
`;

const Header = styled.header`
  margin-bottom: 20px;
  text-align: center;
`;

const Footer = styled.footer`
  margin-top: 20px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #ccc;
`;

const Layout = ({ children }) => {
  return (
    
      <Header>
        <h1>My Simple Blog</h1>
      </Header>
      <main>{children}</main>
      <Footer>
        <p>© {new Date().getFullYear()} My Blog</p>
      </Footer>
    
  );
};

export default Layout;

styles/globalStyles.js:

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
  }

  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem;
  }

  a {
    color: #0070f3;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
`;

export default GlobalStyles;

Now, let’s import and use these components in our `pages/index.js` file:

import Layout from '../components/Layout';
import GlobalStyles from '../styles/globalStyles';

const Home = () => {
  return (
    
      
      
        <h2>Welcome to My Blog</h2>
        <p>This is a simple blog built with Next.js.</p>
      
    </>
  );
};

export default Home;
</code></pre>

<p>In this example, we've set up a basic layout with a header, main content area, and footer. We've also included global styles. This gives your blog a consistent look and feel across all pages.</p>

<h2>Creating Blog Posts (Data Fetching and Markdown)</h2>

<p>Now, let's fetch and display some blog posts. For simplicity, we'll store our blog posts as Markdown files in a `posts` directory. Each file will represent a single post.</p>

<p>Create a directory named `posts` in the root of your project. Inside the `posts` directory, create a few `.md` files (e.g., `first-post.md`, `second-post.md`).  Here's an example of what a `.md` file might look like:</p>

<pre><code class="language-markdown">---
title: "My First Blog Post"
date: "2024-01-26"
---

## Introduction

This is the content of my first blog post.

## Section 1

Some more text here.

The frontmatter (content between the `—` lines) contains metadata like the title and date. The rest is the content of the post, written in Markdown.

Now, let’s create a function to read these files and parse the Markdown. Create a file named `lib/posts.js`:

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { remark } from 'remark';
import html from 'remark-html';

const postsDirectory = path.join(process.cwd(), 'posts');

export async function getSortedPostsData() {
  // Get file names under /posts
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = await Promise.all(
    fileNames.map(async (fileName) => {
      // Remove ".md" from file name to get id
      const id = fileName.replace(/.md$/, '');

      // Read markdown file as string
      const fullPath = path.join(postsDirectory, fileName);
      const fileContents = fs.readFileSync(fullPath, 'utf8');

      // Use gray-matter to parse the post metadata section
      const matterResult = matter(fileContents);

      // Use remark to convert markdown into HTML
      const processedContent = await remark()
        .use(html)
        .process(matterResult.content);
      const content = processedContent.toString();

      // Combine the data with the id
      return {
        id,
        content,
        ...matterResult.data,
      };
    })
  );
  // Sort posts by date
  return allPostsData.sort(({ date: a }, { date: b }) => {
    if (a <b> b) {
      return -1;
    }
    return 0;
  });
}

export async function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);
  return fileNames.map((fileName) => {
    return {
      params: {
        id: fileName.replace(/.md$/, ''),
      },
    };
  });
}

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  const matterResult = matter(fileContents);

  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const content = processedContent.toString();

  return {
    id,
    content,
    ...matterResult.data,
  };
}

Let’s break down this code:

  • `fs` and `path` modules: These Node.js modules are used for file system operations and path manipulation.
  • `gray-matter`: This library parses the frontmatter (metadata) from your Markdown files.
  • `remark` and `remark-html`: These libraries convert Markdown to HTML.
  • `getSortedPostsData()`: This function reads all the `.md` files, parses their frontmatter, converts the Markdown content to HTML, and returns an array of post objects, sorted by date.
  • `getAllPostIds()`: This function gets all the post IDs, which will be used to generate the dynamic routes for individual blog posts.
  • `getPostData(id)`: This function reads a specific post by its ID, parses its frontmatter, converts the Markdown content to HTML, and returns the post data.

Displaying Blog Posts on the Homepage

Now that we have the data, let’s display the blog posts on the homepage (`pages/index.js`).

import Layout from '../components/Layout';
import GlobalStyles from '../styles/globalStyles';
import { getSortedPostsData } from '../lib/posts';
import Link from 'next/link';
import styled from 'styled-components';

const PostList = styled.ul`
  list-style: none;
  padding: 0;
`;

const PostItem = styled.li`
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
`;

const PostTitle = styled.h3`
  margin-bottom: 5px;
`;

const PostDate = styled.p`
  font-size: 0.8rem;
  color: #777;
`;

export async function getStaticProps() {
  const allPostsData = await getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

const Home = ({ allPostsData }) => {
  return (
    
      
      
        <h2>Blog Posts</h2>
        
          {allPostsData.map(({ id, date, title }) => (
            
              
                <a>
                  {title}
                </a>
              
              {date}
            
          ))}
        
      
    </>
  );
};

export default Home;
</code></pre>

<p>Here's what's happening:</p>

<ul>
 <li><b>`getStaticProps()`:</b> This is a Next.js function that fetches data at build time.  We use it to get the sorted posts data from `getSortedPostsData()` in `lib/posts.js`. The data is passed as props to the `Home` component.</li>
 <li><b>Mapping the Posts:</b> We map over the `allPostsData` array and render a `PostItem` for each post. Each `PostItem` contains a link to the individual post page.</li>
 <li><b>`Link` component:</b>  The `Link` component from `next/link` is used for client-side navigation, making the page transitions fast and smooth.</li>
</ul>

<h2>Creating Dynamic Post Pages</h2>

<p>Next, we need to create the pages for individual blog posts.  Create a file named `pages/posts/[id].js`. The `[id]` part indicates a dynamic route, where the `id` will be the name of the Markdown file (without the `.md` extension).</p>

<pre><code class="language-jsx">
import Layout from '../../components/Layout';
import GlobalStyles from '../../styles/globalStyles';
import { getAllPostIds, getPostData } from '../../lib/posts';
import styled from 'styled-components';

const PostContent = styled.div`
  margin-top: 20px;
  line-height: 1.6;

  h2, h3, h4 {
    margin-top: 2rem;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem 0;
  }
`;

export async function getStaticPaths() {
  const paths = await getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

const Post = ({ postData }) => {
  return (
    
      
      
        <h2>{postData.title}</h2>
        <p>{postData.date}</p>
        
      
    </>
  );
};

export default Post;
</code></pre>

<p>Let's break down this code:</p>

<ul>
 <li><b>`getStaticPaths()`:</b>  This Next.js function is used to specify all the possible paths for the dynamic route. We use `getAllPostIds()` to get all the post IDs.  `fallback: false` means that if a path isn't generated at build time, it will result in a 404.</li>
 <li><b>`getStaticProps({ params })`:</b> This function fetches the data for a specific post based on the `id` from the route parameters.  It uses `getPostData()` to get the post content and metadata.</li>
 <li><b>`dangerouslySetInnerHTML`:</b>  We use this to render the HTML content generated from the Markdown.  Be careful when using this, as it can open you up to security vulnerabilities if the content is not properly sanitized.  In this case, we control the content and use a Markdown parser that handles sanitization.</li>
</ul>

<h2>Adding Navigation and Styling</h2>

<p>To improve the user experience, let's add some navigation and further styling.  Inside the `components` directory, create a `Navbar.js` component:</p>

<pre><code class="language-jsx">import Link from 'next/link';
import styled from 'styled-components';

const Nav = styled.nav`
  background-color: #333;
  padding: 1rem 0;
  margin-bottom: 20px;
`;

const NavContainer = styled.div`
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const NavLink = styled(Link)`
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;

  &:hover {
    background-color: #555;
  }
`;

const Navbar = () => {
  return (
    <Nav>
      
        Home
        <div>
          {/* Add more navigation links here if needed */}
        </div>
      
    </Nav>
  );
};

export default Navbar;

Now, let’s include the `Navbar` component in our `Layout.js` file:

import styled from 'styled-components';
import Navbar from './Navbar';

const Container = styled.div`
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
`;

const Header = styled.header`
  margin-bottom: 20px;
  text-align: center;
`;

const Footer = styled.footer`
  margin-top: 20px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #ccc;
`;

const Layout = ({ children }) => {
  return (
    
      
      <main>{children}</main>
      <Footer>
        <p>© {new Date().getFullYear()} My Blog</p>
      </Footer>
    
  );
};

export default Layout;

We’ve added a basic navigation bar with a link to the homepage. You can easily extend this to include links to other pages, such as an “About” page or a “Contact” page.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect File Paths: Double-check your file paths, especially when importing components and data. Relative paths can be tricky. Use absolute paths or check your import statements.
  • Typos: Small typos in your code can cause big problems. Carefully review your code for any spelling errors or incorrect variable names.
  • Missing Dependencies: Make sure you’ve installed all the necessary dependencies using `npm install`. If you get an error that a module is not found, it’s likely you haven’t installed it.
  • Incorrect Markdown Formatting: Markdown syntax can be finicky. Use a Markdown editor or previewer to check your formatting before publishing.
  • Not Using `getStaticProps` or `getStaticPaths` Correctly: These functions are essential for static site generation. Make sure you understand how to use them to fetch data and generate dynamic routes.

SEO Best Practices

To ensure your blog ranks well on search engines, here are some SEO best practices:

  • Keyword Research: Identify relevant keywords for your blog posts. Use tools like Google Keyword Planner or SEMrush to research keywords.
  • Title Tags: Write compelling title tags that include your target keywords. Keep them concise (under 60 characters).
  • Meta Descriptions: Write informative meta descriptions that summarize your blog posts and include keywords (under 160 characters).
  • Header Tags (H1-H6): Use header tags to structure your content and make it easy to read. Use your main keyword in the H1 tag.
  • Image Optimization: Optimize your images by compressing them and using descriptive alt text.
  • Internal Linking: Link to other relevant posts on your blog.
  • External Linking: Link to authoritative sources to support your content.
  • Mobile-Friendliness: Ensure your blog is responsive and looks good on all devices. Next.js is responsive by default.
  • Site Speed: Optimize your site speed by using techniques like image optimization, code splitting, and caching. Next.js has built-in features for this.

Key Takeaways

Here’s a summary of what we’ve covered:

  • We set up a Next.js project and created the basic folder structure.
  • We created a layout component for a consistent look and feel.
  • We fetched blog post data from Markdown files using `fs`, `gray-matter`, `remark`, and `remark-html`.
  • We displayed blog posts on the homepage and created dynamic routes for individual posts.
  • We added navigation and basic styling.
  • We discussed common mistakes and how to fix them.
  • We covered SEO best practices.

FAQ

Here are some frequently asked questions:

  1. Can I use a database instead of Markdown files? Yes, you can. Next.js can connect to any database. You would modify the data fetching functions (`getSortedPostsData`, `getAllPostIds`, `getPostData`) to fetch data from your database instead of reading from files.
  2. How do I add comments to my blog? You can integrate a third-party commenting service like Disqus or Commento, or you can build your own commenting system.
  3. How do I deploy my blog? You can deploy your Next.js blog to platforms like Vercel, Netlify, or AWS. Vercel is the recommended option as it’s built by the creators of Next.js and offers seamless deployment.
  4. How can I add pagination? You can implement pagination by modifying the `getSortedPostsData` function to return a limited number of posts and add navigation links to allow the user to navigate through the pages.

Building a blog with Next.js provides a fantastic way to blend content creation with modern web development practices. This tutorial provides a solid starting point for a simple blog and offers a foundation for more complex features, such as adding categories, tags, search functionality, and user comments. The use of Markdown for content creation and Next.js’s powerful features ensures not only a clean and efficient development process but also a high-performing and SEO-friendly result. As you continue to experiment and expand the blog, you’ll gain valuable experience in React, server-side rendering, and the many capabilities of the Next.js framework, ultimately solidifying your skills as a web developer. With this understanding, you are well on your way to building not just a blog, but a robust and engaging online platform.

More posts