Hey,
While I was testing out the portfolio, I noticed something.
If you go to https://portfolio-magicui.vercel.app/blog/hello-world the app will work as expected. But if you go to https://portfolio-magicui.vercel.app/blog/hello-world1 the app will show an Application error
![Screenshot 2024-08-02 022241](https://private-user-images.githubusercontent.com/54446422/354420245-2fecc90f-e306-4512-8b0a-2ed0db26202a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM2MTcwNzcsIm5iZiI6MTcyMzYxNjc3NywicGF0aCI6Ii81NDQ0NjQyMi8zNTQ0MjAyNDUtMmZlY2M5MGYtZTMwNi00NTEyLThiMGEtMmVkMGRiMjYyMDJhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE0VDA2MjYxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThmYjI4NWZiMTQ1ODIyODUxZmUxZDYyYzhlZjgzYTUyNTdiZmQwMWUwMDI5MmM3ZTNmMjhlYzE2MjNkYmRlYzgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.EFWJFPud1bzpn_zWto6vtPcL-U2i49GfM-WTSpTi1Os)
This happens because of this line in src/app/blog/[slug]/page.tsx
:
let post = await getPost(params.slug);
if (!post) {
notFound();
}
To be more specific. The error will appear because of the return of getPost()
, which is this code:
export async function getPost(slug: string) {
const filePath = path.join("content", `${slug}.mdx`);
let source = fs.readFileSync(filePath, "utf-8");
const { content: rawContent, data: metadata } = matter(source);
const content = await markdownToHTML(rawContent);
return {
source: content,
metadata,
slug,
};
}
If there is no hello-world1.mdx
in the content
folder, the function will crash and invoke the server side error.
Solution / Fix
To fix this problem, I changed the function into this:
export async function getPost(slug: string) {
try {
const filePath = path.join("content", `${slug}.mdx`);
let source = fs.readFileSync(filePath, "utf-8");
const { content: rawContent, data: metadata } = matter(source);
const content = await markdownToHTML(rawContent);
return {
source: content,
metadata,
slug,
};
} catch (error) {
return {
source: null,
metadata: null,
slug: null,
};
}
}
Now go to src/app/blog/[slug]/page.tsx
and change this line
if (!post) {
notFound();
}
To this
if (!post.slug) {
notFound();
}
Your src/app/blog/[slug]/page.tsx
should now look like this:
let post = await getPost(params.slug);
if (!post.slug) {
notFound();
}
The generateMetaData
should look like this
export async function generateMetadata({
params,
}: {
params: {
slug: string;
};
}): Promise<Metadata | undefined> {
let post = await getPost(params.slug);
if(post.source) {
let {
title,
publishedAt: publishedTime,
summary: description,
image,
} = post.metadata;
let ogImage = image ? `${DATA.url}${image}` : `${DATA.url}/og?title=${title}`;
return {
title,
description,
openGraph: {
title,
description,
type: "article",
publishedTime,
url: `${DATA.url}/blog/${post.slug}`,
images: [
{
url: ogImage,
},
],
},
twitter: {
card: "summary_large_image",
title,
description,
images: [ogImage],
},
};
}
}
If you now go to a blog that doesn't exist, you will see the Error 404 - Page not Found
Page and no error.