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 JS.



Too long, didn't watch:
In this tutorial we use the Cosmic JS 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 JS-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.