How to get dynamic content without using Remark/Grey Matter
You try to export constants like title
from your pages inside /case-studies/
, but then inside your getStaticPaths
in api_project.tsx
you can't really access those variables inside getProjectBySlug
because you do not export them like export const title = "title"
(getStaticProps
is used to fetch data to build the page, not to export props or anything like that).
I assume you want to fetch this metadata dynamically, so if you don't want to use gray-matter and exporting variables isn't really an option since you'd need to use dynamic JS imports which would be an overkill, I'd advise you to either use a free and hosted CMS like contentful and then store and fetch the project metadata in there, or simply create a directory like /data/case-studies-meta.json
with a setup like:
[
{
slug: "ExampleA",
title: "Title of Example A"
},
{
slug: "ExampleB",
title: "Title of Example B"
}
]
Assuming you have the two Pages ExampleB.tsx
and ExampleA.tsx
inside case-studies
.
And then import it inside your api_project.tsx
file:
const ProjectMeta = require("./data/case-studies-meta.json"); // adjust path to directory structure
and inside your getProjectBySlug
, you can now look up the metadata based on the slug you're passing to it. Keep in mind that you'll need to ensure that the slug inside /data/case-studies-meta.json
is the same as the actual file-name of the case study .tsx
page(s):
ProjectMeta.forEach((entry) => {
if(entry.slug.toLowerCase() === slug.replace(/\.tsx$/, '').toLowerCase(){
items.title = entry.title;
// or make the items a let and do items = {...post} to copy all keys
}
})
This should work, but it's not really optimal since you need to remember to update the slug inside data/case-studies-meta.json
each time you rename/delete/add a new page inside case-studies
.