vercel · kodiakhq · Aug 21, 2023 · Aug 18, 2023 · Aug 18, 2023 · Aug 18, 2023
@@ -4,13 +4,13 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
 
 ## Demo
 
-### [https://next-blog-contentful.vercel.app/](https://next-blog-contentful.vercel.app/)
+### [https://app-router-contentful.vercel.app/](https://app-router-contentful.vercel.app/)
 
 ## Deploy your own
 
 Using the Deploy Button below, you'll deploy the Next.js project as well as connect it to your Contentful space using the Vercel Contentful Integration.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-contentful&project-name=nextjs-contentful-blog&repository-name=nextjs-contentful-blog&demo-title=Next.js+Blog&demo-description=Static+blog+with+multiple+authors+using+Preview+Mode&demo-url=https%3A%2F%2Fnext-blog-contentful.vercel.app%2F&demo-image=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1625705016%2Ffront%2Fexamples%2FCleanShot_2021-07-07_at_19.43.15_2x.png&integration-ids=oac_aZtAZpDfT1lX3zrnWy7KT9VA&env=CONTENTFUL_PREVIEW_SECRET&envDescription=Any%20URL%20friendly%20value%20to%20secure%20Preview%20Mode)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-contentful&project-name=nextjs-contentful-blog&repository-name=nextjs-contentful-blog&demo-title=Next.js+Blog&demo-description=Static+blog+with+multiple+authors+using+Draft+Mode&demo-url=https%3A%2F%2Fnext-blog-contentful.vercel.app%2F&demo-image=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1625705016%2Ffront%2Fexamples%2FCleanShot_2021-07-07_at_19.43.15_2x.png&integration-ids=oac_aZtAZpDfT1lX3zrnWy7KT9VA&env=CONTENTFUL_PREVIEW_SECRET&envDescription=Any%20URL%20friendly%20value%20to%20secure%20Draft%20Mode)
 
 ### Related examples
 
@@ -152,7 +152,7 @@ After setting up the content model (either manually or by running `npm run setup
 
 **Content model overview**
 
-![Content model overview](./docs/content-model-overview.png)
+![Content model overview](https://github.com/vercel/next.js/assets/9113740/d3f76907-7046-4d94-b285-eb89b87aa223)
 
 ### Step 4. Populate Content
 
@@ -171,7 +171,7 @@ Next, create another entry with the content type **Post**:
 
 **Important:** For each entry and asset, you need to click on **Publish**. If not, the entry will be in draft state.
 
-![Published content entry](./docs/content-entry-publish.png)
+![Published content entry](https://github.com/vercel/next.js/assets/9113740/e1b4a3fe-45f4-4851-91db-8908d3ca18e9)
 
 ### Step 5. Set up environment variables
 
@@ -188,7 +188,7 @@ Then set each variable on `.env.local`:
 - `CONTENTFUL_SPACE_ID` should be the **Space ID** field of your API Key
 - `CONTENTFUL_ACCESS_TOKEN` should be the **[Content Delivery API](https://www.contentful.com/developers/docs/references/content-delivery-api/) - access token** field of your API key
 - `CONTENTFUL_PREVIEW_ACCESS_TOKEN` should be the **[Content Preview API](https://www.contentful.com/developers/docs/references/content-preview-api/) - access token** field of your API key
-- `CONTENTFUL_PREVIEW_SECRET` should be any value you want. It must be URL friendly as the dashboard will send it as a query parameter to enable preview mode
+- `CONTENTFUL_PREVIEW_SECRET` should be any value you want. It must be URL friendly as the dashboard will send it as a query parameter to enable Next.js Draft Mode
 - - `CONTENTFUL_REVALIDATE_SECRET` should be any value you want. This will be the value you pass in as a secret header from the Contentful Webhook settings to use **[On-Demand Revalidation](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration#on-demand-revalidation)**
 
 Your `.env.local` file should look like this:
@@ -215,29 +215,29 @@ yarn dev
 
 Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
 
-### Step 7. Try preview mode
+### Step 7. Try Draft Mode
 
 In your Contentful space, go to **Settings > Content preview** and add a new content preview for development.
 
 The **Name** field may be anything, like `Development`. Then, under **Content preview URLs**, check **Post** and set its value to:
 
 ```
-http://localhost:3000/api/preview?secret=<CONTENTFUL_PREVIEW_SECRET>&slug={entry.fields.slug}
+http://localhost:3000/api/draft?secret=<CONTENTFUL_PREVIEW_SECRET>&slug={entry.fields.slug}
 ```
 
 Replace `<CONTENTFUL_PREVIEW_SECRET>` with its respective value in `.env.local`.
 
-![Content preview setup](./docs/content-preview-setup.png)
+![Content preview setup](https://github.com/vercel/next.js/assets/9113740/f1383d68-ea2b-4adf-974f-235b8c098745)
 
 Once saved, go to one of the posts you've created and:
 
 - **Update the title**. For example, you can add `[Draft]` in front of the title.
 - The state of the post will switch to **CHANGED** automatically. **Do not** publish it. By doing this, the post will be in draft state.
 - In the sidebar, you will see the **Open preview** button. Click on it!
 
-![Content entry overview](./docs/content-entry-preview.png)
+![Content entry overview](https://github.com/vercel/next.js/assets/9113740/cc0dff9a-c57e-4ec4-85f1-22ab74af2b6b)
 
-You will now be able to see the updated title. To exit preview mode, you can click on **Click here to exit preview mode** at the top of the page.
+You will now be able to see the updated title. To manually exit Draft Mode, you can navigate to `/api/disable-draft` in the browser.
 
 ### Step 8. Deploy on Vercel
 
@@ -253,9 +253,9 @@ To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [
 
 Alternatively, you can deploy using our template by clicking on the Deploy button below.
 
-This will deploy the Next.js project as well as connect it to your Contentful space using the Vercel Contentful Integration. If you are using Preview Mode, make sure to add `CONTENTFUL_PREVIEW_SECRET` as an [Environment Variable](https://vercel.com/docs/environment-variables) as well.
+This will deploy the Next.js project as well as connect it to your Contentful space using the Vercel Contentful Integration. If you are using Draft Mode, make sure to add `CONTENTFUL_PREVIEW_SECRET` as an [Environment Variable](https://vercel.com/docs/concepts/projects/environment-variables) as well.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-contentful&project-name=nextjs-contentful-blog&repository-name=nextjs-contentful-blog&demo-title=Next.js+Blog&demo-description=Static+blog+with+multiple+authors+using+Preview+Mode&demo-url=https%3A%2F%2Fnext-blog-contentful.vercel.app%2F&demo-image=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1625705016%2Ffront%2Fexamples%2FCleanShot_2021-07-07_at_19.43.15_2x.png&integration-ids=oac_aZtAZpDfT1lX3zrnWy7KT9VA&env=CONTENTFUL_PREVIEW_SECRET,CONTENTFUL_REVALIDATE_SECRET&envDescription=Any%20URL%20friendly%20value%20to%20secure%20Your%20App)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-contentful&project-name=nextjs-contentful-blog&repository-name=nextjs-contentful-blog&demo-title=Next.js+Blog&demo-description=Static+blog+with+multiple+authors+using+Draft+Mode&demo-url=https%3A%2F%2Fnext-blog-contentful.vercel.app%2F&demo-image=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1625705016%2Ffront%2Fexamples%2FCleanShot_2021-07-07_at_19.43.15_2x.png&integration-ids=oac_aZtAZpDfT1lX3zrnWy7KT9VA&env=CONTENTFUL_PREVIEW_SECRET,CONTENTFUL_REVALIDATE_SECRET&envDescription=Any%20URL%20friendly%20value%20to%20secure%20Your%20App)
 
 ### Step 9. Try using On-Demand Revalidation
 
@@ -273,21 +273,21 @@ In your Contentful space, go to **Settings > Webhooks** and add a new webhook:
 
 - **Specify Triggers:** You can choose to trigger for all events or specific events only, such as the Publishing and Unpublishing of Entries and Assets, as shown below.
 
-  ![Content webhook url](./docs/content-webhook-url.png)
+  ![Content webhook url](https://github.com/vercel/next.js/assets/9113740/c8df492a-57d6-42a1-8a3c-b0de3d6ad42f)
 
 - **Specify Secret Header:** Add a secret header named `x-vercel-reval-key` and enter the value of the
   `CONTENTFUL_REVALIDATE_SECRET` from before.
 
-  ![Content secret header](./docs/content-secret-header.png)
+  ![Content secret header](https://github.com/vercel/next.js/assets/9113740/574935e6-0d31-4e4f-b914-8b01bdf03d5e)
 
 - **Set Content type:** Set content type to `application/json` in the dropdown.
 
-  ![Content publish changes](./docs/content-content-type.png)
+  ![Content publish changes](https://github.com/vercel/next.js/assets/9113740/78bd856c-ece1-4bf3-a330-1d544abd858d)
 
 - **Edit post:** Now, try editing the title of one of your blog posts in Contentful and click Publish. You should see the changed reflected in the website you just deployed, all without triggering a build! Behind the scenes a call was made to the revalidate api that triggers a revalidation of both the landing page and the specific post that was changed.
 
-  ![Content publish changes](./docs/content-publish-changes.png)
+  ![Content publish changes](https://github.com/vercel/next.js/assets/9113740/ad96bfa7-89c1-4e46-9d9c-9067176c9769)
 
 - **Verify:** You can verify if your request was made successfully by checking the webhook request log on Contentful and checking for a successful 200 status code, or by having your functions tab open on Vercel when committing the change (log drains may also be used). If you are experiencing issues with the api call, ensure you have correctly entered in the value for environment variable `CONTENTFUL_REVALIDATE_SECRET` within your Vercel deployment.
 
-  ![Content successful request](./docs/content-successful-request.png)
+  ![Content successful request](https://github.com/vercel/next.js/assets/9113740/ed1ffbe9-4dbf-4ec6-9c1f-39c8949c4d38)
@@ -0,0 +1,6 @@
+import { draftMode } from 'next/headers'
+
+export async function GET(request: Request) {
+  draftMode().disable()
+  return new Response('Draft mode is disabled')
+}
@@ -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}`)
+}
@@ -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() })
+}
@@ -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>
+  )
+}
@@ -1,13 +1,25 @@
-import ContentfulImage from './contentful-image'
+import ContentfulImage from '../lib/contentful-image'
 import Link from 'next/link'
-import cn from 'classnames'
 
-export default function CoverImage({ title, url, slug }) {
+function cn(...classes: any[]) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function CoverImage({
+  title,
+  url,
+  slug,
+}: {
+  title: string
+  url: string
+  slug?: string
+}) {
   const image = (
     <ContentfulImage
+      alt={`Cover Image for ${title}`}
+      priority
       width={2000}
       height={1000}
-      alt={`Cover Image for ${title}`}
       className={cn('shadow-small', {
         'hover:shadow-medium transition-shadow duration-200': slug,
       })}

@@ -1,6 +1,6 @@
 import { format } from 'date-fns'
 
-export default function DateComponent({ dateString }) {
+export default function DateComponent({ dateString }: { dateString: string }) {
   return (
     <time dateTime={dateString}>
       {format(new Date(dateString), 'LLLL	d, yyyy')}

@@ -1,5 +1,3 @@
-/* purgecss start ignore */
 @tailwind base;
 @tailwind components;
-/* purgecss end ignore */
 @tailwind utilities;
@@ -1,17 +1,29 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import './globals.css'
+import { Inter } from 'next/font/google'
+import { EXAMPLE_PATH, CMS_NAME } from '@/lib/constants'
 
-export default function Footer() {
+export const metadata = {
+  title: `Next.js and ${CMS_NAME} Example`,
+  description: `This is a blog built with Next.js and ${CMS_NAME}.`,
+}
+
+const inter = Inter({
+  variable: '--font-inter',
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+function Footer() {
   return (
     <footer className="bg-accent-1 border-t border-accent-2">
-      <Container>
+      <div className="container mx-auto px-5">
         <div className="py-28 flex flex-col lg:flex-row items-center">
           <h3 className="text-4xl lg:text-5xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
-            Statically Generated with Next.js.
+            Built with Next.js.
           </h3>
           <div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
             <a
-              href="https://nextjs.org/docs/basic-features/pages"
+              href="https://nextjs.org/docs"
               className="mx-3 bg-black hover:bg-white hover:text-black border border-black text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 lg:mb-0"
             >
               Read Documentation
@@ -24,7 +36,24 @@ export default function Footer() {
             </a>
           </div>
         </div>
-      </Container>
+      </div>
     </footer>
   )
 }
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={inter.variable}>
+      <body>
+        <section className="min-h-screen">
+          <main>{children}</main>
+          <Footer />
+        </section>
+      </body>
+    </html>
+  )
+}
@@ -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>
+  )
+}