Why Strapi is the Best Headless CMS for Next.js Development
Let’s explore how Strapi combined with Next.js help with the best headless CMS solution in this advanced web development.
Why is Strapi called headless CMS?
The answer for that is that Strapi is an individual content management backend system wherein you can create, manage and store your contents separately than frontend. Which allows frontend users to use their preferred technology including Next.js, react, Vue or even mobile apps with the help of Strapi API.
Strapi is popular for modern web development because It allows developers to choose their preferred best tools for the frontend having Strapi as a powerful content management system at a backend. Integrating Next.js enhances the Strapi app with server-side rendering which is helpful for better SEO and performance. Due to Strapi’s scalability Next.js app can manage any level of content complexity with ease which also helps improve performance and dependability.
Using Strapi alongside Next.js allows you to create websites which are both static as well as Dynamic, Static like a blog homepages and Dynamic websites like a personalized Dashboard. Which is very efficient in a way for seamless and high-performance web experience.
Key Components of Strapi
Content Types: It allows to create single types as well as collection type contents. Single type is unique content like “About Us” or “Contact Us” pages. Which is a separate content entry. While collection type is multiple content entries like blogging posts, products, categories etc. In this we can have the same set of fields with variation in content.
API: Strapi allows developers to create Static as well as GraphQL APIs relating to their content. Which allows developers to easily fetch and modify your data or content from any frontend tool.
Settings: It allows developers to customize applications as per their requirements which includes database configuration, email settings, API configurations, assignments of roles to users.
A Quick guide to building a collection in Strapi: Creating and managing content in Strapi is so easy with its user-friendly interface.
First you need to navigate to the content type builder section on Strapi Dashboard to add a new collection.
- Then you need to click on “Create new collection type”. There is an option to create single types too.
- You can enter a display name and then add fields like content, page description, slug and title.
- You can save your collection and it will restart automatically.
- Navigate to the content manager and then your newly created collection, you will get an option to create a new entry within that collection.
- Make sure you save newly created entries before publishing the data else it will remain as a draft.
- Once done navigate to the setting option in the dashboard and click on roles. Under the public section you can set the permissions to view your content.
- On the same page you will find API Endpoint for integration.
Integrating Strapi CMS With Next.js to create dynamic pages
You would need to run below command to install Strapi.
npx create-next-app myproject
Now to Run the Next.js project you would have to execute command as per below
npm run dev
Now add the code as per below inside pages/[slug].js to dynamically call pages and show date based on that page.
import { notFound } from 'next/navigation'
// Define the props type for the page component
type PageProps = {
params: {
slug: string
}
}
// Function to fetch data from Strapi
async function fetchPageData(slug: string) {
const apiUrl = process.env.STRAPI_API_URL || 'http://localhost:1337'
const res = await fetch(`${apiUrl}/api/pages?filters[slug]=${slug}&populate=*`, {
next: { revalidate: 60 }
})
if (!res.ok) {
throw new Error('Failed to fetch data')
}
const data = await res.json()
return data.data[0]
}
export default async function DynamicPage({ params }: PageProps) {
const pageData = await fetchPageData(params.slug)
if (!pageData) {
notFound()
}
return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-4">{pageData.attributes.title}</h1>
<div className="prose" dangerouslySetInnerHTML={{ __html: pageData.attributes.content }} />
</div>
)
}
// Generate static params for known slugs
export async function generateStaticParams() {
const apiUrl = process.env.STRAPI_API_URL || 'http://localhost:1337'
const res = await fetch(`${apiUrl}/api/pages`)
const pages = await res.json()
return pages.data.map((page: any) => ({
slug: page.attributes.slug,
}))
}
As we have used Strapi CMS with Next.js data using the public route, instead we can use the “Authenticated” route from the same setting section. Which is a more secure alternative. You can create API tokens with full or partial access In the selected collection. Option is available in Dashboard, navigate to settings and API tokens.
Combining Strapi CMS with Next.js is a fantastic thing for building and dynamic websites. Strapi headless CMS simplifies content management and API developments while Next.js is helpful for server side rendering and dynamic routing for the frontend. Both combined make the development process streamline, which is helpful in making fast and data driven websites or applications. Which helps developers create complex web applications which are scalable, maintainable, flexible. Strapi CMS with Next.js is an excellent combination to create an impressive web experience.