Build a Marketing Website with Next.js — Prompt Template

Give these prompts to your AI agent to build your own SEO blog.

---

Phase 1: Initialize Project

What it does: Sets up a Next.js project with all the tools needed to build a modern website.

Prompt:

"Create a new Next.js 16 project with TypeScript and Tailwind CSS. Use the App Router. Project name: [YOUR-PROJECT-NAME]. Place it in ~/Projects/[YOUR-PROJECT-NAME]. After creating, install these dependencies: npm install next-mdx-remote gray-matter remark-gfm. Then initialize shadcn/ui with default settings and add these components: button, card, navigation-menu."

---

Phase 2: Set Up MDX Blog

What it does: Lets you write blog posts in Markdown with React components inside — like embedding a signup form directly in your article.

Prompt:

"In the project at ~/Projects/[YOUR-PROJECT-NAME], create these files:

1. src/lib/mdx.ts — Functions to read .mdx files from content/blog/. Use gray-matter for frontmatter. Export: getBlogPostContent(slug) and getAllBlogSlugs().

2. src/components/mdx-content.tsx — MDX renderer using next-mdx-remote/rsc. Include custom components for h1, h2, h3, p, ul, ol, li, code, pre, a, table, th, td, blockquote. Use remark-gfm plugin. Style with Tailwind.

3. src/app/blog/[slug]/page.tsx — Dynamic blog page. Use generateStaticParams to pre-build all posts. Get metadata from frontmatter. Render MDXContent. Handle notFound()."

---

Phase 3: Create Sample Content

What it does: Creates your first blog post and a data file that tracks all your posts so the site knows what pages to build.

Prompt:

"Create these files in ~/Projects/[YOUR-PROJECT-NAME]:

1. content/blog/hello-world.mdx with frontmatter: title='Hello World', date='[TODAYS-DATE]', excerpt='Your first post'. Content: a brief intro paragraph.

2. data/blog-posts.json — Array of all blog post metadata (slug, title, date, excerpt)."

---

Phase 4: Add Comparison Pages

What it does: Builds pages where you pit your product against competitors — these rank well for "X vs Y" searches.

Prompt:

"In ~/Projects/[YOUR-PROJECT-NAME], create:

1. data/comparisons.json — Array of comparison objects. Each has: slug, title, description, pros (array), cons (array). Add 2 sample comparisons for [YOUR-NICHE].

2. src/app/compare/[slug]/page.tsx — Dynamic comparison page. Read from comparisons.json. Generate static params for all comparisons. Display title, description, then two columns: green box for pros, red box for cons. Use Tailwind for styling."

---

Phase 5: Add Persona Pages

What it does: Creates targeted landing pages for specific audiences (e.g., "for lawyers", "for doctors") — these capture high-intent traffic.

Prompt:

"In ~/Projects/[YOUR-PROJECT-NAME], create:

1. data/personas.json — Array of persona objects. Each has: slug, profession, description, painPoints (array), howYouHelp (string). Add 3 personas relevant to [YOUR-NICHE].

2. src/app/for/[profession]/page.tsx — Dynamic persona pages. Read from personas.json. Display: 'For [profession]' heading, description, pain points as bullet list, how you help them. Use cards for visual appeal."

---

Phase 6: Add Analytics

What it does: Tracks visitor behavior — page views, time on site, traffic sources — without slowing down your site.

Prompt:

"In ~/Projects/[YOUR-PROJECT-NAME], install @vercel/analytics and add the Analytics component to src/app/layout.tsx. Wrap the children in the body tag."

---

Phase 7: Documentation Pages

What it does: Builds a help center so users can self-serve — reduces your support burden and builds trust.

Prompt:

"Create a documentation section in ~/Projects/[YOUR-PROJECT-NAME]:

1. src/app/docs/page.tsx — Docs landing page. List sections: Getting Started, Features, FAQ. Each links to /docs/[section].

2. Create subpages: /docs/getting-started, /docs/features, /docs/faq as static pages with sample content about [YOUR-PROJECT]."

---

Phase 8: SEO Optimization

What it does: Tells Google what each page is about so you rank higher; creates custom social images when links are shared.

Prompt:

"Add SEO metadata to all pages in ~/Projects/[YOUR-PROJECT-NAME]:

1. Every page should export a generateMetadata function returning title and description.

2. Add JSON-LD schema to blog posts: BlogPosting with headline, datePublished, author.

3. Create opengraph-image.tsx for blog and comparison pages to auto-generate social images."

---

Phase 9: Deployment

What it does: Puts your site on the internet with one command — Vercel builds and hosts it for free.

Prompt:

"Prepare ~/Projects/[YOUR-PROJECT-NAME] for Vercel deployment:

1. Create README.md with: project name, one-line description, tech stack, how to run locally (npm run dev), how to deploy.

2. Verify next.config.ts has proper output: 'export' for static export, or leave default for Vercel.

3. Push to GitHub and provide the commands they need to deploy to Vercel."

---

Customization Variables

Replace these placeholders in all prompts:

---

Usage

Give each prompt one at a time to your AI agent. Wait for each step to complete before moving to the next.

The result: A fully functional SEO blog with MDX blog posts, comparison pages, persona pages, docs section, and Vercel deployment ready.

---

The stack: Next.js 16, TypeScript, Tailwind CSS, shadcn/ui, MDX, Vercel