Content Preview for your Contentful-Gatsby site with Next.js

Kevin Green
Jan 21, 2019 · 5 min read
Image for post
Image for post
Someone drafting up some of that good good internet via startup stock photos

Contentful is a really powerful CMS that we use on a number of projects at The Couch. However despite most of our clients having an intimate hate for Wordpress, they do have an intimate love for some of the common features. One of which isn’t something that works out of the box with Contentful: Preview.

We build a number of our Contentful sites with Gatsby. Most of our sites have a build time anywhere between 30s to 4 minutes. Because of this wait we’ve implemented some work arounds that allow clients to preview content in the production build. This however has a wait time, as originally pointed out by Work and Co. We opted for another route that would allow for instant previews, and not require the client to publish articles before they were ready.

This was even more important for Supercluster. We built them a very modular article templates that allowed for a diverse editorial experience. We also created an image module that could be rendered in various unique ways on the screen. This required the client to essentially build/test the article and make sure images/text never overlapped depending on the content. We also used the Contentful Rich Text editor to inline modules and make the editing experience even smoother.

Enter Next.js

Gotchas —

  • Next.js doesn’t do shared components from other projects very well
  • We’re using PostCSS in our Gatsby build so importing and compiling that in Next isn’t something supported out of the box
  • Because we’re copy and pasting the Gatsby build into Next.js we’ll also need to install all the dependencies in the Gatsby app (at least for the template we’re previewing)
  • We’ll want to run a server so we can serve a robots.txt disallow
  • Gatsby { Link } is trouble… more on that later

Fixing the shared components… I spent the better part of ~5 hours troubleshooting this, and eventually caved on a simpler solution that wouldn’t require things like symlinking/transpiling external modules with complex configurations. The solution? Copy your Gatsby directory into your next app before you build it so you can always access the most up-to-date shared components from the parent project.

Getting our styles out of Gatsby also proved relatively difficult. Getting PostCSS to work in Next.js is its own can of worms. As a result I opted to handle all the PostCSS work in the package.json file. Depending on the architecture of your project you may not run into this issue. I’ll share my package.json scripts for this project below regardless:

"scripts": {
"dev": "next",
"copy": "npm run build:css; rm -rf gatsby/; cp -R ../src gatsby",
"copy-fonts": "cp -R ../static static",
"build": "next build",
"build:css": "postcss gatsby/styles/main.css -o static/main.css",
"start": "next start"
},

Keep in mind, while developing you could run a prestart script as well, but you’ll not want that in the now production because it will run into trouble finding the parent directory!

Now we can finally build our preview page component. I’m going to show you the whole component and then explain what’s going on:

Those of you familiar with Next.js shouldn’t see anything that unusual here. We’re importing our article from our copied Gatsby template file. We’re also including the compiled CSS from our build task above in the header.

The only real work going on here is the query to get the article based on the id. We’re not including things like layout/header/footer modules as we don’t need them for the preview.

To get this hooked up you have 2 options, the first being ngrok for local development, and the second being a now deployment. Once you have an endpoint set up we’ll want to go into Contentful. Settings->Content Preview from there you can specify the content type you want to be able to preview, in this case Articles and set the url you’ll want to handle the preview.

e.g. http://site-preview.now.sh/preview?id={entry.sys.id}

Once that’s hooked up you should now be able to preview articles from Contentful to your local/deployed environment.

Additional Gotchas — Data Structure

Robots.txt

You just need to create a robots.txt file in a directory within your app, in my case I made one in a folder called raw.

import { Link } from ‘gatsby’

It’s just one final gotcha ;). If you have any other variations feel free to add them, and then just add another script to package.json like node replace.js.

Last Thoughts

Also choosing Next.js meant that we could quickly deploy to services like now and create alias now domains without needing to set up additional subdomains for the client.

Would love to hear how others are doing this, I know Gatsby recently released a preview functionality, but at ~300/month it’s a pretty steep sell.

~Cheers

The Couch

This isn't where I left my website

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store