feat: blog home pagination and routing

[Yogi Arif Widodo (yogithesymbian)]

✨ What’s Changed

This PR introduces pagination and route refactor for the blog:

• Implements blog pagination using ?page=n query param and GraphQL skip logic.
• Refactors blog homepage to a dedicated route: /blog/page.tsx.
• Separates the landing page (/) from the blog page (/blog) to allow better customization and demonstration of routing versions.
• Adds pagination controls (Previous / Next + numbered buttons) with dynamic enable/disable based on the page state.

---

🔧 Technical Details

• Uses pageBlogPostCollection GraphQL query with skip and limit parameters for pagination.
• Introduces server-side rendering via page.tsx with searchParams.page to fetch paginated content.
• Blog posts are rendered via the BlogPosts component using a Container layout.
• Client-side routing via useRouter().push() handles ?page=n navigation.

---

🧪 How to Test

1. Navigate to /blog.
2. Confirm that the first 6 posts load.
3. Click pagination buttons to navigate pages (?page=2, ?page=3, etc.).
4. Verify the URL updates and posts change accordingly.
5. Confirm Previous and Next buttons work and are disabled at page limits.
6. / still functions independently and is not affected by this change.

---

🚫 Breaking Changes

• None. The landing page (/) and blog routes are now structurally separated.

---

📦 Folder Structure Affected

• /blog/page.tsx – new structured blog index route
• lib/fetchPosts.ts – GraphQL logic for paginated fetch
• components/features/blog/BlogPosts.tsx – blog UI rendering with pagination support
• components/ui/Pagination.tsx – reusable pagination UI component

---

✅ Strengths & Highlights

✅ Clean Pagination via Query Parameters (?page=n)

• Scalable for SEO and direct linking.
• Follows standard RESTful pagination.
• Enables bookmarking and sharing.

✅ GraphQL Pagination with skip and limit

• Efficient query performance.
• Well-suited to headless CMS backends (e.g., Contentful, Sanity, Hygraph).

✅ Routing Separation (/blog/page.tsx)

• Keeps / as a clean, standalone landing page.
• Allows /blog to evolve independently as a CMS-powered section.
• Adheres to best practices in Next.js App Router structure.

✅ Pagination UI Implementation

• Uses useRouter().push() for navigation.
• Buttons are dynamically enabled/disabled.
• Clean, minimal UI using TailwindCSS (optional).

---

⚠️ Room for Enhancements

❌ 1. No Total Page Count = No Last Page Guard

• Currently disables "Next" based on post count per page.
• Could be improved by fetching total count from GraphQL for better guard logic.

❌ 2. No Loading State on Pagination Click

• When switching pages, content changes without feedback.
• Could be improved by adding a loading indicator or skeleton UI.

---

🚀 Ideal Starter Use Case

This setup is perfect for developers building a simple blog or documentation site with:

• A static landing page (/) for branding, marketing, or announcements.
• A fully functional paginated blog (/blog) using clean routes and scalable structure.
• Easy customization through modular folders: components/, lib/, and app/blog/.

Highlights for starters:

• Minimal dependencies.
• Works great with a headless CMS or static file data.
• Easy to change blog post layout (BlogPosts.tsx), card style, or pagination logic.

🛠️ Want to turn / into your landing site and /blog into a dynamic content hub?
→ This is your foundation. Just plug in your CMS and deploy.

This feature is a small contribution to help others who might want a landing + blog setup. I'm still learning and open to any improvements. Thanks for the opportunity!

[vercel]

Yogi Arif Widodo (@yogithesymbian) is attempting to deploy a commit to the Contentful Apps Team on Vercel.

A member of the Team first needs to authorize it.