Introduction
If you have ever wondered how you can introduce dynamic meta data into your projects using next JS, then this article is exactly what you’ve been looking for! I have recently built this into my personal site www.stevengodson.com which is built using NextJS and Strapi CMS. The same principle will work with any NextJS project that consumes data from a CMS.
Getting started
The first thing I did when I approached trying to do this was to ensure that I had the correct setup in my Layout component. This is the component that wraps all of the content within the pages of this site and uses the Head component of NextJS to allow for the passing of different values for the meta data e.g. title, description and keywords which Are the main three time using.
Although it is not essential, it is a good idea to add default props layout values for the meta data that you want cover. This is shown In the bottom of the screen.
Following that I updated the [slug] page, which is the page that displays an individual article when you click on the card, specifically where you can see that I find it in title, description and keywords and pointed the value to 3 unique fields within the post content that is being extracted from the Strapi CMS.
this allowed me to pass in the values that I want, which is stored within each individual articles record in the database.
By doing this you can create unique titles for each of your articles, which allows your audience to save them with meaningful titles without having to type something in.
You can also add in whatever page description and keywords they want, therefore making each individual article more usable to search engines.
Once this was done all I needed to was to create the three fields within the article record structure in Strapi CMS (metaTitle, metaDesc and metaKey). The name of the fieldstone really matter, as long as it is meaningful to you and to whoever you may be getting to support implementation going forwards.
At this stage you are in a position to test your code works as expected. I recommend using the Chrome dev tools. If you implement this correctly you should see the following:
and
as you will see each of my articles on this site have their own unique titles and meta data. I hope you found this useful and gives you some inspiration to implement into your own projects.