I recently finished a project called LeafLife, a website template for landscaping companies. Here is a quick look at how I built it and what I learned.
The stack
Next.js for the front end and routing
WordPress as the content manager
Custom post types for services and projects
A custom field for project location
Lucide icons and responsive CSS
Why WordPress and Next.js together
Many small business owners already know WordPress. They do not want to learn a new dashboard. So I kept WordPress for editing and used Next.js to show the content fast on the front end.
The content model
There are two main post types. Services have a title, excerpt, content, and featured image. Projects have the same, plus a location field. Each one gets its own detail page and its own SEO title and description.
A few things that helped
Keeping the number of fields small, so the layout never breaks
Using the same heading sizes and spacing for all long content
Writing unique meta titles for every page from day one
Building for mobile screens first
The result
A landscaping company can add its logo, colors, and photos, and start publishing the same day.
You can see the full project, screenshots, and details here: LeafLife on hasnainalam.com
If you have built something similar with a headless WordPress setup, I would like to hear how you handled custom fields. Leave a comment or review the project and tell me what you would improve.
Top comments (0)