Stack is nextJS/react/typescript. I have a bunch of blog posts that I can dynamically set routes for no problem. However, I want to build some pages that do not use markdown. I haven't had much luck finding any good code examples. It seems like all of them use Remark/Grey Matter. I've been trying to reverse-engineer this official example but with no luck. So far, I can get work/index.tsx to map through all of the case studies, but I can't get it to route to the correct page. I'll save you code examples because it's so noodley from me debugging. code examples are basically several different versions of the example's code but without markdownToHtml stripped. I figure the solution is more of a specific technique than a block of code.
File Hierarchy:
_case-studies/
│ caseStudyA.tsx
│ caseStudyB.tsx
│ caseStudyC.tsx
pages/
│ work/
│ │ index.tsx
│ │ case-studies/
│ │ │ [case-study].tsx
lib/
│ api_case-studies.tsx
types/
│ caseStudy.tsx
EDIT (CLARIFICATION):
The pages all have unique content as in it's not your typical passing of props to a [case-study] where the layout looks the same but I do something like {caseStudy.title} to simply update the title.
Okay, so, for now let's totally scrap the idea of markdown and pretend I never mentioned it. My new file structure is as following:
– lib/
– api_case-study.tsx
– pages/
– work/
– index.tsx
– [case-study]
– case-studies/
– ExampleA.tsx
– ExampleB.tsx
– ExampleC.tsx
On the index.tsx it would loop through all the case-studies. I can get it to do that now and get all the slugs and link to them, but I can't get it to return the title prop and I can't get the page itself to render without just loading the predefined layout of [case-study]. Does that make sense?
EDIT 2 (Code Example):
Here's the current state of my code, plz be gentle: github gist note: I switched the naming conventions from 'case-study' to 'project' since the original post
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.