Top Tags

Update to NextJs 15 slug params

This document explains the update to NextJs 15 slug params and addresses the issues related to unresolved variables `fs` and `path`.

Function like this

typescript
1export default async function Docs({
2 params,
3}: {
4 params: { docSlug: string };
5}) {
6 const content = await fs.readFile(
7 path.join(process.cwd(), "src/docs", `${params.docSlug}.mdx`),
8 "utf-8"
9 );
10}

On using slug params got error

bash
1Type error: Type '{ params: { docSlug: string; }; }' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible.

Easy fix based on upgrade guide https://nextjs.org/docs/app/building-your-application/upgrading/version-15#async-request-apis-breaking-change

typescript
1export default async function Docs({
2 params,
3}: {
4 params: Promise<{ docSlug: string }>;
5}) {
6 const { docSlug } = await params;
7 const content = await fs.readFile(
8 path.join(process.cwd(), "src/docs", `${docSlug}.mdx`),
9 "utf-8"
10 );
11}