vercelnext.js13contentfulapp-router

New Content from Contentful not Showing on NextJS App

I'm using Contentful as my CMS and NextJS to show my content. My NextJS app is hosted on Vercel. I'm using NextJS 13 with AppRouter.

The thing is I'm not sure how to get new content on Contentful to show on NextJS.

I've tried to add revalidate to the Contentful SDK, but it causes the content to not load.

And exporting revalidate on the main page doesn't do anything.

How can I get NextJS to rebuild when I post new content without redeploying it? I'm new to NextJS.

Here's my repo: https://github.com/davinaleong/proj-laugh-and-be-blessed-next

Solution

  • You need to create a webhook to trigger everytime the content changes.

    Step 1: Go to your Vercel Project

    Step 2: Access Project Settings In the Vercel dashboard, navigate to "Settings." You can usually find it in the top navigation bar.

    Step 3: Configure Git Settings Inside the "Settings" menu, click on "Git" in the left sidebar.

    Step 4: Scroll Down to Deploy Hooks

    Step 5: Add a New Deploy Hook Click on the "Add" button to create a new deploy hook. Give your deploy hook a name (e.g., "Contentful Content Change"). Specify the branch name you want to trigger the webhook for. Click "Save."

    Step 6: Copy the Webhook URL After saving, you'll see a unique URL generated for your deploy hook. Copy this URL to your clipboard.

    Step 7: Return to Contentful

    Step 8: Access Contentful Settings

    Step 9: Configure Webhooks In the Contentful dashboard, click on "Settings" in the navigation menu and choose "Webhooks".

    Step 10: Add a New Webhook On the right-hand side, you'll see "Vercel Deploy Site." Click on "Add" next to it.

    Step 11: Configure Webhook Settings Give your webhook a name (e.g., "Contentful to Vercel"). Paste the URL you copied from your Vercel deploy hook in the previous steps into the URL field. Customize the webhook settings based on your requirements. You can choose to trigger it for specific content events or apply other filters as needed. Click "Save" to save your webhook settings.

    Step 12: You're Done!

    Your webhook is now set up to trigger every time content changes in Contentful and integrate with your Vercel project. ✅ These instructions should help you set up the webhook seamlessly.

    You can see in the Deployments tab a new build triggered after you made the changes in Contentful.