Next.js Blog Prompts: Professional App Router & Prisma Code Recipes

The Ultimate Next.js Blog Dev-Kit

Copy and paste these professional prompts into your AI assistant to generate high-quality code for your modern blog.

how to create modern blogs ui and latest posts page in next js

how to build a hero image section and featured post next js

1. The Global Navigation & Footer System

Use this prompt to: Build a high-performance, SEO-friendly footer with dynamic data fetching.

Prompt: "Create a Next.js App Router footer system that matches a modern blog layout with a dark navy background (#0b1221), white text, and a clean grid structure using Tailwind CSS. Implement an async server component called Footer that fetches legal pages, categories, and social links in parallel using Promise.all from /api/legal-pages, /api/categories, and /api/admin/social-links with { next: { revalidate: 3600 } }, scoped by siteId from DEFAULT_SITE_ID and a base URL from process.env.NEXT_PUBLIC_SITE_URL (fallback to http://localhost:3000). Truncate legal pages and categories to 10 items, accept data.links or an array for social links, and gracefully handle failures with empty arrays. The footer layout should use container mx-auto px-6 and a responsive grid (grid-cols-2, md:grid-cols-4, lg:grid-cols-5) where the first block spans two columns and contains a gradient brand name (blue to purple), a short description ('Latest stories, insights, and useful guides.'), and social icons rendered via a child component. Add Quick Links (Home, Contact), Legal links (Sitemap, Robots, and fetched legal pages), and Categories with capitalized names, all with smooth hover transitions. Below the grid, include a divider and render a FooterHiddenLoginTrigger with the current year and brand name from process.env.NEXT_PUBLIC_BRAND_NAME (fallback 'WisemixMedia'). Also implement a client component FooterSocialIcons that maps platform names to Phosphor icons (Facebook, Twitter, Instagram, LinkedIn, YouTube), returns null if no links, and renders accessible external anchor tags with aria-label, target='_blank', rel='noopener noreferrer', text-gray-300 hover to white, and icon size 24 with weight='fill' in a horizontal row with spacing."

how to make dynamic navbar with isr next js tailwind css

2. The Dynamic Category Listing Page

Use this prompt to: Create a clean, fast, and SEO-optimized page that displays posts filtered by category.

Prompt: "Create a Next.js App Router dynamic route page at src/app/category/[slug]/page.jsx that renders a category listing with a clean, minimal UI and server-side data fetching. Use Prisma to fetch a single category by slug and siteId (from DEFAULT_SITE_ID) including published posts ordered by createdAt descending, and include _count of posts. If the category is not found, call notFound() from next/navigation. Export revalidate = 600 and implement generateStaticParams() to prebuild all category slugs for the site. The layout should be a light gray background with a white top bar, a breadcrumb nav linking back to Home, and a small pill showing total article count. The main area should center a large category title and show a responsive grid of cards (1 column on mobile, 3 on desktop). Each card links to /blog/[slug], has a white surface with border, rounded corners, subtle shadow, and an image with a hover zoom effect. Use the IKImage component with resolveImageUrl for image fallback, and show the post title with a hover color shift to blue. Keep the UI clean, modern, and fast, and ensure all data fetching is wrapped in try/catch with graceful fallback for empty categories."

📖 How to Use These Prompts

To get the best results, follow these steps:

Choose your IDE: Open your project in VS Code, Cursor, or any web-based editor.
Paste the Prompt: Copy the text in the boxes above and paste it into Gemini, ChatGPT, or your AI coding assistant.
The Result: The AI will generate the complete .jsx or .tsx file architecture, including the Tailwind CSS styling and Prisma database logic.
Customization: You can change the hex codes (like #0b1221) in the prompt if you want a different brand color.

💡 Pro-Tip for Clients:

These prompts are designed for the Next.js App Router. They are "Super Prompts," meaning they don't just give you a UI; they give you the logic (how the data moves), the SEO (how Google sees your site), and the Performance (how fast it loads) all in one go.