🚀 Introduction
In this tutorial, you’ll learn how to create a simple blog app using Next.js 14 and Tailwind CSS. This step-by-step guide is perfect for beginners who want to understand Next.js fundamentals like routing, pages, dynamic routes, and styling.
📦 Step 1: Create a New Next.js App
|
1 |
npx create-next-app@latest simple-blog-app |
Follow the prompts:
- TypeScript: No
- App Router: Yes
- Tailwind CSS: Yes
📂 Step 2: Folder Structure
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 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
Run the following command to deploy your app on Vercel:
|
1 |
npx vercel |
Or sign up on https://vercel.com and import your GitHub repo.
🎉 Final Thoughts
This tutorial helped you build a complete blog website using Next.js and Tailwind CSS. You’ve learned about routing, components, and dynamic pages. Now you can expand it with features like markdown blogs, CMS integration, or Firebase.
Happy Coding! 🚀