Build a Blog in 7 Days - Day 1 - wonderfulblogs.blog

Welcome to Day 1. By the end of today, you'll have a running Next.js project with a homepage that lists blog posts. No prior Next.js experience needed - just basic HTML, CSS, and JavaScript.

What We're Building

A personal blog with:

Homepage with article cards
Individual article pages
Responsive design (mobile + desktop)
Markdown-based content
Deployed to Vercel (Day 7)

Prerequisites

Node.js 18+ installed
A code editor (VS Code recommended)
Basic terminal comfort

Step 1: Create the Project

npx create-next-app@latest my-blog
# Choose these options:
# - TypeScript? No (keep it simple)
# - ESLint? Yes
# - Tailwind CSS? No (we'll use Bootstrap)
# - src/ directory? No
# - App Router? Yes
# - Import alias? No

cd my-blog
npm run dev

Open http://localhost:3000 - you should see the default Next.js page.

Step 2: Clean Up the Default Template

Delete everything in app/page.js and replace with:

export default function Home() {
  const posts = [
    {
      slug: 'hello-world',
      title: 'Hello World',
      excerpt: 'My first blog post.',
      date: '2026-07-05',
    },
  ];

  return (
    <main className="container py-5">
      <h1 className="mb-4">My Blog</h1>
      <div className="row g-4">
        {posts.map((post) => (
          <div key={post.slug} className="col-md-6">
            <div className="card h-100">
              <div className="card-body">
                <h2 className="h5 card-title">{post.title}</h2>
                <p className="card-text">{post.excerpt}</p>
                <small className="text-muted">{post.date}</small>
              </div>
            </div>
          </div>
        ))}
      </div>
    </main>
  );
}

Step 3: Add Bootstrap 5

Install Bootstrap and add it to your layout:

npm install bootstrap

In app/layout.js, import Bootstrap CSS:

import 'bootstrap/dist/css/bootstrap.min.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Step 4: Folder Structure

Organize your project like this:

my-blog/
├── app/
│   ├── layout.js       # Root layout
│   ├── page.js         # Homepage
│   └── blog/
│       └── [slug]/
│           └── page.js # Article detail (Day 2)
├── content/
│   └── posts/          # Markdown files (Day 3)
├── public/
│   └── images/
└── package.json

What You Have Now

Next.js project running locally
Bootstrap 5 integrated
Homepage with hardcoded post cards
Clean folder structure ready to grow

Day 2 Preview

Tomorrow we'll create dynamic article pages with app/blog/[slug]/page.js and link the cards to real URLs.

Don't worry about making it perfect today. A running project beats a perfect plan.

Build a Blog in 7 Days with Next.js - Day 1