mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Manoraj KandGitHub
8669b07f19
### What?
Fix the `cms-contentful` example to use the async APIs introduced in
Next.js 15:
- Await `draftMode()` in `app/page.tsx`, `app/posts/[slug]/page.tsx`,
and
`app/api/disable-draft/route.ts`
- Update `params` type to `Promise<{ slug: string }>` and await it in
`app/posts/[slug]/page.tsx`
### Why?
In Next.js 15, `draftMode()` from `next/headers` became async and must
be awaited.
Page `params` are also now typed as a `Promise`. The example was using
the old
synchronous patterns, causing the build to fail and the app to not work
when running against the latest
version of Next.js -- this example project uses latest version of
next.js in the package.json.
### How?
Awaited `draftMode()` at each call site and updated the `params` type
signature to
`Promise<{ slug: string }>` with a corresponding `await`.
Closes NEXT-
Fixes #
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import Link from "next/link";
|
|
import { draftMode } from "next/headers";
|
|
|
|
import MoreStories from "../../more-stories";
|
|
import Avatar from "../../avatar";
|
|
import Date from "../../date";
|
|
import CoverImage from "../../cover-image";
|
|
|
|
import { Markdown } from "@/lib/markdown";
|
|
import { getAllPosts, getPostAndMorePosts } from "@/lib/api";
|
|
|
|
export async function generateStaticParams() {
|
|
const allPosts = await getAllPosts(false);
|
|
|
|
return allPosts.map((post) => ({
|
|
slug: post.slug,
|
|
}));
|
|
}
|
|
|
|
export default async function PostPage({ params }: PageProps<"/posts/[slug]">) {
|
|
const { isEnabled } = await draftMode();
|
|
const { slug } = await params;
|
|
const { post, morePosts } = await getPostAndMorePosts(slug, isEnabled);
|
|
|
|
return (
|
|
<div className="container mx-auto px-5">
|
|
<h2 className="mb-20 mt-8 text-2xl font-bold leading-tight tracking-tight md:text-4xl md:tracking-tighter">
|
|
<Link href="/" className="hover:underline">
|
|
Blog
|
|
</Link>
|
|
.
|
|
</h2>
|
|
<article>
|
|
<h1 className="mb-12 text-center text-6xl font-bold leading-tight tracking-tighter md:text-left md:text-7xl md:leading-none lg:text-8xl">
|
|
{post.title}
|
|
</h1>
|
|
<div className="hidden md:mb-12 md:block">
|
|
{post.author && (
|
|
<Avatar name={post.author.name} picture={post.author.picture} />
|
|
)}
|
|
</div>
|
|
<div className="mb-8 sm:mx-0 md:mb-16">
|
|
<CoverImage title={post.title} url={post.coverImage.url} />
|
|
</div>
|
|
<div className="mx-auto max-w-2xl">
|
|
<div className="mb-6 block md:hidden">
|
|
{post.author && (
|
|
<Avatar name={post.author.name} picture={post.author.picture} />
|
|
)}
|
|
</div>
|
|
<div className="mb-6 text-lg">
|
|
<Date dateString={post.date} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-2xl">
|
|
<div className="prose">
|
|
<Markdown content={post.content} />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<hr className="border-accent-2 mt-28 mb-24" />
|
|
<MoreStories morePosts={morePosts} />
|
|
</div>
|
|
);
|
|
}
|