Next.js Tutorial for Beginners: Create a Simple Blog App with Tailwind CSS

🚀 Introduction

📦 Step 1: Create a New Next.js App

npx create-next-app@latest simple-blog-app

• TypeScript: No
• App Router: Yes
• Tailwind CSS: Yes

📂 Step 2: Folder Structure

simple-blog-app/
├── app/
│   ├── page.js           → Home Page
│   ├── about/page.js     → About Page
│   ├── blog/page.js      → Blog List
│   └── blog/[slug]/page.js → Blog Post (Dynamic)
├── components/Navbar.js
├── data/posts.js

📁 Step 3: Add Dummy Blog Data

// data/posts.js
export const posts = [
  {
    slug: "nextjs-introduction",
    title: "Getting Started with Next.js",
    content: "Next.js is a React framework for production..."
  },
  {
    slug: "tailwind-setup",
    title: "Using Tailwind CSS with Next.js",
    content: "Tailwind makes styling easy and fast..."
  }
];

🧩 Step 4: Create Navbar Component

// components/Navbar.js
import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="bg-blue-600 text-white p-4">
      <div className="max-w-5xl mx-auto flex gap-4">
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Link href="/blog">Blog</Link>
      </div>
    </nav>
  );
}

🏠 Step 5: Home Page

// app/page.js
import Navbar from "../components/Navbar";

export default function Home() {
  return (
    <>
      <Navbar />
      <main className="max-w-5xl mx-auto p-4">
        <h1 className="text-3xl font-bold">Welcome to Simple Blog</h1>
        <p className="mt-2">A blog built with Next.js and Tailwind CSS.</p>
      </main>
    </>
  );
}

📄 Step 6: About Page

// app/about/page.js
import Navbar from "../../components/Navbar";

export default function About() {
  return (
    <>
      <Navbar />
      <main className="max-w-5xl mx-auto p-4">
        <h1 className="text-2xl font-semibold">About Us</h1>
        <p className="mt-2">This is a demo blog made with Next.js 14.</p>
      </main>
    </>
  );
}

📝 Step 7: Blog List Page

// app/blog/page.js
import { posts } from "../../data/posts";
import Link from "next/link";
import Navbar from "../../components/Navbar";

export default function Blog() {
  return (
    <>
      <Navbar />
      <main className="max-w-5xl mx-auto p-4">
        <h1 className="text-2xl font-semibold mb-4">Blog Posts</h1>
        <ul className="space-y-3">
          {posts.map((post) => (
            <li key={post.slug}>
              <Link href={`/blog/${post.slug}`} className="text-blue-600 hover:underline">
                {post.title}
              </Link>
            </li>
          ))}
        </ul>
      </main>
    </>
  );
}

🔁 Step 8: Dynamic Blog Post Page

// app/blog/[slug]/page.js
import { posts } from "../../../data/posts";
import Navbar from "../../../components/Navbar";

export default function Post({ params }) {
  const post = posts.find((p) => p.slug === params.slug);

  if (!post) return <p>Post not found!</p>;

  return (
    <>
      <Navbar />
      <main className="max-w-5xl mx-auto p-4">
        <h1 className="text-2xl font-bold">{post.title}</h1>
        <p className="mt-2">{post.content}</p>
      </main>
    </>
  );
}

🚀 Step 9: Deploy on Vercel

npx vercel

🎉 Final Thoughts