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


This is a JAMstack app with the power of Cosmic. In JAmstack, Vue.js is used as Javascript part, Cosmic as API and Nuxt.js as Markup.
A primary benefit of managing content API-first is that your content is transformed into portable and scalable content objects, available via API endpoint to create workflows with the third-party applications that your team uses.
Thanks to everyone in Dallas who came out to the Vuetiful Holiday Meetup at Simple Media, featuring Vuetify, Netlify and Cosmic. 🎉
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.
Thanks to all who attended our first webinar / AMA last week. There was some great engagement and questions that helped steer the screen-share webinar for users in the Cosmic Community as well as first-time visitors to the system. If you missed it, check out the video and attend our next one.
Todo List app built using Svelte that utilizes the power of Cosmic.

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales