Using dynamicIO with generateStaticParams().
Unanswered
jakmaz posted this in #help-forum
jakmazOP
Hello, is it possible to generate static slugged pages with dynamicIO?
This is the way that I was doing it before introducing dynamicIO to my project. It simply gets all the journal posts that are located in the project as .md files.
But obviously, because of async params, I kept getting the error that i have to use cache or suspense boundary.
This is the way that I was doing it before introducing dynamicIO to my project. It simply gets all the journal posts that are located in the project as .md files.
//app/journal/[slug]/page.tsx
import { PostHeader } from "@/components/journal/post-header";
import markdownStyles from "@/components/markdown-styles.module.css";
import markdownToHtml from "@/lib/markdown";
import { getAllJournalPosts, getJournalPostBySlug } from "@/lib/postsLoaders"; // Adjust to import the correct journal functions
import { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
type Params = {
slug: string;
};
export default async function JournalPost(props: { params: Promise<Params> }) {
const params = await props.params;
const post = getJournalPostBySlug(params.slug);
if (!post) {
return notFound();
}
const content = await markdownToHtml(post.content || "");
return (
<div className="flex flex-col gap-2">
<Link href="/journal" className="text-gray-600 hover:text-gray-900">
Back
</Link>
<PostHeader post={post} />
<div
dangerouslySetInnerHTML={{ __html: content }}
className={markdownStyles["markdown"]}
/>
</div>
);
}
export async function generateMetadata(props: { params: Promise<Params> }): Promise<Metadata> {
const params = await props.params;
const post = getJournalPostBySlug(params.slug); // Use journal-specific function
if (!post) {
return notFound();
}
const title = post.title;
return {
title,
};
}
export async function generateStaticParams() {
const posts = getAllJournalPosts(); // Fetch all journal posts
return posts.map((post) => ({
slug: post.slug,
}));
}But obviously, because of async params, I kept getting the error that i have to use cache or suspense boundary.
1 Reply
jakmazOP
Then I tried removing the generate methods and adding cache above, now I got different error.
Error: Filling a cache during prerender timed out, likely because request-specific arguments such as params, searchParams, cookies() or dynamic data were used inside "use cache".
Is there a way of implementing it properly now?
//app/journal/[slug]/page.tsx
"use cache";
import { PostHeader } from "@/components/journal/post-header";
import markdownStyles from "@/components/markdown-styles.module.css";
import markdownToHtml from "@/lib/markdown";
import { getJournalPostBySlug } from "@/lib/postsLoaders"; // Adjust to import the correct journal functions
import Link from "next/link";
import { notFound } from "next/navigation";
type Params = {
slug: string;
};
export default async function JournalPost(props: { params: Promise<Params> }) {
const params = await props.params;
const post = getJournalPostBySlug(params.slug);
if (!post) {
return notFound();
}
const content = await markdownToHtml(post.content || "");
return (
<div className="flex flex-col gap-2">
<Link href="/journal" className="text-gray-600 hover:text-gray-900">
Back
</Link>
<PostHeader post={post} />
<div
dangerouslySetInnerHTML={{ __html: content }}
className={markdownStyles["markdown"]}
/>
</div>
);
}Error: Filling a cache during prerender timed out, likely because request-specific arguments such as params, searchParams, cookies() or dynamic data were used inside "use cache".
Is there a way of implementing it properly now?