Part 12: Creating Your First Blog Post in Next.js

[Pages] Loading Data

[Pages] Loading Data

As we continue to develop our blog website, it's time to add some actual content. In this post, we'll guide you through the process of creating your first blog post page using Next.js. We'll start by setting up navigation links and then create the page itself. By the end, you'll have a dedicated page for your first blog post.

Setting Up Navigation Links

First, we need a way for users to access our blog post. We'll add a link to our homepage that directs users to the new post.

Here's how you can set this up:

// File: pages/index.js
import Head from 'next/head';
import Link from 'next/link';

function HomePage() {
  console.log('[HomePage] render');
  return (
    <>
      <Head>
        <title>My Blog</title>
      </Head>
      <main>
        <h1>My Blog</h1>
        <ul>
          <li>
            <Link href="/posts/first-post">
              First Post
            </Link>
          </li>
        </ul>
      </main>
    </>
  );
}

export default HomePage;

In this code snippet, we import the Link component from Next.js, which enables client-side navigation. We then create a list item with a link to /posts/first-post, the path where our first blog post will be located.

Creating the First Blog Post Page

With the link in place, clicking it will currently lead to a 404 error because the page doesn't exist yet. Let's create that page.

Step-by-Step Guide

  1. Create a Sub-Folder: Inside the pages directory, create a new sub-folder named posts. This organizes your blog posts under a common path.

  2. Create the Page File: Inside the posts folder, create a new file called first-post.js. This file will define the content and structure of your blog post page.

  3. Add Component Code: Copy and modify code from an existing page, such as your About page, to quickly set up the new page.

Here's how your first-post.js file might look:

// File: pages/posts/first-post.js
import Head from 'next/head';

function FirstPostPage() {
  console.log('[FirstPostPage] render');
  return (
    <>
      <Head>
        <title>First Post - My Blog</title>
      </Head>
      <main>
        <h1>First Post</h1>
        <p>
          This is my first ever blog post!
        </p>
      </main>
    </>
  );
}

export default FirstPostPage;

In this component, we set the page's title and include a simple paragraph as the blog content. The Head component is used to update the HTML head with the page title, improving SEO and user experience.

Viewing Your First Blog Post

With everything set up, navigate to /posts/first-post in your browser, or click the link on your homepage. You'll see the new page with your first blog post content.

Considerations for Future Posts

While writing blog content directly in JSX works for simple posts, it becomes cumbersome for longer articles. In future posts, we might explore using Markdown for a more efficient and manageable writing process.

Conclusion

You've now created a basic structure for your blog posts in Next.js. By organizing posts under a posts sub-path, you've laid the groundwork for a scalable blog architecture. As you continue to develop your site, consider ways to streamline content creation and improve the user experience. Stay tuned for more enhancements, like integrating Markdown for more dynamic content management. Happy blogging!

PreviousPart 11: Enhancing Your Blog's Appearance with a Custom FaviconNextPart 13: Enhancing Your Blog with Markdown: A Step-by-Step Guide

Last updated