How to Add Dynamic Content to Your Next.js App

Tony Spiro
Cosmic
Published in
1 min readOct 10, 2017

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:
Here’s what we built: In this tutorial we use the Cosmic JS NPM module to add content from our Bucket to our Next.js app. Here’s is what we build in this tutorial:

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.

--

--