<p>I previously covered the <a href="/blog/why-i-chose-react-nextjs-for-my-website" rel="follow">many reasons I chose to use Next.js</a> for this site of mine. One of the main reasons is SEO. Next.js offers several ways to fetch data and create static files that make it easy for web crawlers to scan page content. While Next.js does a fantastic job generating the front-end, it does not offer an admin panel to quickly write and manage page content. Next.js offers flexibility and can be used for many things, but is not comparable to WordPress or Drupal.</p>
<p>However, an easy-to-use admin panel is almost a must when creating content on a site.</p>
<p>ButterCMS fills this requirement with a beautiful, easy-to-use interface for managing different content. You can control the following through the ButterCMS dashboard:</p>
<ul>
<li><span data-preserver-spaces="true">Blog posts</span></li>
<li><span data-preserver-spaces="true">Pages</span></li>
<li><span data-preserver-spaces="true">Collections - organize menu bar links</span></li>
<li><span data-preserver-spaces="true">Components - used as building blocks when creating a page</span></li>
<li><span data-preserver-spaces="true">Media - all your media files are in one place</span></li>
</ul>
<p>I was interested in blog posts, pages, and managing media when working on this website.</p>
<p><strong>Today, I will showing how to create static pages in Next.js that load content from ButterCMS.</strong></p>
<p>If you'd like to skip the tutorial, <a href="https://github.com/jsikes/example-next-js-butter-cms-pages" rel="nofollow noopener" target="_blank">click here to view the example code on Github</a>. Otherwise, continue to follow along.</p>
<h3>Assumptions</h3>
<p>I'm assuming you already have a Next.js website setup and working. At a minimum you should follow the <a href="https://nextjs.org/docs/getting-started" rel="nofollow noopener" target="_blank">Next.js initial setup guide first</a>.</p>
<h3>Add Dependencies</h3>
<p>Butter CMS has a single dependency that will add everything we need to load our content.</p>
<p><code>yarn add buttercms</code></p>
<h3>Adding Our API Key to an Environmental Variable</h3>
<p>Create a file at the root level of your project and name it <code>.env.local</code>.</p>
<p>Add the following to the .env file:&nbsp;<code><span style="font-family: sans-serif;">BUTTER_CMS_API_KEY</span><span style="font-family: sans-serif;">=&lt;YOUR_API_KEY&gt;</span></code></p>
<p>You can find your API key on the ButterCMS Settings page.</p>
<figure class="image"><img src="https://cdn.buttercms.com/jQyxCDuRQim23LBnQLfW" alt="ButterCMS API Tokens" width="500" height="382" />
<figcaption>Copy your API Token from the ButterCMS Settings page</figcaption>
</figure>
<h3>Creating Our Service Call File</h3>
<p>This file integrates with our <code>buttercms</code> dependency to make API calls to get our data. This file will keep all the API call logic out of our pages.</p>
<p>Create a file and call it <code>cms.js</code>. Put the file into a folder called <code>/services</code> in our root directory.</p>
<pre><code>import Butter from 'buttercms';<br /><br />const butter = Butter(process.env.BUTTER_CMS_API_KEY);<br /><br />// Pull in content for a single page by name<br />export const getPage = async (name) =&gt; {<br />&nbsp; try {<br />&nbsp; &nbsp; const response = await butter.page.retrieve('*', name);<br /><br />&nbsp; &nbsp; return response?.data?.data<br />&nbsp; } catch (error) {<br />&nbsp; &nbsp; throw error.response.data.detail<br />&nbsp; }<br />};</code></pre>
<p>This file is pretty straightforward. We're importing <code>buttercms</code>, initiating it with our API key loaded from <code>.env.local</code>, and finally, we export a function that gets our data.</p>
<p><strong>Note: We can use this same file to add additional functions that pull in blog posts, categories, tags, etc.</strong></p>
<h3>Populating a Page With Content</h3>
<p>Now let's create a page. For this example, create a file called <code>about.js</code> and put it into our <code>/pages</code> folder. The <code>/pages</code> folder is a standard Next.js folder used to generate page routes.</p>
<p>In our <code>about.js</code> file, we'll export <code>getStaticProps</code> in addition to our default about page export.</p>
<pre><code>import { getPage } from '../services/cms';<br /><br /><br />const About = ({ content }) =&gt; (<br />&nbsp; &lt;&gt;<br />&nbsp; &nbsp; { !content &amp;&amp; &lt;p&gt;No page content available.&lt;/p&gt; }<br /><br />&nbsp; &nbsp; { content &amp;&amp; &lt;div dangerouslySetInnerHTML={{ __html: content }} /&gt; }<br />&nbsp; &lt;/&gt;<br />);<br /><br />export const getStaticProps = async () =&gt; {<br />&nbsp; try {<br />&nbsp; &nbsp; const content = (await getPage('about')).fields.content;<br /><br />&nbsp; &nbsp; return {<br />&nbsp; &nbsp; &nbsp; props: {<br />&nbsp; &nbsp; &nbsp; &nbsp; content<br />&nbsp; &nbsp; &nbsp; }<br />&nbsp; &nbsp; };<br />&nbsp; } catch (error) {<br />&nbsp; &nbsp; console.error(`Couldn't load content.`, error);<br /><br />&nbsp; &nbsp; return {<br />&nbsp; &nbsp; &nbsp; props: { content: null }<br />&nbsp; &nbsp; }<br />&nbsp; }<br />};<br /><br />export default About;</code></pre>
<p>As you can see above, we import the <code>getPage</code> function that we added to the <code>/services</code> folder. Doing so will allow us to load the about page content from ButterCMS. We'll add an <code>export</code> of <code>getStaticProps</code> to our about page. Within <code>getStaticProps</code>, call the <code>getPage</code> function and pass the parameter&nbsp;<em>about</em> into the function . We're using <code>getStaticProps</code> so that Next.js loads our ButterCMS content server side and returns a static page. Being static allows web crawlers to quickly and easily index the page.</p>
<h3>Add an About Page to ButterCMS</h3>
<p>Make sure you add a new page using ButterCMS and give it an API Slug of <em>about</em>.</p>
<figure class="image"><img src="https://cdn.buttercms.com/uhNwJSI9S3Og1GICz7Rw" alt="Butter CMS Api Slug Interface" width="500" height="282" />
<figcaption>The interface to specify an API Slug within ButterCMS</figcaption>
</figure>
<h3>Test Locally</h3>
<p>Finally, run <code>yarn dev</code> in your dev terminal and open <code>localhost:3000/about</code> in a browser. You should see your page content from ButterCMS loaded onto your about page.</p>
<h3>Next Steps</h3>
<p>With not much code, we've integrated ButterCMS into our Next.js site. Our implementation uses <code>getStaticProps</code>, so Next.js generates static files for us.</p>
<p>If I were making a website (like the one you're on 😉), my next steps would be to load a list of blog posts and show some previews. Then, write code to generate a unique page for each post. There are functions to easily do that. ButterCMS also has functions to pull categories and tags, and there are even functions that return Atom and RSS feeds (I have an RSS feed link down in the footer). These features are straightforward to integrate, and the implementation will look similar to our <code>getPage</code> function found in the <code>services/cms.js</code> file.</p>
<p>To get started with the additional functionality, <a href="/docs/api/?javascript#introduction" rel="nofollow noopener" target="_blank">head over to the ButterCMS documentation</a>.</p>
<p><a href="https://github.com/jsikes/example-next-js-butter-cms-pages" rel="nofollow noopener" target="_blank">View the GitHub Example Repo</a></p>

Learn how to combine ButterCMS with Next.js to easily create SEO optimized pages. With a working Github example repo too!

ButterCMS and Next.js Are an SEO Power Couple

Learn how to combine ButterCMS with Next.js to easily create SEO optimized pages.

<p>Every year I like to explore and reevaluate what apps I use in my workflow. I recently upgraded my laptop and went through my most used apps to make an install/setup list. I thought sharing the apps that help me the most would be helpful. They're divided into development, design, organization, and utilities. All apps listed below are optimized for both Intel and Apple Silicon processors.</p>
<h2>Development</h2>
<h3>Visual Studio Code</h3>
<p>Visual Studio Code is my primary code editor. It's very refined and optimized for building and debugging web apps. In prior years I used Atom, and before that, I used Coda.</p>
<figure class="image"><img class="pull-right" src="https://cdn.buttercms.com/ZL7dbizUQyqU3gcvnD60" alt="Visual Studio Code UI" width="500" height="326" />
<figcaption>Exploring the Extensions tab in Visual Studio Code</figcaption>
</figure>
<h3>TablePlus</h3>
<p>TablePlus has replaced Querious (a relational DB Mac app) and Medis (a Redis Mac app) in my workflow. The app looks modern due to its native GUI, but that's not even the best part. This is truly a Swiss Army knife for database management. It primarily supports relational databases such as Microsoft SQL, Postgres, MariaDB, etc... but it also supports non-relational databases such as MongoDB and Redis!</p>
<figure class="image"><img src="https://cdn.buttercms.com/q6uaBU7HT82E74cBb3iL" alt="TablePlus UI Screenshot" width="500" height="295" />
<figcaption>TablePlus has a clean UI with support for many database types</figcaption>
</figure>
<h3>Node.js</h3>
<p>Not so much an app I use with a GUI, but I'll be using this list as a reminder of apps I need to install when I get my new M2 MacBook Air. So, remember to install Node if you're a front-end developer too.</p>
<h3>GitHub Desktop</h3>
<p>While I mostly use a terminal with Git, it's nice to have a polished UI that offers syntax highlighted diffs. The time history tab also makes it easy to visually track who's merging what and to access merge hashes for reverts.</p>
<figure class="image"><img src="https://cdn.buttercms.com/wiEUCDfWTWWFpgYglXNT" alt="GitHub Desktop UI" width="500" height="688" />
<figcaption>History with excellent diff highlighting</figcaption>
</figure>
<h3>Postman</h3>
<p>Postman is my go-to for testing Node APIs that I've created. It also helps when familiarizing myself with new 3rd party APIs. But my favorite feature is Collections, which I use to keep track of all available endpoints for a project. Some of these other apps have decently worthy alternatives, but I have not found one close to Postman.</p>
<h2>Design</h2>
<h3>Sketch</h3>
<p>Figma has grown in popularity over the past few years. I know my current company has migrated its design team to Figma. I still prefer a native Mac UI for one-off mockups or personal projects. Native can offer features that a web interface can't accomplish. For instance, Sketch can screen mirror to an iPhone or iPad when designing for mobile platforms. There's also support for plugins which dramatically expands what the software is capable of. Maybe I'll migrate to Figma eventually, but so far, in 2022, Sketch is my go-to design app.</p>
<h3>Pixelmator Pro</h3>
<p>Speaking of native apps, Pixelmator is what Photoshop would be if designed 100% for macOS. The application is highly optimized for the many cores on the M1 Ultra and can use the Neural Engine to speed up machine learning-based background removal. I also like that Pixelmator Pro offers workspaces for different tasks. Options include Photography, Illustration, Design, and Painting.&nbsp;</p>
<h3>Eagle</h3>
<p>When working on new designs for a project, I like to collect ideas. I used to put all the screenshots and sometimes links into a folder to keep all my thoughts in one area. This makes looking at all my design ideas in one area pretty impossible, and this method also lacked things like tagging for better organization. Eagle solves all of these problems and more. Eagle collects and organizes your design files all in one place. Features like search, smart folders, and tagging make staying organized simple, and it's a must-have for me.</p>
<h3>ColorSlurp</h3>
<p>macOS has a built-in color sampler. ColorSlurp takes this idea to the next level. Storing project colors in Collections is nice, but ColorSlurp goes further. Some notable features include Accessibility testing of contrast ratios, converting colors into different formats, syncing of Collections using iCloud, and even an iOS app so you can sample colors using the camera.</p>
<h2>Organization</h2>
<h3>Notion</h3>
<p>A friend introduced me to Notion, and I've been using it more and more. Notion can be hard to describe due to how flexible it is. It's excellent for creating to-do lists, taking notes, organizing tasks on a Kanban board (replacing Trello), having a project wiki, or collecting data using a table with powerful filters. I think the best way I could show off the power of Notion would be to recommend you check out their templates page. It's surprising to see how many uses there can be for the Notion app.</p>
<p><a href="https://www.notion.so/templates" rel="nofollow noopener" target="_blank">View Notion Templates</a></p>
<figure class="image"><img src="https://cdn.buttercms.com/weLkP6efRw2tWiEkglb3" alt="Notion screenshot" width="500" height="643" />
<figcaption>An example Kanban board with Notion. <a href="https://www.notion.so/templates" rel="nofollow noopener" target="_blank">Check out the templates</a>, it does a lot more.</figcaption>
</figure>
<h3>NordPass</h3>
<p>This year I made the switch to NordPass from 1Password. In my opinion, 1Password has become feature bloated. On top of the complexity, you'll need to buy apps for both macOS and iOS. Nordpass is an excellent alternative brought to us by the creators of NordVPN. It's simple and clean, plus it's more affordable with a free iOS app to keep passwords in sync.</p>
<figure class="image"><img src="https://cdn.buttercms.com/CTbuJyIcRNSeYCzrF1re" alt="NordPass UI" width="500" height="788" />
<figcaption>Keep secure passwords handy with a clean UI at a nice price point</figcaption>
</figure>
<h2>Utilities</h2>
<h3>Claquette</h3>
<p>This utility is great for taking screen recordings and exporting them in various formats, including animated gif files. Who doesn't love a good gif? You can also add voiceovers and PiP video using a camera.</p>
<h3>CheatSheet</h3>
<p><span data-preserver-spaces="true">CheatSheet makes it easier to become a super keyboard shortcut user. Install the app, hold down the command key&nbsp;</span><strong><span data-preserver-spaces="true">⌘&nbsp;</span></strong><span data-preserver-spaces="true">for about a second, and a dialog will pop over any app with a list of all available keyboard shortcuts. It's super handy to remember shortcuts for apps you've used for years or for a new app you're unfamiliar with.</span></p>
<figure class="image"><img src="https://cdn.buttercms.com/ppRetehCTo2hjwBkmFi9" alt="Cheatsheet Overpanel UI" width="500" height="489" />
<figcaption>Holding the command key <strong><span data-preserver-spaces="true">⌘</span></strong>&nbsp;in Safari brings up the following shortcuts</figcaption>
</figure>
<h3>ImageOptim</h3>
<p><span data-preserver-spaces="true">I've been using ImageOptim for probably a decade. The app is simple, with an area to drop any image file. It will then strip away every piece of metadata to significantly and losslessly reduce file sizes. You can also enable lossless compression for further savings. Under the hood, it's using a collection of open source image libraries. Similar results can be configured with Webpack, but sometimes I still have use cases for this handy little app. I use it to compress screenshots for my blog posts here for example.</span></p>
<p><strong><span data-preserver-spaces="true">Note:</span></strong><span data-preserver-spaces="true">&nbsp;This is the only app that doesn't have an official release with Mac silicon support. There is a beta that I've been using with no issues that adds native support.</span></p>
<figure class="image"><img src="https://cdn.buttercms.com/p0RcGO3pSAOKTI0KEugb" alt="ImageOptim UI" width="500" height="516" />
<figcaption>I took a screenshot and then compressed the resulting png file. ImageOptim was able to reduce the file size by 81.7%.</figcaption>
</figure>
<h2>Other</h2>
<h3>ReadKit</h3>
<p>RSS may be dead, but I think it's great for keeping up with multiple websites in one feed. All ad-free, by the way. ReadKit has a great UI with many customizable preferences to get articles looking just how you want. My favorite feature is the ability to find an RSS feed with just a domain. Since RSS has fallen out of popularity, finding those RSS feed links can be tricky, but ReadKit makes it simple.</p>

An overview of the apps that have helped me design, develop, and stay organized the most in 2022.

My Most Used Mac Apps of 2022

<p>Most all mobile devices now feature an appearance setting to switch between light and dark mode. Even some browsers and operating systems support this feature on desktop devices nowadays. Wouldn't it be cool if our website could automatically match this user preference?</p>
<p>We'll go over how to accomplish this easily while keeping everything organized.</p>
<h3>How We Typically Define Styles</h3>
<p>Within your CSS you probably have many classes that control the colors of backgrounds, borders, and text.</p>
<p>Here's a simple example of a CSS class to make a red box:</p>
<pre><code>.a-red-box {<br />&nbsp; background-color: #fca5a5;<br />&nbsp; border: 1px solid #dc2626;<br />&nbsp; color: #000;<br />&nbsp; height: 200px;<br />&nbsp; width: 200px;<br />}</code></pre>
<p>This would generate a red box that looks like this:</p>
<figure class="image"><img src="https://cdn.buttercms.com/S0OD3nAQkOuvVEgisgVQ" alt="A red box" width="202" height="202" />
<figcaption>If you were wondering what a red box looks like.</figcaption>
</figure>
<h3>Treat Dark Mode as an Overwrite</h3>
<p>Now that we have our main styling, we'll overwrite the colors using a media query that's inlined into our class definition.</p>
<pre><code>.a-red-box {<br />&nbsp; background-color: #fca5a5;<br />&nbsp; border: 1px solid #dc2626;<br />&nbsp; color: #000;<br />&nbsp; height: 200px;<br />&nbsp; width: 200px;<br />
&nbsp; @media (prefers-color-scheme: dark) {<br />&nbsp; &nbsp; background-color: #b91c1c;<br />&nbsp; &nbsp; border: 1px solid #7f1d1d;<br />&nbsp; &nbsp; color: #FFF;<br />&nbsp; }<br />}</code></pre>
<p>We placed our @media query nested at the end of our CSS class definition. The overwrites will be ignored for browsers that don't support this functionality. If a browser does support the <code>prefers-color-scheme</code>, the user will see a darker version of the red box when their device is set to dark mode. In dark mode our box now looks like this:</p>
<figure class="image"><img src="https://cdn.buttercms.com/Dw0Ky9cTZe2cdT44GDyz" alt="A dark red box" width="202" height="202" />
<figcaption>If you were wondering what a dark red box looks like.</figcaption>
</figure>
<h3>Final Thoughts</h3>
<p>There you have it. We learned what red boxes look like and how to make them light or dark depending on a user's device preferences. To convert a whole website, you'd go through the site and apply these overwrites throughout your CSS. I'd also recommend using CSS variables or SCSS variables to store colors. This will help maintain consistency.</p>

Learn how to easily use CSS Media Queries to create a light and dark mode of your website. Which will match the users device settings automatically.

Take Any Site to the Dark Side With CSS Media Queries

Use CSS Media Queries to make any site match a users device preferences for a light or dark interface.

https://api.github.com/repos/jsikes/example-next-js-butter-cms-pages/contents/{+path}

Using ButterCMS to populate static page content with a Next.js app

MIT License

example-next-js-butter-cms-pages

https://api.github.com/repos/jsikes/example-next-js-redis-page-views/contents/{+path}

Use Redis Sets to store page views with Next.js

example-next-js-redis-page-views

https://api.github.com/repos/jsikes/prework-study-guide/contents/{+path}

Joey Sikes

ButterCMS and Next.js Are an SEO Power Couple

My Most Used Mac Apps of 2022

Take Any Site to the Dark Side With CSS Media Queries

Using ButterCMS to populate static page content with a Next.js app

Use Redis Sets to store page views with Next.js

A study guide for course pre-work.