Contentful 101 with Next.js 14.2 & Leveraging App Router
NextJs 14.2
The latest release of Next.js, version 14.2, had significant enhancements like the Turbopack which turbocharges local development with up to 76.7% faster server startup and 96.3% quicker code updates. Memory reduction, CSS chunking optimizations, configurable caching invalidation periods, and more!
Contentful: A headless CMS
In simple terms, CMS is a Content Management System, so the content you see on these big companies' websites goes through a lot of review processes and keeps getting updated. We won’t do a code change for every line of new content, it just does not make sense. That’s where CMS comes in to manage that content.
Now what does it mean for you as a software engineer?
You write all your code, as generic components, combine them into slices and map on the content model you create in Contentful. Your component in React will have the same fields as you created in Contentful once you parse it out.
I am not covering setting up Contentful tokens and all, pretty straightforward, they have their docs for that here.
Setting up Content Models in Contentful
Now, set up your Content Models and their fields. Some common content models you set up are Site Config, Pages, Headers and Footer.
Site Config will be responsible for your metadata, homepage and navigation items from the homepage. Header and Footers will have links and other content.
When you design something like this, you have to think of your webpage now as slices, like rectangular strips from left to right, like in WordPress. You add these slices in contentful in your content model and will pick up those slices to render.
Leveraging App Router, now you can use some nice features by next js i.e. app router, which uses your folder structure to create the pages associated with it. It also pre-renders the pages if you hover over the links for that page and stores it in the cache for fast rendering.
You can create dynamic pages in app-router, using Contentful, by using your folder structure. This will let you create new pages right in contentful and no code change is required until you are reusing the previous content models. The [slug] will be a field in the page content model.
app/[slug]
or
app/[slug]/[slug] # you can use this for nested pages.Soon, I will update it with my GitHub repo link, which has all this implemented.
#reactjs #nextjs #contentful #cms #nextjs14.2
Credits:
