Nextjs Content Management, Quo Vadis?

You plan to start a new business where you need to present your new products to a broader audience on a marketing website.

Or you just want to publish a new blog with Images and Videos where you can share your thoughts and experiences.

But what is the correct platform nowadays?

Well, there are thousands of viable solutions out in the market. It depends on what you plan to achieve.

There are out-of-the-box solutions with plenty of templates like wix.com, jimdo.com, weebly.com, etc., great for non-technical people and with low content control and flexibility requirements.

If you need more control over your website/blog and features should not be limited, then I would recommend a different approach.

Luckily in 2024, there are solutions on the market, that give you full control over the code and content with ZERO costs.

Next.js from Vercel

The web framework Next.js from Vercel is only one solution, but it offers all that you need. If you follow our tutorials, you have all that you need even if you are not so technical.

You receive full access to our GitHub code and we show the complete project lifecycle, from creation to deployment.

And the best of all is the price, which is ZERO.

In today’s digital landscape, having a reliable content management system (CMS) for Next.js development is one of the key factors. So we need a “next js cms”? Of course, we do ;-)

What is the best CMS for Next.js?

A headless CMS like Contentful or Strapi can provide the flexibility and performance needed for Next.js projects. With their user-friendly interfaces, these platforms make it simple to deliver content to your Next.js applications.

Plus, their integration with GraphQL makes it easy to pull in data and customize your content seamlessly.

With the right CMS for your Next.js project, you can create an engaging digital experience for your users.

Benefits of using a CMS with Next.js

• Streamlined development process

• Seamless integration with Next.js

• Easy content management capabilities

• Handling different languages

Best CMS for Next.js

• Contentful

• Prismic

• Sanity

• Strapi

• Storyblok

• Complete list from Vercel -> How to Use a Headless CMS with Vercel

Next.js Headless CMS

Advantages of Headless CMS with Next js

• Separation of content from presentation

• Content Model creation

• Integrated content editor with preview functionality

• Reduced build time

• Create content items like blog posts, articles, tutorials, etc.

• Flexibility in content delivery

• Ideal for omnichannel content distribution

What comes after the selection of the “Best Cms for Nextjs”

You have to prepare the needed content model or types for the landing pages, and the pages for the blog posts, etc.

Creating content is then the hard part and time-consuming part at the end of the process. The selected next js content management system will support you regarding the different content operations like

• Content translation

• Creating SEO-optimized content

• Preparing the media assets (image formats, videos, etc.)

• Providing the content for different channels

• Content preview (different viewports, draft preview)

Deploy your project

I tried many different service providers for the hosting part of my various projects. But if you use next js I would recommend using Vercel because it was by far the easiest regarding:

• Project setup/import via GitHub

• Fast build time

• Generous Free Plan

• Out-of-the-box extensions for tools like checkly.com, mongodb.com, and many many more

I tested Azure App Service and Netlify too, but after many tests, I decided to go with Vercel.

Let’s start with the implementation

Now we talked a lot about topics like “the best cms for nextjs / headless cms with next js”.

Let’s come to concrete steps and easy-to-follow tutorials and deliver content. Getting some hands-on experience is the best way to become more familiar with the mentioned technologies.

Project creation from scratch with Nextjs 14 and Typescript

Full Step-by-Step Tutorial -> Nextjs 14 - Typescript App-Router Contentful - Teil 1

Github Repo -> GitHub - cloudapp-dev/nextjs14-typescript-app-router-contentful at contentful_part1

Frontend styling with Tailwind CSS and adding new pages/components

Full Step-by-Step Tutorial -> Next.js 14 - Typescript / Tailwindcss / Contentful - Teil 2

Github Repo -> GitHub - cloudapp-dev/nextjs14-typescript-app-router-contentful at nextjs14-part2

New Content Types, GraphQL Deep Dive, and Content Preview with Contentful

Full Step-by-Step Tutorial -> Next.js 14 - Header Footer Tailwindcss Contentful - Teil 3

Github Repo -> GitHub - cloudapp-dev/nextjs14-typescript-app-router-contentful at nextjs14-part3

Demo Page -> Create Cloudapp.dev Example App

Custom 404 page and Custom Loading UI

Full Step-by-Step Tutorial -> Next.js 14 - 404 Seite, Lade UI, TailwindCss - Part 4

Github Repo -> GitHub - cloudapp-dev/nextjs14-typescript-app-router-contentful at nextjs14-part4

Demo Page -> Create Cloudapp.dev Example App

Adding Internationalization/Multilanguage with Contentful/GraphQL

Full Step-by-Step Tutorial

Full Step-by-Step Tutorial -> Next.js 14- Mehrsprachigkeit mit Contentful/Graphql - Teil 5

Github Repo -> GitHub - cloudapp-dev/nextjs14-typescript-app-router-contentful at nextjs14-part5

Demo Page -> Example Blog

Additional tutorials already in preparation

And here the journey is not finished yet, we will go ahead with the following topics:

• New content models (deeper integration of our next cms)

• Integration of an On-Site-Search powered by Algolia

• Full SEO optimization (Sitemap, Meta-Tags, Json-LD, etc.)

• Integration of Azure Entra ID (Registration & Login)

• Connecting external DB’s via ORM Prisma

• Custom Dashboard Creation

• PWA Solution

• Integration of Upstash services for Redis/Kafka

• Integration of Pusher.js for a Whatsapp Clone

• and a lot more …

Stay tuned if you like what you see, then please support me with a clap and follow me on medium.com