baileykane.co
this repo has no description
www.baileykane.co/
Create basic blog post page
+37
app/blog/[slug]/page.tsx
+37
app/blog/[slug]/page.tsx
···
···
1
+
import BlogPost from "@/components/pageContent/blog/BlogPostPage";
2
+
import { importCSVDataAsJson } from "@/lib/sheetsConnector";
3
+
import type BlogPostType from "@/types/BlogPost";
4
+
import { Params } from "next/dist/server/request/params";
5
+
6
+
export default async function Page({ params }): Promise<React.ReactElement> {
7
+
const blogPost = await getBlogPost(params);
8
+
9
+
return <BlogPost blogPost={blogPost} />;
10
+
}
11
+
12
+
async function getBlogPost(params: Params): Promise<BlogPostType> {
13
+
const { slug } = await params;
14
+
15
+
const blogPostsList = await importCSVDataAsJson(
16
+
process.env.NEXT_PUBLIC_BLOG_POST_URL
17
+
);
18
+
19
+
// TODO: Pulling all data just to search for the one that matches the slug is inefficient.
20
+
// Consider pulling these once, elsewhere, and passing the correct item to this component.
21
+
// Followup: This might be irrelevant now that it's fetched server-side.
22
+
const blogPost = blogPostsList.data.find(
23
+
(blogPost) => blogPost.slug === slug
24
+
);
25
+
26
+
return blogPost;
27
+
}
28
+
29
+
export async function generateStaticParams(): Promise<Array<any>> {
30
+
const blogPostsList = await importCSVDataAsJson(
31
+
process.env.NEXT_PUBLIC_BLOG_POST_URL
32
+
);
33
+
34
+
return blogPostsList.data.map((blogPost) => ({
35
+
slug: blogPost.slug,
36
+
}));
37
+
}