The new Cosmic dashboard is here!
Test drive it now →

How to Add Dynamic Content to Your Next.js App

Community Articles
Community Articles How to Add Dynamic Content to Your Next.js App

Next.js is an awesome framework to help you build universal React apps.  You get the best of both worlds, server-side rendering for SEO and fast client-side interactions.  In this video tutorial I show you how to add dynamic content to your Next.js using Cosmic.



Too long, didn't watch:
In this tutorial we use the Cosmic NPM module to add content from our Bucket to our Next.js app.  Here's what we built in the pages/index.js file of our example app:

To add Cosmic-powered content all we need to do is connect to our Bucket with a config variable then add the addObject method to the getInitialProps method.  To do this, we need to wrap addObject with a Promise.  Then populate your content using the props.

If you have any questions please reach out to us on Twitter and join our Slack community.

You may also like


In this tutorial, I'll show you how to deploy your Gatsby Blog to Netlify and trigger automatic rebuilds on content edits using Cosmic Webhooks.
Step by step guide to creating a Cosmic extension that imports data
Add the power of Algolia search to your Bucket. This Extension enables you to sync your Cosmic Objects with Algolia, making your data searchable. Set up automatic syncing to automatically add / edit / remove content from Algolia. Follow the simple steps below to install and setup Algolia.
This article walks through an approach to build a web application using Angular and Cosmic to help generate marketing leads for your team.
Creating a static React App without worrying about language boundaries
Thank you to everyone who joined us for our Halloween edition of our Wednesday Webinar series. In this presentation, we discussed making localization for websites less spooky using Gatsby and Cosmic.

Get started with Cosmic

Personal projects are free. Scale up as you grow.
Start building Talk to sales