Next.js E-commerce site with Headless WordPress CMS
Budget: ₹37,500 – ₹75,000 INR
I'm looking for a skilled developer to create a Next.js website integrated with a WordPress headless CMS. A lot of cursor generated code is already available to start deployment.
Objective - Develop a scalable, high-performance, and SEO-friendly website for religious tech company that includes:
• Product Pages:
o Created and managed exclusively via your custom React admin panel.
o Synced to WordPress via secure APIs for further SEO enhancements and unified frontend rendering in Next.js.
• Blog Content: Multiple blog posts will be uploaded directly into WordPress using its bulk import tools.
• Static Pages: Pages such as About Us, Contact Us, Landing Pages, etc., are created and maintained directly within the WordPress admin interface.
• Frontend Rendering: A Next.js application that fetches all content (product pages, blogs, and static pages) via the WordPress REST API (GraphQL) and renders them using SSR/SSG for optimal SEO and performance.
2. System Architecture
2.1 Architecture
React Admin Panel (Product Pages) =>
=> Wordpress Headless CMS [1. Receives Product Pages from React Admin Panel; 2. Manages Blogs & Static Pages (Directly via WP Admin); 3. Provides SEO Plugins & Bulk Import Tools; 4. Generates Dynamic Sitemap] =>
=> Next.js Frontend [1. Fetches all content (Product, Blog and Static pages) via REST API; 2. Renders via SSR/ SSG for SEO; 3. Implements SEO, Dynamic Routing; 4. Implements Dynamic metadata, Optimized images, breadcrumbs, pagination, related posts]
2.2 Technology Stack
Frontend:
o Next.js: For SSR/SSG, dynamic routing, and performance optimization.
o React: Utilized within Next.js components.
o Tailwind CSS: For responsive, utility-first styling.
o Next.js Image Component: For responsive, lazy-loaded images.
Backend / Headless CMS:
o WordPress: Configured as a headless CMS.
o Plugins:
▪ JWT Authentication: For secure API access.
▪ Yoast SEO/Rank Math: For automatic SEO enhancements.
▪ Bulk Import Plugins: For importing blog posts (XML/CSV based).
▪ Sitemap Generator Plugin (or custom solution): To dynamically
generate and update XML sitemaps.
o Hosting: Managed WordPress hosting (e.g., Cloudways, Kinsta, or WP
Engine).
What is available:
1. Figma designs for webapp, the website to be made on similar design lines
2. Admin panel is already made that currently serves iOS and Android apps
3. Cursor generated code for following modules available:
a. Integration of react admin panel in headless wordpress CMS available
b. Pushing Product Page Data to WordPress
c. Next.js Frontend – Consuming and Rendering Content
d. Customer Next.js frontend template - This template incorporates dynamic metadata, SEO-friendly pagination, optimized and accessible images with fallbacks, enhanced structured data (Breadcrumbs and Article/Product), prefetching for adjacent pages, an error boundary for runtime issues, and integration notes for logging/monitoring (like Sentry), Twitter card tags.
Ideal candidates will have:
- Proven experience with Next.js and Headless WordPress CMS integration
- Strong understanding of using AI tools like cursor to finish work on time and at an economical price point.
- Strong understanding of e-commerce website development
- Skills in creating intuitive UI/UX for shopping interfaces
- Expertise in implementing secure payment gateways
Objective - Develop a scalable, high-performance, and SEO-friendly website for religious tech company that includes:
• Product Pages:
o Created and managed exclusively via your custom React admin panel.
o Synced to WordPress via secure APIs for further SEO enhancements and unified frontend rendering in Next.js.
• Blog Content: Multiple blog posts will be uploaded directly into WordPress using its bulk import tools.
• Static Pages: Pages such as About Us, Contact Us, Landing Pages, etc., are created and maintained directly within the WordPress admin interface.
• Frontend Rendering: A Next.js application that fetches all content (product pages, blogs, and static pages) via the WordPress REST API (GraphQL) and renders them using SSR/SSG for optimal SEO and performance.
2. System Architecture
2.1 Architecture
React Admin Panel (Product Pages) =>
=> Wordpress Headless CMS [1. Receives Product Pages from React Admin Panel; 2. Manages Blogs & Static Pages (Directly via WP Admin); 3. Provides SEO Plugins & Bulk Import Tools; 4. Generates Dynamic Sitemap] =>
=> Next.js Frontend [1. Fetches all content (Product, Blog and Static pages) via REST API; 2. Renders via SSR/ SSG for SEO; 3. Implements SEO, Dynamic Routing; 4. Implements Dynamic metadata, Optimized images, breadcrumbs, pagination, related posts]
2.2 Technology Stack
Frontend:
o Next.js: For SSR/SSG, dynamic routing, and performance optimization.
o React: Utilized within Next.js components.
o Tailwind CSS: For responsive, utility-first styling.
o Next.js Image Component: For responsive, lazy-loaded images.
Backend / Headless CMS:
o WordPress: Configured as a headless CMS.
o Plugins:
▪ JWT Authentication: For secure API access.
▪ Yoast SEO/Rank Math: For automatic SEO enhancements.
▪ Bulk Import Plugins: For importing blog posts (XML/CSV based).
▪ Sitemap Generator Plugin (or custom solution): To dynamically
generate and update XML sitemaps.
o Hosting: Managed WordPress hosting (e.g., Cloudways, Kinsta, or WP
Engine).
What is available:
1. Figma designs for webapp, the website to be made on similar design lines
2. Admin panel is already made that currently serves iOS and Android apps
3. Cursor generated code for following modules available:
a. Integration of react admin panel in headless wordpress CMS available
b. Pushing Product Page Data to WordPress
c. Next.js Frontend – Consuming and Rendering Content
d. Customer Next.js frontend template - This template incorporates dynamic metadata, SEO-friendly pagination, optimized and accessible images with fallbacks, enhanced structured data (Breadcrumbs and Article/Product), prefetching for adjacent pages, an error boundary for runtime issues, and integration notes for logging/monitoring (like Sentry), Twitter card tags.
Ideal candidates will have:
- Proven experience with Next.js and Headless WordPress CMS integration
- Strong understanding of using AI tools like cursor to finish work on time and at an economical price point.
- Strong understanding of e-commerce website development
- Skills in creating intuitive UI/UX for shopping interfaces
- Expertise in implementing secure payment gateways