Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update Contentful example for App Router. (#54205)
This PR updates the `cms-contentful` example to use: - App Router - TypeScript - Draft Mode (previously Preview Mode) - ISR / Data Cache (revalidations through `revalidateTag`) Further, it combines many separate files into more manageable single files, and tries to better bucket provider-specific logic into the `lib/` folder. I'm hoping this can be the foundation for re-writing the rest of the `cms-*` examples to use App Router. Overall, the code is much easier to reason about IMO. Pretty happy with the change. I sprinkled some `any`'s throughout here, but if someone wants to make it better, go for it! https://app-router-contentful.vercel.app/
- Loading branch information
Showing
71 changed files
with
539 additions
and
825 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { draftMode } from 'next/headers' | ||
|
||
export async function GET(request: Request) { | ||
draftMode().disable() | ||
return new Response('Draft mode is disabled') | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { draftMode } from 'next/headers' | ||
import { redirect } from 'next/navigation' | ||
import { getPreviewPostBySlug } from '../../../lib/api' | ||
|
||
export async function GET(request: Request) { | ||
const { searchParams } = new URL(request.url) | ||
const secret = searchParams.get('secret') | ||
const slug = searchParams.get('slug') | ||
|
||
if (secret !== process.env.CONTENTFUL_PREVIEW_SECRET) { | ||
return new Response('Invalid token', { status: 401 }) | ||
} | ||
|
||
const post = await getPreviewPostBySlug(slug) | ||
|
||
if (!post) { | ||
return new Response('Invalid slug', { status: 401 }) | ||
} | ||
|
||
draftMode().enable() | ||
redirect(`/posts/${post.slug}`) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { NextRequest, NextResponse } from 'next/server' | ||
import { revalidateTag } from 'next/cache' | ||
|
||
export async function POST(request: NextRequest) { | ||
const requestHeaders = new Headers(request.headers) | ||
const secret = requestHeaders.get('x-vercel-reval-key') | ||
|
||
if (secret !== process.env.CONTENTFUL_REVALIDATE_SECRET) { | ||
return NextResponse.json({ message: 'Invalid secret' }, { status: 401 }) | ||
} | ||
|
||
revalidateTag('posts') | ||
|
||
return NextResponse.json({ revalidated: true, now: Date.now() }) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import ContentfulImage from '@/lib/contentful-image' | ||
|
||
export default function Avatar({ | ||
name, | ||
picture, | ||
}: { | ||
name: string | ||
picture: any | ||
}) { | ||
return ( | ||
<div className="flex items-center"> | ||
<div className="mr-4 w-12 h-12"> | ||
<ContentfulImage | ||
alt={name} | ||
className="object-cover h-full rounded-full" | ||
height={48} | ||
width={48} | ||
src={picture.url} | ||
/> | ||
</div> | ||
<div className="text-xl font-bold">{name}</div> | ||
</div> | ||
) | ||
} |
20 changes: 16 additions & 4 deletions
20
.../cms-contentful/components/cover-image.js → examples/cms-contentful/app/cover-image.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
examples/cms-contentful/components/date.js → examples/cms-contentful/app/date.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
2 changes: 0 additions & 2 deletions
2
examples/cms-contentful/styles/index.css → examples/cms-contentful/app/globals.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,3 @@ | ||
/* purgecss start ignore */ | ||
@tailwind base; | ||
@tailwind components; | ||
/* purgecss end ignore */ | ||
@tailwind utilities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import Link from 'next/link' | ||
import Avatar from './avatar' | ||
import DateComponent from './date' | ||
import CoverImage from './cover-image' | ||
|
||
function PostPreview({ | ||
title, | ||
coverImage, | ||
date, | ||
excerpt, | ||
author, | ||
slug, | ||
}: { | ||
title: string | ||
coverImage: any | ||
date: string | ||
excerpt: string | ||
author: any | ||
slug: string | ||
}) { | ||
return ( | ||
<div> | ||
<div className="mb-5"> | ||
<CoverImage title={title} slug={slug} url={coverImage.url} /> | ||
</div> | ||
<h3 className="text-3xl mb-3 leading-snug"> | ||
<Link href={`/posts/${slug}`} className="hover:underline"> | ||
{title} | ||
</Link> | ||
</h3> | ||
<div className="text-lg mb-4"> | ||
<DateComponent dateString={date} /> | ||
</div> | ||
<p className="text-lg leading-relaxed mb-4">{excerpt}</p> | ||
{author && <Avatar name={author.name} picture={author.picture} />} | ||
</div> | ||
) | ||
} | ||
|
||
export default function MoreStories({ morePosts }: { morePosts: any[] }) { | ||
return ( | ||
<section> | ||
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight"> | ||
More Stories | ||
</h2> | ||
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32"> | ||
{morePosts.map((post) => ( | ||
<PostPreview | ||
key={post.slug} | ||
title={post.title} | ||
coverImage={post.coverImage} | ||
date={post.date} | ||
author={post.author} | ||
slug={post.slug} | ||
excerpt={post.excerpt} | ||
/> | ||
))} | ||
</div> | ||
</section> | ||
) | ||
} |
Oops, something went wrong.