Creating the Blog Homepage: A Practical Guide with Tailwind

Previously in this course, we covered Styling with Tailwind CSS: A Practical Guide for Next.js to set up our design system. Now, we’re ready to put those utility classes to work by building the main landing page of our application.

The homepage is the "front door" of your blog. In the App Router, this is defined by the app/page.js file. Our goal for this lesson is to transform an empty page into a structured, readable list of blog post summaries.

Creating the Home Route

In Next.js, the filesystem acts as your router. As discussed in Understanding the App Router Architecture, the app/page.js file automatically maps to your root URL (/).

If you look in your app/ directory, you likely have a default page.js generated by the CLI. We’re going to clear that out and build our blog structure.

Rendering Static Content

For now, we will work with a static array of objects to simulate blog posts. This allows us to focus on the UI structure before we connect a database in future lessons.

Open app/page.js and replace its contents:

JSX
// app/page.js

const posts = [
  { id: 1, title: CE9178">'Getting Started with Next.js', summary: CE9178">'Learn the basics of the App Router.' },
  { id: 2, title: CE9178">'Mastering Tailwind CSS', summary: CE9178">'Build beautiful UIs faster.' },
];

export default function HomePage() {
  return (
    <main className="max-w-4xl mx-auto p-6">
      <h1 className="text-4xl font-bold mb-8">My Engineering Blog</h1>
      <div className="grid gap-6">
        {posts.map((post) => (
          <article key={post.id} className="p-6 border rounded-lg shadow-sm">
            <h2 className="text-2xl font-semibold">{post.title}</h2>
            <p className="text-gray-600 mt-2">{post.summary}</p>
          </article>
        ))}
      </div>
    </main>
  );
}

Structuring the UI with Tailwind

We used a few key utility classes here to make the page responsive and readable:

1. max-w-4xl mx-auto: This centers our content and prevents the lines from becoming too long on wide monitors, which is critical for readability.
2. grid gap-6: This creates a clean vertical stack of our blog posts with consistent spacing.
3. border rounded-lg shadow-sm: These utilities give our post "cards" a defined boundary, separating them from the background.

If you are new to these specific classes, Mastering Spacing and Sizing in Tailwind CSS provides a deeper look at how the spacing scale works to keep your designs consistent.

Hands-on Exercise

To solidify your understanding of rendering lists, try the following:

1. Add a third object to the posts array in app/page.js.
2. Add a new property to each post object called date (e.g., "Oct 24, 2023").
3. Display this date in the UI using a small, light-gray text element below the summary.
4. Tip: Use the text-sm and text-gray-400 classes to distinguish the date from the title and summary.

Common Pitfalls

• Missing Keys: Always include a key prop when mapping arrays in React. Without it, React struggles to track which elements have changed, which can lead to performance issues or rendering bugs.
• Hardcoding Styles: Avoid writing custom CSS in a separate file for simple layouts. Using Tailwind’s utility classes keeps your styling logic alongside your component structure, which is the "Next.js way."
• Over-nesting: Keep your page.js clean. If your card component grows complex, don't leave it inside page.js. We will move these into a separate components/ folder in a later lesson.

FAQ

Q: Can I use fetch inside page.js? A: Yes! Since page.js is a Server Component by default, you can make it async and fetch data directly from a database or API inside the component.

Q: Why does my content touch the edges of the screen? A: Ensure you have a container element (like our <main>) with horizontal padding (e.g., px-6) and a maximum width (max-w-*).

Q: How do I change the font? A: We covered global font configuration in Building the Root Layout. Check that lesson if your text doesn't look like the default Next.js font.

Recap

We have successfully created our homepage, mapped a static array to our UI, and applied Tailwind utilities to create a professional look. By centering our content and using cards, we've established a scalable pattern for the rest of the blog.

Up next: Implementing Navigation with Link.