How to use Next.js Image with a headless CMS

How to use Next.js Preview Mode with the Cosmic headless CMS

Build a Digital Art Marketplace Using Next.js, Cosmic, and Stripe

Creating a Developer Portfolio with Next.js and Cosmic

How to Build a Restaurant Website with Next.js

Build a Non-Profit App with Next.js and Cosmic

<p>Next.js is a React framework for building hybrid applications. It&#39;s flexible, extensible, and works great with any data provider. In this tutorial, part two of a two-part series, we&#39;ll show you how to build a blog with Cosmic CMS and Next.js (you can watch part one, <em>Getting Started with Cosmic CMS and Next.js</em> <a href="https://www.cosmicjs.com/articles/getting-started-with-cosmic-cms-and-nextjs">here</a>).<br><br>We&#39;ll run our blog locally, talk through static-site generation, and publish updates to our site. Next, we&#39;ll discuss preview mode and how to draft posts <a href="/knowledge-base/nextjs-cms">Cosmic CMS.</a> Finally, we&#39;ll walk through fallback loading states and publish our draft post to production.&nbsp;</p><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe src="//www.youtube.com/embed/sdvdwo3g3PE?wmode=opaque" frameborder="0" allowfullscreen="" style="width: 100%; height: 360px;"></iframe></span><br></p>

Building a Blog with Cosmic CMS and Next.js

<p><a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">Next.js</a> is a React framework for building hybrid applications. It&#39;s flexible, extensible, and works great with any data provider. In this tutorial, we&#39;ll show how to get started with <a href="/knowledge-base/nextjs-cms">Cosmic CMS and Next.js.</a><br><br>We&#39;ll set up a Cosmic account, explore the dashboard, talk about the data models, and finally deploy to <a href="https://vercel.com/" rel="noopener noreferrer" target="_blank">Vercel</a>. In the second part of the tutorial, we&#39;ll explain the Next.js code and walkthrough the content management workflow with Cosmic.</p><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe src="//www.youtube.com/embed/NZA1dF2IDqQ?wmode=opaque" frameborder="0" allowfullscreen="" style="width: 100%; height: 360px;"></iframe></span><br></p>

Getting Started with Cosmic CMS and Next.js

<p>We recently launched the <a href="https://storylicensing.com" rel="noopener noreferrer" target="_blank">Story Licensing</a> application which uses some of the most powerful development tools available. &nbsp;By offloading the non-core development functionality onto available API services, we were able to build this application faster than I ever could have imagined. &nbsp;I&#39;m excited to share with you how we did it.</p><h3><br>TL;DR</h3><p><a href="https://storylicensing.com" rel="noopener noreferrer" target="_blank">Check out the live Story Licensing app</a></p><h3><br>The Requirements</h3><p><img src="https://media.giphy.com/media/cALkoAIov3Y9a/giphy.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p>Every application starts with a goal and requirements. &nbsp;For this application, the goal was to acquire leads interested in purchasing the rights to repost online content from publications in the <a href="http://www.amipublications.com/" rel="noopener noreferrer" target="_blank">AMI Publications</a> network. &nbsp;Our requirements:</p><p>1. Stories (for our app, stories published on <a href="http://twitter.com/ami">@ami</a> sites) need to be quickly and easily searchable<br>2. Stories need to indicate a ranking of publicly available social validation (Claps) to the interested lead<br>3. Ability to capture the lead&#39;s email (before the search action)<br>4. Ability to capture the bid request data: story title, lead email, search term bid and send an email to the admin<br>5. Ability to manage copy content by a content manager via a content management system</p><h3><br>The Services</h3><p><img src="https://cosmic-s3.imgix.net/d14ae260-6ce0-11e8-b2d8-b962f2783be9-nextjs-algolia-cosmicjs.jpg" style="width: 100%;" class="fr-fic fr-dib"></p><p>For this app we knew we didn&#39;t want to build and manage *everything*. &nbsp; Instead, we wanted to offload non-core development to the best available services, only building what we need. &nbsp;Any web project with a time crunch (pretty much every
project) would be well-advised to do this so you don&#39;t unnecessarily reinvent functionality that already exists at a high level. &nbsp;So for this app we decided to use:</p><p>1. <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> for content management, data storage, this is also where our Medium articles are stored using the <a href="https://cosmicjs.com/apps/medium-backup" rel="noopener noreferrer" target="_blank">Medium Backup Application</a>.<br>2. <a href="https://algolia.com" rel="noopener noreferrer" target="_blank">Algolia</a> to search stories. &nbsp;It definitely satisfies our speedy search requirement (It&#39;s FAST!)<br>3. <a href="https://sendgrid.com" rel="noopener noreferrer" target="_blank">SendGrid</a> for sending email notifications<br>4. <a href="https://twitter.com/ami" rel="noopener noreferrer" target="_blank">@ami</a> for supplying the story library</p><p>So with all of these, we&#39;ve got the best in class services for the respective functionality. And building our application would involve locking these services together.</p><h3><br>Building the Search Functionality</h3><p><img src="https://media.giphy.com/media/c5eqVJN7oNLTq/giphy.gif" class="fr-fic fr-dib" style="width: 100%;"></p><p>For this app I knew I wanted to use <a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">React</a> (mainly for personal preference). &nbsp;So in keeping with the &quot;build only what you have to&quot; theme, the natural framework choice for me was <a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">Next.js</a>. &nbsp;Their value proposition is &quot;React Applications Made Simple&quot;. &nbsp;It makes it easy to get a React app up and running without a lot
of boilerplate development while providing for a nice developer experience.</p><p>To integrate Algolia, I needed to implement the search bar into the React app. &nbsp;Luckily, they&#39;ve got an excellent <a href="https://community.algolia.com/react-instantsearch/" rel="noopener noreferrer" target="_blank">InstantSearch React Component</a>, which allows for easy integration into React apps. &nbsp;Just set your <code>appId</code>, <code>apiKey</code> and <code>indexName</code>. &nbsp;You can find these in your Algolia dashboard.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6cb53eb0-6ce8-11e8-9928-d7068ff63fd8-Screen Shot 2018-06-10 at 2.56.21 PM.png" style="width: 90%;" class="fr-fic fr-dib"></p><p>Now that I had the search bar implemented, I needed to add records to Algolia. &nbsp;To do this, I needed to add the Cosmic-saved Medium articles into Algolia. &nbsp;I created a script to add Objects from Cosmic into our Algolia search index.</p><p>Here&#39;s <code>add-records.js</code>:</p><div class="fr-embedly                                  " data-original-embed="<a href='https://gist.github.com/tonyspiro/326cec4254f2fb0a14504bf561687452' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/326cec4254f2fb0a14504bf561687452" class="embedly-card"></a></div><p>Next I needed to get claps for stories, because the Medium XML feed for stories (Example: <a href="https://hackernoon.com/feed">https://hackernoon.com/feed</a>) doesn&#39;t include this vital information for our app. &nbsp;So to do this, I needed to create a worker script that could run daily, updating all of our story clap counts.</p><p>Here&#39;s <code>get-claps.js</code>:</p><div class="fr-embedly                                  " data-original-embed="<a href='https://gist.github.com/tonyspiro/1b041812c301e1d3c9aef76ecf40ec31' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/1b041812c301e1d3c9aef76ecf40ec31" class="embedly-card"></a></div><p>This script does the following: Gets all of the saved records in Algolia, hits the <a href="https://twitter.com/ami" rel="noopener noreferrer" target="_blank">@ami</a> story URL, gets the JSON data, parses it for the clap count, and then updates the record in Algolia. &nbsp;This process can run in the background to get and save the latest claps count for each story. &nbsp;This will increase our record actions per day quota in Algolia, increasing our costs, but it&#39;s worth it to get the latest social validation for each story.</p><p>With the search results coming from Algolia, the search term relevance gets priority, but we can also reorder the stories to show the highest clap count on top:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/884465b0-6da7-11e8-ba26-bd4442701118-story-licensing.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>Saving the Lead Emails and Bid Requests</h3><p>Since the goal of this app is to save bid requests for potential customers, we chose SendGrid for a reliable email service provider. &nbsp;I created two endpoints to save the lead email prior to search, and the bid request information after a story had been found.</p><p>Here&#39;s <code>leads.js</code> and <code>bids.js</code>:</p><div class="fr-embedly                                  " data-original-embed="<a href='https://gist.github.com/tonyspiro/7aca4425df89ce7cbf7960c4bcde2202' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/7aca4425df89ce7cbf7960c4bcde2202" class="embedly-card"></a></div><div class="fr-embedly                                  " data-original-embed="<a href='https://gist.github.com/tonyspiro/a11e50cd33a6606b422e3960f75281b2' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/a11e50cd33a6606b422e3960f75281b2" class="embedly-card"></a></div><p>Notice for both of these actions (lead email and bid request), we are also storing the data in Cosmic. &nbsp;This has been done so we can use this data for admin record keeping. &nbsp;Cosmic now has this data available to view, query and deliver
via the Cosmic API into any future applications.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ea2bdfb0-6da7-11e8-ba26-bd4442701118-Screen Shot 2018-06-11 at 1.45.53 PM.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3>In Conclusion</h3><p>The finished app is now available to help you find high-quality content from the <a href="http://www.amipublications.com/" rel="noopener noreferrer" target="_blank">AMI Publications</a> network to license to your website or blog. &nbsp;<a href="https://storylicensing.com" rel="noopener noreferrer" target="_blank">Check it out here</a>. &nbsp;</p><h4><br>Resources Used</h4><p><a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic NPM module</a><br><a href="https://www.npmjs.com/package/react-instantsearch" rel="noopener noreferrer" target="_blank">Algolia React InstantSearch NPM module</a><br><a href="https://www.npmjs.com/package/@sendgrid/mail" rel="noopener noreferrer" target="_blank">SendGrid NPM module</a></p><p>I&#39;m happy with the way this project came together. &nbsp; The development was fast thanks to using the best services and developer tools available (Algolia, SendGrid, Next.js and Cosmic) to deliver a fast and scalable application. &nbsp;Let me know your thoughts, <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a> and <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">follow Cosmic on Twitter</a>.</p>

Cosmic blogs on Next.js

Start building today

Cosmic blogs on Next.js

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today