📝 Blog Page & BlogView Component

This guide documents the dynamic blog route implementation in your Next.js app using the Zezo OTT UI Kit’s BlogView component.

📁 Folder Structure

app/
└── [slug]/
    ├── components/
    │   └── BlogView.tsx     # Renders the blog UI
    └── page.tsx             # Fetches and displays blog content

📄 page.tsx – Dynamic Blog Route

This file handles the dynamic route /[slug], loading blog content based on the URL slug.

🔧 Responsibilities

• Accepts slug as a dynamic route param.
• Fetches blog data via blogHttp(slug).
• Renders fallback UI when blog is not found.
• Displays blog content using the <BlogView /> component.

✅ Example

import { zezoClient } from "@/lib/zezoClient";
import BlogView from "./components/BlogView";
 
export interface Props {
  params: { slug: string };
}
 
export default async function Page({ params }: Props) {
  const blog = await zezoClient().blogs.get({ slug: params.slug });
 
  if (!blog) {
    return (
      <div className="min-h-screen flex justify-center items-center">
        Blog not found.
      </div>
    );
  }
 
  return <BlogView content={blog.data.data[0]?.blog_content ?? ""} />;
}

🧩 BlogView.tsx – Client-Side Component

Renders styled blog content using @zezosoft/zezo-ott-react-ui-kit.

📦 Props

💡 Example

"use client";
import React from "react";
import { BlogView as ZezoBlogView } from "@zezosoft/zezo-ott-react-ui-kit";
 
interface IProps {
  content: string;
}
 
const BlogView: React.FC<IProps> = ({ content }) => {
  return (
    <article className="prose dark:prose-invert mx-auto px-4 sm:px-6 md:px-8 py-6 max-w-full sm:max-w-2xl md:max-w-3xl text-sm sm:text-base">
      <ZezoBlogView content={content} />
    </article>
  );
};
 
export default BlogView;

title: 🖼 Example Output & Notes – BlogView Rendering

---

## title: 🧩 BlogView Rendering Example

Then the `BlogView` component will render:

🖋️ Tailwind CSS Typography

The official Tailwind CSS Typography plugin (@tailwindcss/typography) provides a set of prose classes you can use to beautifully style HTML content you don’t directly control — like Markdown output, CMS content, or raw blog HTML.

📦 Installation

Install the plugin:

npm install -D @tailwindcss/typography

🎨 Using Typography Plugin with @import

If you’re using Tailwind CSS via a main CSS file like style.css, ya globals.css make sure to include the plugin directly after importing Tailwind:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

💡 Tip: This works best when you’re not using PostCSS or if your framework expects global CSS in @import form (e.g., some Vite + Vanilla setups).

🧠 Notes

• BlogView is a Client Component because @zezosoft/zezo-ott-react-ui-kit requires browser rendering.
• The parent page.tsx is a Server Component, which ensures:
  • Server-side rendering (SSR)
  • Improved SEO
  • Faster initial page loads
• Tailwind CSS classes used:
  • prose: Adds beautiful default styles to HTML content like headings, paragraphs, and lists.
  • dark:prose-invert: Applies inverted (light-on-dark) styles when dark mode is active.
• This setup ensures that your blog content:
  • Is rendered securely (HTML sanitized inside @zezosoft/zezo-ott-react-ui-kit)
  • Looks great on all screen sizes
  • Supports both light and dark themes

🧑‍💻 Add Your Own Blog

The blog content is fetched using:

const blog = await zezoClient().blogs.get({ slug: params.slug });