Headless Sites on Strapi: Custom Development
With over 5 years of experience and 30+ successful projects, our company delivers reliable Strapi solutions. When a frontend team wants to manage content independently from a monolithic backend, Strapi is a top choice. But a common mistake is poorly designed content types leading to N+1 queries and high TTFB. On one project, we saw Strapi with unoptimized populate calls generate 300+ database queries per page and Time to First Byte up to 2 seconds. After configuring the right schema and Redis caching, we reduced it to 50 ms. Such issues are costly: according to practice Strapi best practices, fixing architecture early saves up to 40% of budget. Our typical project costs between $5,000 and $15,000. We provide Strapi development outsourcing, Next.js integration, and custom content types. Contact us for a project assessment — we'll propose the optimal solution.
How Much Does Strapi Development Cost?
A basic site with 4–6 content types and Next.js integration takes 2–3 weeks and starts at $5,000. A complex project with custom controllers, multi-language, and plugins takes 4–6 weeks, ranging from $10,000 to $25,000. Pricing is calculated individually after a brief. Our experience with Strapi and 30+ successful projects allows us to accurately estimate scope. Get a free consultation — we'll advise on architecture and propose the optimal solution.
Why Strapi for Headless Architecture?
Strapi is a Node.js headless CMS with automatic REST and GraphQL API generation from content-type configuration. Content types are described via JSON schema (in src/api/*/content-types/*.json), and schema changes via GUI are saved in code. This means developers control versioning while editors comfortably fill content. Out of the box, it offers draft/publish system, localization, plugins, and flexible permission model. For media, we use Cloudinary or S3 to offload the server. We ensure stable performance even under high loads by configuring Redis for query caching. Compared to WordPress as a headless CMS, Strapi is 2x faster in deployment time Strapi vs WordPress and has no license cost (open source). Additionally, according to industry benchmarks, Strapi reduces initial setup time by 40% compared to Contentful.
Integrating Strapi with Next.js
Integration is built on HTTP calls. We connect Strapi as a separate service, generate API tokens for public access, and use fetch in Next.js server components. For Incremental Static Regeneration (ISR), we set up webhooks: Strapi notifies Next.js when a record changes, and it invalidates the cache. This delivers fresh content without rebuilding the entire site. Over 95% of our clients see improved performance after migration. More details on Strapi response format can be found in the official documentation. Typical stack:
| Layer | Technology |
|---|---|
| CMS | Strapi 5.x |
| Frontend | Next.js 14 / Nuxt 3 |
| Database | PostgreSQL |
| Media | Cloudinary / AWS S3 |
| CMS Deploy | Railway / Render / VPS |
| Frontend Deploy | Vercel / Netlify |
| Cache | Redis (for production) |
Common Pitfalls in Strapi Development
N+1 queries are one of the most frequent issues. By default, Strapi does not populate relations, so without explicit ?populate=* you get only IDs. But even with populate, chain loading can occur. Solution: use nested populate for specific fields and enable Redis caching. Another challenge is the response format. In Strapi 4, data is wrapped in { data: { id, attributes } }; in version 5 it is flat. This must be accounted for on the front end during migration. Also, improper role configuration can expose unauthorized API access. We guarantee secure configuration with thorough testing.
Our Process for Strapi Projects
- Analysis — review content model requirements, permissions, and integrations.
- Design — create content types, set up media storage, prepare schema.
- Development — write custom controllers, plugins, lifecycle hooks.
- Integration — connect to frontend (Next.js, Nuxt, Vue), configure ISR.
- Testing — load tests, permission checks, data migration validation.
- Deployment — deploy to your hosting or cloud, configure CI/CD.
- Documentation — API description, editor instructions, launch checklist.
What's Included in Your Strapi Project
- Project documentation (architecture diagram, API docs, admin guide)
- Admin panel credentials and user setup
- One training session for your team (up to 2 hours)
- Source code repository with full history
- Deployment guide and CI/CD pipeline
- 30-day post-launch support (bug fixes, minor adjustments, monitoring)
- 1-year warranty on code quality and security
Installation and Configuration
# Quickstart with SQLite or PostgreSQL
npx create-strapi-app@latest my-project --quickstart
# Or with PostgreSQL:
npx create-strapi-app@latest my-project \
--dbclient=postgres \
--dbhost=localhost \
--dbport=5432 \
--dbname=strapi_db \
--dbusername=strapi \
--dbpassword=pass
cd my-project && npm run develop
Designing Content Types
Content types are created via Content-Type Builder in the admin panel or manually through JSON. Example schema for an article:
{
"kind": "collectionType",
"collectionName": "articles",
"info": {
"singularName": "article",
"pluralName": "articles",
"displayName": "Article"
},
"attributes": {
"title": { "type": "string", "required": true },
"slug": { "type": "uid", "targetField": "title" },
"content": { "type": "richtext" },
"excerpt": { "type": "text", "maxLength": 500 },
"publishedAt": { "type": "datetime" },
"cover": { "type": "media", "multiple": false, "required": false, "allowedTypes": ["images"] },
"category": { "type": "relation", "relation": "manyToOne", "target": "api::category.category" },
"tags": { "type": "relation", "relation": "manyToMany", "target": "api::tag.tag" },
"author": { "type": "relation", "relation": "manyToOne", "target": "plugin::users-permissions.user" }
}
}
REST API from the Box
# Get list of articles with populate
GET http://localhost:1337/api/articles?populate=cover,category,author
# Filtering, sorting, pagination
GET /api/articles?filters[category][slug][$eq]=tech&sort=publishedAt:desc&pagination[pageSize]=10
# Search by title
GET /api/articles?filters[title][$containsi]=javascript
Connecting Strapi to Next.js with ISR
// lib/strapi.ts
const STRAPI_URL = process.env.STRAPI_URL || 'http://localhost:1337'
const API_TOKEN = process.env.STRAPI_API_TOKEN
export async function fetchStrapi<T>(
endpoint: string,
options?: RequestInit
): Promise<T> {
const response = await fetch(`${STRAPI_URL}/api${endpoint}`, {
headers: {
Authorization: `Bearer ${API_TOKEN}`,
'Content-Type': 'application/json',
},
next: { tags: [endpoint.split('/')[1]] },
...options,
})
if (!response.ok) {
throw new Error(`Strapi API error: ${response.status}`)
}
const data = await response.json()
return data
}
For ISR, add a webhook in Strapi: Settings → Webhooks → Next.js endpoint URL. When a record changes, Strapi sends a POST with the model, and Next.js regenerates the cache. See the Next.js revalidation guide for fine-tuning.
// app/api/revalidate/strapi/route.ts
import { revalidateTag } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'
export async function POST(req: NextRequest) {
const body = await req.json()
const { model } = body
revalidateTag(model)
return NextResponse.json({ revalidated: true })
}
Important Considerations
-
Response format: In Strapi 4 data is wrapped in
{ data: { id, attributes } }, in version 5 it is flat. -
Populate: Relations are not populated by default; always use
?populate=*or specific fields. -
Drafts: Use
?publicationState=livefor published and?publicationState=previewwith a token for drafts.
Comparison of Strapi versions:
| Aspect | Strapi 4 | Strapi 5 |
|---|---|---|
| Response format | Wrapped: data.id, data.attributes |
Flat: data.id, data.title |
| GraphQL | Built-in | Separate plugin |
| Plugins | Built-in marketplace | Modular system |
| Admin panel | React | Next.js |
Launch checklist for Strapi projects
- [ ] Create content types and set permissions
- [ ] Connect media storage (Cloudinary/S3)
- [ ] Configure webhooks for ISR
- [ ] Optimize cache (Redis)
- [ ] Perform load testing
- [ ] Set up backups